/* =========================================================================
   Onskerkgebouw.nl — stylesheet

   Opzet: mobiel eerst, daarna één breekpunt naar de brede weergave.
   Breekpunten staan in `em`, zodat de indeling meeschuift wanneer een bezoeker
   de tekstgrootte van zijn browser verhoogt. De doelgroep doet dat vaker dan
   gemiddeld, dus dat is hier geen detail.

   De kleuren en maten komen uit de huisstijl (docs/huisstijl/). Nergens anders
   in dit bestand staat een losse kleurcode; alles wijst naar deze variabelen.
   ========================================================================= */

/* Public Sans, zelf gehost (SIL Open Font License, zie ../fonts/OFL.txt).
   Vijf gewichten, geen cursief: de huisstijl gebruikt er geen. */
@font-face {
  font-family: "Public Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/PublicSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/PublicSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/PublicSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/PublicSans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/PublicSans-ExtraBold.woff2") format("woff2");
}

:root {
  /* Huisstijl: de namen uit het merkblad */
  --colour-ink: #1c2830; /* Inkt: bodytekst, voettekst */
  --colour-base: #24425c; /* Leisteen: merkkleur, heroband, koppen */
  --colour-base-hover: #223e56; /* 6% donkerder, voor knoppen op Leisteen */
  --colour-slate-60: #4a6b8a;
  --colour-soft: #dce8f2; /* Lucht: icoontegels, grote nummers op wit */
  --colour-soft-on-fond: #c6d8e8; /* Lucht op Fond, voor de nummers op een grijsblauw vlak */
  --colour-accent: #e8a33b; /* Oker licht: actieknop, accenten op donker */
  --colour-accent-hover: #da9937; /* 6% donkerder */
  --colour-accent-strong: #c98a2d; /* Oker: accent op licht, aandachtsrand */
  --colour-fond: #f2f6fa; /* Fond: afwisselende sectie-achtergrond */
  --colour-line: #e3e7e3;
  --colour-text-muted: #5a6b77;
  --colour-surface: #ffffff;

  /* Gedempte tinten op de donkere vlakken */
  --colour-on-dark-muted: #b8cbdd; /* tekst op Leisteen */
  --colour-on-dark-faint: #8fa9c2; /* bijschriften op Leisteen */
  --colour-on-ink-muted: #8fa3b3; /* links en bijschrift op Inkt */

  /* Statuskleuren uit het merkblad: tekst, vlak en stip. Alleen voor badges. */
  --status-ok-text: #1f5631;
  --status-ok-bg: #eaf4ec;
  --status-ok-dot: #2e7d46;
  --status-aandacht-text: #7a5a1e;
  --status-aandacht-bg: #fbf1dd;
  --status-aandacht-dot: #c98a2d;
  --status-verlopen-text: #8a2f21;
  --status-verlopen-bg: #f9e7e4;
  --status-verlopen-dot: #b3402e;

  /*
   * Het stoplicht van de scan: rood, oranje en groen voor de niveaus van het
   * beheer. Rood en groen zijn de statusstippen hierboven; het oranje is
   * feller dan Oker, zodat het naast de actieknop niet als merkkleur leest.
   */
  --stoplicht-rood: var(--status-verlopen-dot);
  --stoplicht-rood-bg: var(--status-verlopen-bg);
  --stoplicht-oranje: #e07a1f;
  --stoplicht-oranje-bg: #fdeedd;
  --stoplicht-groen: var(--status-ok-dot);
  --stoplicht-groen-bg: var(--status-ok-bg);

  /*
   * De "warme" sectie uit de eerste opzet is er nog, maar wijst nu naar Fond:
   * de huisstijl kent één neutraal, geen tweede.
   */
  --colour-warm: var(--colour-fond);
  --colour-warm-tint: var(--colour-soft);
  --colour-warm-line: var(--colour-line);

  /* Schaduwen uit het merkblad; nergens andere. */
  --shadow-card: 0 2px 8px rgb(28 40 48 / 6%);
  --shadow-photo: 0 8px 24px rgb(0 0 0 / 25%);
  --shadow-menu: 0 6px 18px rgb(36 66 92 / 12%);

  --font-body: "Public Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Ruimtemaat; alles in rem zodat het meeschaalt met de tekstgrootte. */
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1.25rem;
  --space-l: 2rem;
  --space-xl: 3.5rem;
  --space-xxl: 5rem;

  --width-container: 72rem;
  --width-prose: 34rem;

  /* Drie afrondingen, niet meer: knoppen 6, kaarten 8, foto's 10. */
  --radius: 6px;
  --radius-card: 8px;
  --radius-photo: 10px;
}

/* -------------------------------------------------------------------------
   Basis
   ------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * Een eigen regel met `display` verslaat de [hidden] van de browser: die staat
 * in de standaardstylesheet en verliest van elke klasseselector. Zonder deze
 * regel staat het lege blok "Gekozen" op het inlogscherm in beeld voordat er
 * iets gekozen is — het attribuut staat er wel, maar `.inlog__gekozen` zet
 * `display: flex` en wint. Dezelfde regel staat in dossier.css.
 */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  /*
   * De kopbalk blijft bovenin staan. Een anker (/kennis/#verduurzaming) springt
   * daarom tot onder de balk, en niet erachter.
   */
  scroll-padding-top: var(--hoogte-kopbalk, 5rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--colour-ink);
  background-color: var(--colour-surface);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 var(--space-m);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

p {
  margin: 0 0 var(--space-m);
  max-width: var(--width-prose);
}

a {
  color: var(--colour-base);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

a:hover {
  color: var(--colour-ink);
}

img {
  max-width: 100%;
  height: auto;
}

/*
 * Eén duidelijke focusring voor het hele document; nooit uitzetten.
 * Leisteen op licht; de donkere vlakken zetten hem om naar Oker.
 */
:focus-visible {
  outline: 2px solid var(--colour-base);
  outline-offset: 2px;
}

.container {
  width: min(100% - 2 * var(--space-m), var(--width-container));
  margin-inline: auto;
}

.skip-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  position: absolute;
  left: var(--space-m);
  top: var(--space-xs);
  z-index: 10;
  padding: var(--space-xs) var(--space-m);
  background: var(--colour-surface);
  border: 2px solid var(--colour-base);
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
   Knoppen
   ------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  background: none;
  border: 2px solid transparent;
  cursor: pointer;
}

/* De hoofdactie: Oker met donkere letters (7,9:1 op de knop). */
.button--accent {
  background-color: var(--colour-accent);
  color: var(--colour-ink);
}

.button--accent:hover {
  background-color: var(--colour-accent-hover);
  color: var(--colour-ink);
}

/* Leisteen met witte letters, voor de knop in de kopbalk. */
.button--base {
  background-color: var(--colour-base);
  color: var(--colour-surface);
}

.button--base:hover {
  background-color: var(--colour-base-hover);
  color: var(--colour-surface);
}

.button--outline {
  border-color: var(--colour-base);
  color: var(--colour-base);
}

.button--outline:hover {
  background-color: var(--colour-soft);
  color: var(--colour-base);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  max-width: none;
  margin-top: var(--space-l);
}

/* -------------------------------------------------------------------------
   Koptekst en navigatie
   ------------------------------------------------------------------------- */

/*
 * De kopbalk blijft staan als de bezoeker naar beneden scrolt: het menu en de
 * inlogknop zijn dan altijd één klik weg. `sticky` en niet `fixed`, zodat de
 * balk zijn eigen plek in de pagina houdt en de inhoud er niet onder schuift.
 * Daarom ook een eigen achtergrond: de pagina scrolt er nu onderdoor.
 *
 * Geen `backdrop-filter` of `transform` hier: die maken van de kopbalk het
 * kader voor `position: fixed`, en dan valt het volledige-schermmenu op smal
 * scherm niet meer over de pagina maar binnen de balk.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--colour-surface);
  border-bottom: 1px solid var(--colour-line);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-m);
}

.site-logo {
  display: inline-flex;
  /*
   * Op de basislijn en niet op het midden: de voeten van het beeldmerk horen
   * op dezelfde hoogte te staan als de onderkant van het woordmerk. De
   * tekening staat daarvoor onderin haar viewBox, zodat de onderrand van de
   * SVG samenvalt met de onderkant van de inkt — en dat is wat de browser bij
   * een vervangen element als basislijn neemt.
   */
  align-items: baseline;
  gap: 0.625rem;
  min-height: 44px;
  font-size: 1.125rem;
  line-height: 1;
  font-weight: 800;
  color: var(--colour-ink);
  text-decoration: none;
}

.site-logo:hover {
  color: var(--colour-ink);
}

.site-logo__beeldmerk {
  display: block;
  color: var(--colour-base);
}

/*
 * De torenas en de band in het beeldmerk: Oker, dezelfde accentkleur als het
 * ".nl" in het woordmerk ernaast. Het beeldmerk staat overal op wit (site-kop
 * en demo-kop), dus Oker en niet Oker licht.
 */
.site-logo__accentlijn {
  stroke: var(--colour-accent-strong);
}

.site-logo__accent {
  color: var(--colour-accent-strong);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  min-width: 44px;
  padding: 0.5em 0.9em;
  font: inherit;
  font-weight: 700;
  color: var(--colour-base);
  background: none;
  border: 2px solid var(--colour-line);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background-color: currentColor;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 6px;
}

/*
 * Open menu: de knop wordt een kruis en het woord wisselt mee. Twee losse
 * elementen en geen omgeklapte balkjes: dat laatste is een aardigheidje dat op
 * een trage telefoon halverwege blijft hangen.
 */
.nav-toggle__kruis {
  position: relative;
  display: none;
  width: 1.25rem;
  height: 1.25rem;
}

.nav-toggle__kruis::before,
.nav-toggle__kruis::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
}

.nav-toggle__kruis::before {
  transform: rotate(45deg);
}

.nav-toggle__kruis::after {
  transform: rotate(-45deg);
}

.nav-toggle__woord--sluiten {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars,
.nav-toggle[aria-expanded="true"] .nav-toggle__woord:not(.nav-toggle__woord--sluiten) {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__kruis {
  display: block;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__woord--sluiten {
  display: inline;
}

/*
 * Zonder JavaScript staat het menu open en is de knop nutteloos: dan verbergen
 * wij de knop in plaats van het menu. Het script zet `data-js` op <html> zodra
 * het draait; pas daarna mag het menu inklappen.
 */
:root:not([data-js="on"]) .nav-toggle {
  display: none;
}

:root[data-js="on"] .site-nav:not([data-open]) {
  display: none;
}

/*
 * Op smal scherm neemt het menu het hele scherm.
 *
 * Waarom niet gewoon uitschuiven onder de kopbalk: met negen thema's en drie
 * uitklappers is de lijst langer dan het scherm, en dan scrolt de pagina
 * eronder mee terwijl de bezoeker denkt in het menu te scrollen. Volledig
 * scherm haalt die dubbelzinnigheid weg. De knop blijft staan waar hij stond,
 * dus sluiten gaat met dezelfde beweging als openen.
 *
 * Alleen als het script draait: zonder JavaScript staat het menu open in de
 * pagina en zou een vaste laag over de inhoud heen vallen.
 */
:root[data-js="on"] .site-nav[data-open] {
  position: fixed;
  inset: var(--hoogte-kopbalk, 4.5rem) 0 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-m) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--colour-surface);
}

.site-nav {
  flex-basis: 100%;
}

/*
 * De twee knoppen blijven onderin staan, ook als de lijst erboven scrolt: dat
 * zijn de twee dingen waarvoor iemand het menu opent en niet vindt.
 */
:root[data-js="on"] .site-nav[data-open] .site-nav__acties {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: var(--space-m) 0;
  background: var(--colour-surface);
  border-top: 1px solid var(--colour-line);
}

:root[data-js="on"] .site-nav[data-open] .site-nav__acties .site-nav__inlog {
  order: 2;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--colour-base);
  border: 1.5px solid var(--colour-base);
  border-radius: var(--radius);
}

:root[data-js="on"] .site-nav[data-open] .site-nav__acties .button {
  order: 1;
  width: 100%;
  text-align: center;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * De menu-items in Leisteen, vet en op leesgrootte: het menu is de eerste weg
 * door de site, en de doelgroep leest liever 16px dan 14px. Altijd 700, ook
 * zonder hover, zodat de balk niet verspringt als een item oplicht.
 */
.site-nav__link {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-s) 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  color: var(--colour-base);
  text-decoration: none;
  border: 0;
  background: none;
  border-bottom: 1px solid var(--colour-line);
}

.site-nav__chevron {
  transition: transform 150ms ease;
}

/*
 * De opengeklapte sectie draagt haar chevron omhoog en in Oker. Op smal scherm
 * is dat het enige verschil tussen open en dicht, want de rijen zelf blijven
 * gelijk; kleur alleen zou te weinig zijn, de stand alleen te subtiel.
 */
.site-nav__item--group[data-open] > .site-nav__toggle .site-nav__chevron {
  transform: rotate(180deg);
  color: var(--colour-accent-strong);
}

.site-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  cursor: pointer;
}

.site-nav__link[aria-current="page"],
.site-nav__toggle.is-current,
.site-nav__inlog[aria-current="page"] {
  font-weight: 700;
}

.site-nav__submenu {
  display: none;
  padding: 0 0 var(--space-s) var(--space-m);
}

.site-nav__item--group[data-open] > .site-nav__submenu {
  display: flex;
  flex-direction: column;
}

/*
 * Zonder JavaScript opent focus het paneel rechtstreeks. Draait het script wel,
 * dan doet dat het via `data-open`: alleen zo kan een tweede klik op de knop
 * het paneel ook weer sluiten terwijl de knop nog focus heeft.
 */
:root:not([data-js="on"]) .site-nav__item--group:focus-within > .site-nav__submenu {
  display: flex;
  flex-direction: column;
}

/*
 * De twee acties rechts in de balk: inloggen en een demo aanvragen.
 *
 * "Inloggen" is bewust een tekstlink en geen tweede knop. Twee knoppen naast
 * elkaar laten de bezoeker kiezen tussen twee even zware dingen, terwijl er
 * maar één hoofdactie is. Wie al klant is zoekt het inlogpunt toch wel; wie
 * dat niet is moet de demoknop als eerste zien.
 */
.site-nav__acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-m);
}

/*
 * Inloggen is een menu-item als alle andere en hoort er ook zo uit te zien:
 * zelfde grootte, zelfde gewicht, zelfde kleur, zelfde markering als je erop
 * staat. Alleen de indeling wijkt af, want deze link staat in de actiebalk
 * naast de demoknop en niet in de opsomming: dus geen volle breedte en geen
 * scheidslijn eronder.
 */
.site-nav__inlog {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--colour-base);
  text-decoration: none;
}

/* =========================================================================
   Het brede paneel

   Alle drie de uitklapmenu's zijn hetzelfde paneel: tegels met een tekening,
   en één uitgelicht blok ernaast. Op smal scherm is het een lijst binnen het
   uitklapmenu; op breed scherm een paneel over de volle breedte onder de
   kopbalk. Dezelfde markup, twee indelingen.

   Het aantal kolommen komt uit de gegevens en staat als `--mega-kolommen` op
   het paneel: negen thema's willen er drie, vier doelgroepen twee.
   ========================================================================= */

.mega__themas,
.mega__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * Op smal scherm staat alles onder elkaar en doet de kolomindeling er niet toe;
 * de koppen blijven wel staan, want die vertellen waar een groep over gaat.
 */
.mega__kolomkop {
  margin: var(--space-s) 0 var(--space-xs);
  max-width: none;
  font-size: 0.9375rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--colour-text-muted);
}

.mega__thema {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  min-height: 44px;
  text-decoration: none;
  color: var(--colour-ink);
}

/*
 * De tegel is een vlak achter de tekening, niet een rand eromheen: de
 * tekeningen zijn ontworpen zonder omlijsting, en een randje eromheen maakt er
 * alsnog iconen van.
 */
.mega__tegel {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  background-color: var(--colour-fond);
  border-radius: var(--radius);
  color: var(--colour-base);
}

.mega__tegel .tekening {
  width: 1.8125rem;
  height: 1.8125rem;
}

.mega__label {
  display: block;
  font-size: 0.90625rem;
  font-weight: 600;
  color: var(--colour-base);
}

.mega__thema:hover .mega__label,
.mega__thema:focus-visible .mega__label {
  text-decoration: underline;
}

/* Op smal scherm is de subregel weggelaten: daar telt de lengte van de lijst. */
.mega__sub {
  display: none;
}

.mega__uitgelicht {
  display: none;
}

.mega__alles {
  margin: var(--space-s) 0 0;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Op smal scherm is dit een aanraakdoel als elk ander menu-item. */
.mega__alles a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--colour-accent-strong);
}

@media (min-width: 62em) {
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .nav-toggle {
    display: none;
  }

  /*
   * Dezelfde selector als hierboven, maar op breed scherm staat het menu altijd
   * open. `flex` en niet `block`, anders valt de flex-indeling van de balk weg.
   */
  :root[data-js="on"] .site-nav:not([data-open]),
  .site-nav {
    display: flex;
    align-items: stretch;
    gap: var(--space-l);
    flex-basis: auto;
  }

  .site-nav__list {
    display: flex;
    align-items: stretch;
    gap: var(--space-l);
  }

  /*
   * De menu-items vullen de hoogte van de balkrij, met de knop erin gecentreerd
   * zoals hij stond. Dat scheelt een streepje van een paar beeldpunten tussen
   * de onderkant van de knop en het bruggetje verderop: precies daar zou de
   * muisaanwijzing anders alsnog even wegvallen. Vandaar ook `stretch` op de
   * balk zelf, een paar regels hierboven.
   */
  .site-nav__item {
    display: flex;
    align-items: center;
  }

  /* De twee acties blijven op hun plek staan, ook nu de rij hen uitrekt. */
  .site-nav__acties {
    align-items: center;
  }

  .site-nav__link {
    width: auto;
    padding: var(--space-xs) 0;
    border-bottom: 2px solid transparent;
  }

  .site-nav__link[aria-current="page"],
  .site-nav__link:hover,
  .site-nav__toggle.is-current {
    border-bottom-color: var(--colour-accent);
  }

  /* Een menu-item blijft op één regel; anders wordt de balk twee keer zo hoog. */
  .site-nav__link,
  .site-nav__inlog,
  .site-nav__partner {
    white-space: nowrap;
  }

  /*
   * Inloggen als knop in Leisteen, zoals de kopbalk in het merkblad: het is de
   * handeling waarvoor een bestaande gebruiker naar de site komt.
   */
  .site-nav__inlog {
    min-height: 2.5rem;
    padding: 0.375rem 1rem;
    color: #ffffff;
    background: var(--colour-base);
    border: 0;
    border-radius: var(--radius);
  }

  .site-nav__inlog:hover,
  .site-nav__inlog[aria-current="page"] {
    background: var(--colour-base-hover);
    box-shadow: inset 0 -2px 0 var(--colour-accent);
  }

  .site-nav__acties {
    margin-top: 0;
    flex-wrap: nowrap;
  }

  /*
   * Een paneel loopt over de volle breedte van de kopbalk en niet, zoals een
   * gewoon uitklapmenu, tot waar zijn inhoud eindigt. Tegels in twee of drie
   * kolommen naast een uitgelicht blok passen niet in de breedte van een
   * menu-item; boven de tekstbreedte uitgaan is hier het punt.
   *
   * Het paneel hangt daarom aan de kopbalk en niet aan het menu-item: `top:
   * 100%` van de kopbalk zet het er precies onder, en `left`/`right` op nul
   * laten het over de volle breedte lopen, buiten de binnenmarge van de
   * container om. Vandaar dat het menu-item zelf `position: static` is. De
   * kopbalk is `sticky` (zie boven) en daarmee al het kader voor het paneel.
   */
  .site-nav__item--group {
    position: static;
  }

  .site-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    display: none;
    grid-template-columns: 1fr 20.625rem;
    padding: 0;
    background: var(--colour-surface);
    border-top: 1px solid var(--colour-line);
    box-shadow: var(--shadow-menu);
  }

  .site-nav__item--group[data-open] > .site-nav__submenu {
    display: grid;
  }

  /*
   * Het bruggetje boven het paneel.
   *
   * Tussen de onderkant van de knop en de bovenkant van het paneel ligt de
   * onderste marge van de kopbalk: een strook van zo'n twintig beeldpunten die
   * bij niets hoort. Wie van de knop naar een tegel beweegt, verliest daar de
   * muisaanwijzing, en wie halverwege even stilhoudt ziet het paneel alsnog
   * dichtvallen. Deze onzichtbare strook hangt aan het paneel en vult die
   * ruimte op, zodat de weg naar beneden onafgebroken over het paneel loopt.
   *
   * Hij bestaat alleen zolang het paneel te zien is, en hij ligt onder de
   * inhoud van de kopbalk: op die hoogte staat niets meer waarop geklikt
   * wordt. Zijn hoogte is die marge plus één beeldpunt: de menu-items erboven
   * vullen de rest van de balk en het bruggetje schuift er één punt overheen,
   * zodat er geen haarlijn tussen overblijft waar de aanwijzing wegvalt.
   */
  .site-nav__submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(var(--space-m) + 1px);
  }

  /*
   * Zonder JavaScript openen aanwijzen en focus het paneel rechtstreeks. Draait
   * het script wel, dan zet dat `data-open` en houdt het paneel ook open
   * terwijl de muis de strook kopbalk tussen knop en paneel oversteekt.
   */
  :root:not([data-js="on"]) .site-nav__item--group:hover > .site-nav__submenu,
  :root:not([data-js="on"]) .site-nav__item--group:focus-within > .site-nav__submenu {
    display: grid;
  }

  /*
   * Twee indelingen voor de tegels. Zonder koppen is het één raster dat van
   * links naar rechts leest; met koppen is elke kolom een eigen stapeltje
   * onder zijn kop. Beide zijn even breed, zodat de panelen onderling niet
   * verspringen als de bezoeker van het ene naar het andere gaat.
   */
  .mega__themas,
  .mega__kolommen {
    display: grid;
    /*
     * Kolommen krimpen mee met de balk maar worden niet breder dan 24rem: een
     * paneel met twee kolommen zou anders twee tegels van een halve meter
     * krijgen, met de tekst verloren aan de linkerkant.
     */
    grid-template-columns: repeat(var(--mega-kolommen, 3), minmax(0, 24rem));
    align-content: start;
    gap: 0.5rem 1.625rem;
    padding: 1.875rem 2.25rem;
  }

  .mega__lijst {
    display: grid;
    align-content: start;
    gap: 0.5rem;
  }

  .mega__kolomkop {
    margin: 0 0 var(--space-xs);
    padding: 0 0.625rem var(--space-xs);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--colour-line);
  }

  .mega__thema {
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.625rem;
    border-radius: var(--radius);
  }

  .mega__thema:hover,
  .mega__thema:focus-visible {
    background-color: var(--colour-fond);
  }

  /* De pagina waar de bezoeker al is, blijft aangewezen staan. */
  .mega__thema[aria-current="page"] {
    background-color: var(--colour-fond);
  }

  .mega__tegel {
    width: 2.875rem;
    height: 2.875rem;
  }

  .mega__tegel .tekening {
    width: 2.25rem;
    height: 2.25rem;
  }

  .mega__label {
    font-size: 0.875rem;
    font-weight: 700;
  }

  .mega__sub {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--colour-text-muted);
  }

  .mega__uitgelicht {
    /* Over alle rijen, anders houdt het fondvlak op waar de tegels ophouden. */
    grid-row: 1 / -1;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.75rem;
    background-color: var(--colour-fond);
    border-left: 1px solid var(--colour-line);
  }

  .mega__kicker {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--colour-text-muted);
  }

  .mega__beeld {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6.875rem;
    background: var(--colour-surface);
    border: 1px solid var(--colour-line);
    border-radius: var(--radius);
    color: var(--colour-base);
  }

  .mega__beeld .tekening {
    width: 4.5rem;
    height: 4.5rem;
  }

  .mega__titel {
    margin: 0;
    font-size: 0.90625rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--colour-base);
  }

  .mega__lees {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--colour-accent-strong);
    text-decoration: none;
  }

  .mega__lees:hover,
  .mega__lees:focus-visible {
    text-decoration: underline;
  }

  .mega__alles {
    grid-column: 1;
    margin: 0;
    padding: 0 2.25rem 1.25rem;
  }

  /* Met een muis is de regel zelf groot genoeg; het aanraakdoel mag hier weg. */
  .mega__alles a {
    min-height: 0;
  }

  /*
   * Het geopende item wijst zichzelf aan: vet, een okerkleurige onderrand en
   * een chevron die omhoog wijst. Zonder dat laatste blijft de pijl naar
   * beneden wijzen terwijl het paneel al openstaat.
   */
  .site-nav__item--group[data-open] > .site-nav__toggle,
  .site-nav__item--group:hover > .site-nav__toggle,
  .site-nav__item--group:focus-within > .site-nav__toggle {
    font-weight: 700;
    border-bottom-color: var(--colour-accent);
  }

  .site-nav__item--group[data-open] > .site-nav__toggle .site-nav__chevron,
  .site-nav__item--group:hover > .site-nav__toggle .site-nav__chevron,
  .site-nav__item--group:focus-within > .site-nav__toggle .site-nav__chevron {
    transform: rotate(180deg);
  }
}

/* -------------------------------------------------------------------------
   Secties
   ------------------------------------------------------------------------- */

.hero {
  padding-block: var(--space-xl) var(--space-l);
}

.hero__intro {
  font-size: 1.25rem;
  color: var(--colour-text-muted);
  max-width: var(--width-prose);
}

/*
 * Hero met beeld. Op een smal scherm staat de foto boven de tekst en blijft de
 * tekst gewoon op wit staan: een donker vlak over een kleine foto laat er niets
 * van over. Pas op een breed scherm komt de tekst over het beeld te liggen.
 */
.hero--beeld {
  position: relative;
  padding-top: 0;
}

.hero__beeld {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--space-l);
}

@media (min-width: 62em) {
  .hero--beeld {
    display: grid;
    align-items: center;
    min-height: 30rem;
    overflow: hidden;
    padding-block: var(--space-xl);
  }

  .hero--beeld .hero__beeld {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-bottom: 0;
  }

  /*
   * Een verloop in de basiskleur, links vrijwel dekkend en naar rechts weg.
   * Daardoor haalt witte tekst altijd ruim AA, welke foto er ook onder ligt —
   * bij een foto alleen kun je dat niet garanderen.
   */
  .hero--beeld::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgb(36 66 92 / 94%) 0%,
      rgb(36 66 92 / 88%) 32%,
      rgb(36 66 92 / 0%) 64%
    );
  }

  .hero--beeld .hero__inner {
    position: relative;
    z-index: 1;
  }

  .hero--beeld h1 {
    color: var(--colour-surface);
  }

  .hero--beeld .hero__intro {
    color: rgb(255 255 255 / 88%);
  }

  /* De omlijnde knop is standaard donker en zou op het beeld wegvallen. */
  .hero--beeld .button--outline {
    border-color: rgb(255 255 255 / 70%);
    color: var(--colour-surface);
  }

  .hero--beeld .button--outline:hover {
    background-color: rgb(255 255 255 / 12%);
    color: var(--colour-surface);
  }

  .hero--beeld :focus-visible {
    outline-color: var(--colour-surface);
  }
}

.section {
  padding-block: var(--space-xl);
}

.section--soft {
  background-color: var(--colour-fond);
  /*
   * #5C7488 haalt op dit lichtblauwe vlak net geen AA (4,2:1). Binnen deze
   * secties daarom een fractie donkerder, wat op 4,9:1 uitkomt.
   */
  --colour-text-muted: #4f6478;
}

.section__intro {
  font-size: 1.125rem;
  color: var(--colour-text-muted);
}

.prose > :last-child {
  margin-bottom: 0;
}

.plain-list,
.plain-links {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--width-prose);
}

.plain-list li {
  padding-left: var(--space-m);
  margin-bottom: var(--space-s);
  position: relative;
}

.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--colour-accent);
}

.plain-links li {
  border-bottom: 1px solid var(--colour-line);
}

.plain-links a {
  display: block;
  padding: var(--space-s) 0;
  font-weight: 700;
}

/*
 * Het adres van de agendafeed. Vaste letterbreedte, want dit is een adres dat
 * iemand overtikt: dan moet een 1 van een l te onderscheiden zijn.
 */
.feed-adres {
  display: block;
  max-width: var(--width-prose);
  margin: var(--space-m) 0;
  padding: var(--space-s) var(--space-m);
  background-color: var(--colour-warm);
  border: 1px solid var(--colour-warm-line);
  border-radius: var(--radius);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.95rem;
  /* Een adres past niet op één regel op een telefoon en mag overal breken. */
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   Uitspraken uit de praktijk
   ------------------------------------------------------------------------- */

.statements {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 48rem;
  border-top: 1px solid var(--colour-line);
}

.statements__item {
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--colour-line);
  font-size: 1.25rem;
  color: var(--colour-text-muted);
}

/* -------------------------------------------------------------------------
   Doorverwijsblokken — maximaal drie naast elkaar
   ------------------------------------------------------------------------- */

.link-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-l) var(--space-xl);
}

.link-card h3 {
  margin-bottom: var(--space-xs);
}

.link-card p {
  color: var(--colour-text-muted);
  margin-bottom: 0;
}

@media (min-width: 40em) {
  .link-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  .link-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------------------------------------------------------
   Films: een speler met titel en duur, twee naast elkaar vanaf tabletbreedte
   ------------------------------------------------------------------------- */

.films {
  display: grid;
  gap: var(--space-l) var(--space-xl);
}

.prose + .films {
  margin-top: var(--space-l);
}

.films + .productgroepen {
  margin-top: var(--space-xl);
}

.film {
  margin: 0;
}

.film__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  background: #1c2830;
}

.film__onderschrift {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: var(--space-xs);
}

.film__titel {
  font-weight: 600;
}

.film__duur {
  color: var(--colour-text-muted);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 40em) {
  .films {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -------------------------------------------------------------------------
   Proces als tijdlijn
   ------------------------------------------------------------------------- */

.process {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: stap;
  display: grid;
  gap: var(--space-l);
}

/*
 * Elke stap is een omlijnde kaart met een genummerde cirkel. De laatste stap
 * krijgt de Oker-cirkel: daar komt het platform aan zet, de rest is aan u.
 */
.process__step {
  counter-increment: stap;
  padding: 1.625rem 1.5rem;
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
}

.process__step::before {
  content: counter(stap);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--colour-base);
  color: var(--colour-surface);
  font-size: 1rem;
  font-weight: 800;
}

.process__step:last-child::before {
  background-color: var(--colour-accent);
  color: var(--colour-ink);
}

.process__step h3 {
  margin: 0.875rem 0 0.375rem;
  font-size: 1.0625rem;
}

.process__step p {
  color: var(--colour-text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 0;
}

@media (min-width: 62em) {
  .process {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-m);
  }
}

/* -------------------------------------------------------------------------
   Veelgestelde vragen
   ------------------------------------------------------------------------- */

.faq {
  max-width: 48rem;
  border-top: 1px solid var(--colour-line);
}

.faq__item {
  border-bottom: 1px solid var(--colour-line);
}

.faq__item summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--space-m);
  font-weight: 700;
  cursor: pointer;
}

.faq__item p {
  color: var(--colour-text-muted);
  padding-bottom: var(--space-m);
}

/* -------------------------------------------------------------------------
   Afsluitende blokken
   ------------------------------------------------------------------------- */

.related {
  padding-block: var(--space-l);
  border-top: 1px solid var(--colour-line);
}

.related h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--colour-text-muted);
  margin-bottom: var(--space-s);
}

.related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m) var(--space-xl);
}

.related__list a {
  font-weight: 700;
}

/*
 * De CTA-strook: tekst links, één knop rechts, op Fond tussen twee haarlijnen.
 * Op een smal scherm komt de knop onder de tekst.
 */
.cta {
  background-color: var(--colour-fond);
  border-top: 1px solid var(--colour-line);
  border-bottom: 1px solid var(--colour-line);
  padding-block: 2.5rem;
}

.cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.cta h2 {
  font-size: 1.375rem;
  margin-bottom: 0.3125rem;
}

.cta p {
  max-width: var(--width-prose);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--colour-text-muted);
}

.cta .button {
  flex: none;
  padding: 0.8125rem 1.625rem;
}

@media (min-width: 48em) {
  .cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-l);
  }
}

/* -------------------------------------------------------------------------
   Voettekst
   ------------------------------------------------------------------------- */

/*
 * De voettekst staat op Inkt. Wit voor het woordmerk en de kopjes, een
 * gedempt blauwgrijs (5,3:1 op Inkt) voor de links en bijschriften.
 */
.site-footer {
  padding-block: var(--space-l) var(--space-l);
  background-color: var(--colour-ink);
  color: var(--colour-on-ink-muted);
  font-size: 0.8125rem;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--colour-surface);
  text-decoration: underline;
}

.site-footer :focus-visible {
  outline-color: var(--colour-accent);
}

.site-footer__merk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
  padding-bottom: var(--space-l);
  border-bottom: 1px solid rgb(220 232 242 / 15%);
}

.site-footer__woordmerk {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--colour-surface);
}

.site-footer__woordmerk span {
  color: var(--colour-accent);
}

.site-footer__tagline {
  margin: 0;
  max-width: none;
}

.site-footer__columns {
  display: grid;
  gap: var(--space-l);
  padding-top: var(--space-l);
}

.site-footer__column h2 {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--colour-surface);
  margin-bottom: var(--space-s);
}

.site-footer__column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__column li {
  margin-bottom: var(--space-xs);
}

.site-footer__column a {
  display: inline-block;
  padding-block: 0.35rem;
}

.site-footer__contact {
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid rgb(220 232 242 / 15%);
}

.site-footer__contact strong {
  color: var(--colour-surface);
}

.site-footer__notice {
  max-width: 40rem;
}

.site-footer__legal {
  margin: 0;
}

.site-footer__fotocredit {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
}

@media (min-width: 40em) {
  .site-footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  .site-footer__columns {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
  }

  .site-footer__contact {
    display: flex;
    gap: var(--space-xl);
    justify-content: space-between;
  }
}

/* -------------------------------------------------------------------------
   Beweging beperken wanneer de bezoeker daarom vraagt
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------------------
   Jaarkalender
   Periode links, wat er gebeurt rechts, met een doorlopende lijn ertussen.
   Op smalle schermen komt de periode boven de tekst te staan.
   ------------------------------------------------------------------------- */

.jaarkalender {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 52rem;
}

.jaarkalender__moment {
  position: relative;
  padding: 0 0 var(--space-l) var(--space-l);
  border-left: 2px solid var(--colour-line);
}

.jaarkalender__moment:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.jaarkalender__moment::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0.45em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--colour-accent-strong);
  border: 2px solid var(--colour-surface);
}

.jaarkalender__moment[data-bron="gemeente"]::before {
  background-color: var(--colour-base);
}

.jaarkalender__periode {
  margin: 0 0 var(--space-xs);
  font-weight: 700;
  color: var(--colour-text-muted);
}

.jaarkalender__inhoud h3 {
  margin-bottom: var(--space-xs);
}

.jaarkalender__inhoud p {
  margin-bottom: 0;
  color: var(--colour-text-muted);
}

.jaarkalender__herkomst {
  margin-top: var(--space-xs);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--colour-base);
}

@media (min-width: 48em) {
  .jaarkalender__moment {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: var(--space-l);
  }

  .jaarkalender__periode {
    margin-bottom: 0;
    text-align: right;
  }
}

/* Uitgelichte slotzin; iets groter, zonder een kop te worden. */
.lead-out {
  font-size: 1.375rem;
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Tegels op de naad tussen hero en inhoud

   Op een smal scherm staan ze gewoon onder elkaar onder de hero. Pas op een
   breed scherm schuiven ze over de onderrand van het beeld heen. Ze hebben een
   dekkende achtergrond, zodat de tekst nooit op de foto komt te liggen.
   ------------------------------------------------------------------------- */

.visueel-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tegels {
  padding-block: var(--space-l) 0;
}

.tegels__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-m);
}

.tegel {
  padding: 1.25rem;
  background-color: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Het icoon op een Lucht-tegel van 44 bij 44, in Leisteen. */
.tegel__icoon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-card);
  background-color: var(--colour-soft);
  color: var(--colour-base);
}

.tegel h3 {
  margin: 0.75rem 0 0.3125rem;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.tegel p {
  margin-bottom: 0;
  max-width: none;
  color: var(--colour-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

@media (min-width: 40em) {
  .tegels__lijst {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  /*
   * De hero krijgt extra ruimte onderin, zodat de knoppen niet achter de
   * tegels verdwijnen als de tegels eroverheen schuiven.
   */
  .hero--beeld {
    padding-bottom: 7rem;
  }

  .tegels {
    position: relative;
    z-index: 2;
    margin-top: -5.5rem;
    padding-block: 0 var(--space-l);
  }

  /* Na de heroband van de startpagina schuiven de tegels 52px omhoog. */
  .hero--band + .tegels {
    margin-top: -3.25rem;
  }

  .tegels__lijst {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-m);
  }
}

/* Iconen: één set, lijnstijl, neemt de tekstkleur van de omgeving over. */
.icoon {
  display: block;
  color: var(--colour-base);
}

.tegel__icoon .icoon {
  color: inherit;
}

/* -------------------------------------------------------------------------
   Ingangen op de startpagina

   Drie kaarten, één per groep, die net als de tegels op de naad onder de
   heroband liggen. De tekening staat op hetzelfde Fond-vlak als in het menu
   "Voor wie", zodat de bezoeker de profielen daar terugkent.
   ------------------------------------------------------------------------- */

.ingangen {
  padding-block: var(--space-l) 0;
}

.ingangen__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-m);
}

.ingang {
  padding: 1.5rem;
  background-color: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.ingang h3 {
  margin: 0 0 0.3125rem;
  font-size: 1.125rem;
}

.ingang > p {
  margin: 0 0 var(--space-s);
  max-width: none;
  color: var(--colour-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.ingang__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ingang__link {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-xs) 0;
  min-height: 44px;
  text-decoration: none;
  color: var(--colour-ink);
}

.ingang__tegel {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--colour-fond);
  border-radius: var(--radius);
  color: var(--colour-base);
}

.ingang__tegel .tekening {
  width: 2.125rem;
  height: 2.125rem;
}

.ingang__tekst {
  display: flex;
  flex-direction: column;
}

.ingang__label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--colour-base);
}

.ingang__sub {
  font-size: 0.8125rem;
  color: var(--colour-text-muted);
}

.ingang__link:hover .ingang__label,
.ingang__link:focus-visible .ingang__label {
  text-decoration: underline;
}

@media (min-width: 62em) {
  .ingangen__lijst {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Op de naad onder de heroband, zoals de tegels in het ontwerp. */
  .hero--band + .ingangen {
    position: relative;
    z-index: 2;
    margin-top: -3.25rem;
    padding-top: 0;
  }
}

/* -------------------------------------------------------------------------
   Drie kolommen die samen één redenering vormen

   Onder elkaar op een smal scherm, naast elkaar zodra er ruimte is. De kolom
   met nadruk draagt het antwoord; die krijgt het lichtblauwe vlak, zodat de
   rij leest als probleem, probleem, antwoord.
   ------------------------------------------------------------------------- */

.kolommen {
  padding-block: var(--space-xl);
}

.kolommen__lijst {
  display: grid;
  gap: var(--space-l);
  align-items: start;
}

.kolom h2 {
  font-size: 1.375rem;
  margin-bottom: var(--space-s);
}

.kolom p {
  max-width: none;
  color: var(--colour-text-muted);
}

.kolom > :last-child {
  margin-bottom: 0;
}

.kolom .statements {
  max-width: none;
  border-top: 0;
}

.kolom .statements__item {
  font-size: 1.0625rem;
  padding-block: var(--space-s);
}

.kolom .statements__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.kolom--nadruk {
  background-color: var(--colour-soft);
  border-radius: var(--radius);
  padding: var(--space-l);
  /* Zie de toelichting bij .section--soft: #5C7488 haalt hier geen AA. */
  --colour-text-muted: #4f6478;
}

@media (min-width: 62em) {
  .kolommen__lijst {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }

  /* De kolom met het vlak steekt iets uit, zodat de drie optisch uitlijnen. */
  .kolom--nadruk {
    margin-top: calc(var(--space-l) * -1);
  }
}

.link-card .icoon {
  margin-bottom: var(--space-s);
}

/* -------------------------------------------------------------------------
   Beeldband binnen een sectie
   Een lage, brede uitsnede. Vaste verhouding, zodat de pagina niet verspringt
   terwijl het beeld nog laadt.
   ------------------------------------------------------------------------- */

.beeld-band {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: var(--space-xl);
}

/* -------------------------------------------------------------------------
   Doorverwijskaarten
   Witte kaarten op het zachte vlak, met het icoon in een gekleurde cirkel.
   De hele kaart is klikbaar, maar er staat één link in de leesvolgorde.
   ------------------------------------------------------------------------- */

.link-card {
  position: relative;
  padding: var(--space-l);
  background-color: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.link-card:hover {
  border-color: var(--colour-base);
  box-shadow: 0 6px 18px rgb(36 66 92 / 10%);
}

/* Strekt de link over de hele kaart, zonder een tweede link toe te voegen. */
.link-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.link-card h3 a {
  text-decoration-thickness: 2px;
}

.link-card__icoon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-m);
  border-radius: 50%;
  background-color: var(--colour-soft);
}

.link-card .icoon {
  margin-bottom: 0;
}

/* De focusring hoort om de hele kaart, niet alleen om de kop. */
.link-card:focus-within {
  border-color: var(--colour-accent-strong);
  box-shadow: 0 0 0 3px var(--colour-accent-strong);
}

.link-card h3 a:focus-visible {
  outline: none;
}

/* -------------------------------------------------------------------------
   Inlogformulier
   Twee velden onder elkaar met ruime hulptekst. Het KvK-nummer bepaalt welk
   dossier, het e-mailadres wie u bent; die twee horen visueel gelijkwaardig,
   zodat niemand het nummer voor een wachtwoord aanziet.
   ------------------------------------------------------------------------- */

/* Het formulier is één witte kaart, zoals de kaarten op het merkblad. */
.inlog {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-width: var(--width-prose);
  padding: 1.75rem 1.5rem;
  background-color: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.inlog__veld {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.inlog label {
  font-size: 0.9375rem;
  font-weight: 700;
}

.inlog input {
  min-height: 44px;
  padding: 0.6875rem 0.875rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--colour-ink);
  background-color: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius);
}

.inlog input:hover {
  border-color: var(--colour-slate-60);
}

.inlog input:focus-visible {
  outline: 2px solid var(--colour-base);
  outline-offset: 1px;
  border-color: var(--colour-base);
}

.inlog input:disabled {
  background-color: var(--colour-fond);
  color: var(--colour-text-muted);
}

.inlog__hulp {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--colour-text-muted);
}

/* Onder het formulier van de kerk: de weg naar de partneringang. */
.inlog__elders {
  max-width: var(--width-prose);
  margin: var(--space-m) 0 0;
  font-size: 0.9375rem;
  color: var(--colour-text-muted);
}

/*
 * Een melding aan de bezoeker: een kaartje op Fond met een Leisteen-rand
 * links. Op het inlogscherm staat hij na de velden en
 * vóór de knop, zodat een schermlezer hem tegenkomt vóór de bezoeker opnieuw
 * op verzenden drukt.
 */
.melding {
  margin: 0;
  padding: 0.75rem 0.875rem;
  max-width: var(--width-prose);
  font-size: 0.9375rem;
  line-height: 1.5;
  background-color: var(--colour-fond);
  border: 1px solid var(--colour-line);
  border-left: 4px solid var(--colour-base);
  border-radius: var(--radius);
}

.inlog .button {
  align-self: flex-start;
}

/* Badge: pilvorm, 600/12px, altijd tekst en vlak uit hetzelfde paar. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--colour-base);
  background-color: var(--colour-soft);
}

.badge--ok {
  color: var(--status-ok-text);
  background-color: var(--status-ok-bg);
}

.badge--aandacht {
  color: var(--status-aandacht-text);
  background-color: var(--status-aandacht-bg);
}

.badge--verlopen {
  color: var(--status-verlopen-text);
  background-color: var(--status-verlopen-bg);
}

/* -------------------------------------------------------------------------
   Zoekresultaten bij het inloggen
   Een lijst onder het zoekveld. Geen zwevend menu: op een telefoon dekt zo'n
   menu het toetsenbord af, en in het formulier eronder schuift gewoon alles
   een stukje op.
   ------------------------------------------------------------------------- */

.zoekresultaten {
  margin: var(--space-xs) 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  background-color: var(--colour-surface);
  overflow: hidden;
}

.zoekresultaat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-top: 1px solid var(--colour-line);
}

.zoekresultaat:first-child {
  border-top: 0;
}

/* Aanwijzen met de muis en aanwijzen met de pijltjestoetsen zien er gelijk uit. */
.zoekresultaat:hover {
  background-color: var(--colour-fond);
}

.zoekresultaat.is-actief {
  background-color: var(--colour-soft);
}

.zoekresultaat__naam {
  font-size: 0.9375rem;
  font-weight: 700;
}

.zoekresultaat__meta {
  font-size: 0.8125rem;
  color: var(--colour-text-muted);
}

.inlog__telling {
  margin: var(--space-xs) 0 0;
  font-size: 0.875rem;
  color: var(--colour-text-muted);
}

/*
 * Wat er gekozen is, blijft in beeld terwijl het e-mailadres wordt ingevuld:
 * een kaartje met een Oker-rand links, want dit is het moment om te
 * controleren of het de juiste kerk is.
 */
.inlog__gekozen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-m);
  padding: 0.75rem 0.875rem;
  background-color: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-left: 4px solid var(--colour-accent-strong);
  border-radius: var(--radius);
}

.inlog__gekozen-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--colour-text-muted);
  flex-basis: 100%;
}

.inlog__gekozen-naam {
  margin: 0;
  max-width: none;
  font-size: 0.9375rem;
  font-weight: 700;
}

/*
 * Het vinkje dat de gekozen kerk onthoudt.
 *
 * Het hokje staat in het label en niet ernaast, zodat de hele regel aantikbaar
 * is: op een telefoon mikt een duim niet op achttien pixels. Het hokje houdt
 * zijn eigen maat — `.inlog input` maakt velden 44px hoog, goed voor een
 * tekstveld maar niet voor een aankruishokje — en de regel eromheen is wél
 * 44px hoog, de maat die een vinger nodig heeft.
 */
.inlog__onthoud-regel {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  cursor: pointer;
}

.inlog__onthoud-regel input {
  width: 1.125rem;
  height: 1.125rem;
  min-height: 0;
  flex: none;
  padding: 0;
  accent-color: var(--colour-base);
  cursor: pointer;
}

/* De uitleg lijnt uit met de tekst van het label, niet met het hokje. */
.inlog__onthoud .inlog__hulp {
  margin-left: calc(1.125rem + 0.625rem);
}

/* Tekstlink zoals op het merkblad: Leisteen met een Oker-streep eronder. */
.inlog__wijzig {
  padding: 0 0 2px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--colour-base);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--colour-accent-strong);
  cursor: pointer;
}

.inlog__wijzig:hover {
  border-bottom-color: var(--colour-base);
}

/* -------------------------------------------------------------------------
   Lijstwerk
   Dezelfde doorverwijzingen als de kaarten hierboven, maar zonder vlak: drie
   kolommen met haarlijnen, als een inhoudsopgave. Bedoeld voor de negen
   platformonderdelen; negen omlijnde vlakken naast elkaar vragen alle evenveel
   aandacht, waardoor het oog geen ingang vindt.
   ------------------------------------------------------------------------- */

.link-lijst {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--space-xl);
  row-gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-lijst__item {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  column-gap: var(--space-s);
  align-items: start;
  padding: var(--space-m) 0;
  border-top: 1px solid var(--colour-line);
}

.section--warm .link-lijst__item {
  border-top-color: var(--colour-warm-line);
}

/*
 * De bovenste rij krijgt een zwaardere lijn: die markeert de kop van de
 * opsomming. Welke items dat zijn hangt af van het aantal kolommen, dus de
 * regel staat per breekpunt opnieuw.
 */
.link-lijst__item:first-child {
  border-top: 2px solid var(--colour-base);
}

/*
 * De icoonkolom staat er altijd, ook als er geen icoon is. Anders schuift de
 * tekst in de smalle eerste kolom zodra een item zonder icoon wordt gebruikt.
 */
.link-lijst__icoon {
  display: block;
  color: var(--colour-accent-strong);
}

.link-lijst__icoon .icoon {
  margin-top: 0.3rem;
  margin-bottom: 0;
}

.link-lijst__tekst {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.link-lijst__item h3 {
  margin: 0;
  font-size: 1.0625rem;
}

.link-lijst__item h3 a {
  color: inherit;
  text-decoration: none;
}

/* Onderstrepen bij aanwijzen én bij toetsenbordfocus, niet alleen bij de muis. */
.link-lijst__item:hover h3 a,
.link-lijst__item h3 a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.link-lijst__item p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--colour-text-muted);
}

@media (min-width: 40em) {
  .link-lijst {
    grid-template-columns: repeat(2, 1fr);
  }

  .link-lijst__item:nth-child(-n + 2) {
    border-top: 2px solid var(--colour-base);
  }
}

@media (min-width: 60em) {
  .link-lijst {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Bij drie kolommen zijn het de eerste drie die de kop vormen. */
  .link-lijst__item:nth-child(-n + 3) {
    border-top: 2px solid var(--colour-base);
  }
}

/* -------------------------------------------------------------------------
   Warme sectie
   Gebroken wit in plaats van het koele lichtblauw. De secundaire tekstkleur
   gaat een stap donkerder mee: #5C7488 komt op dit vlak op 4,6:1 uit, en dat
   is te krap om op te vertrouwen.
   ------------------------------------------------------------------------- */

.section--warm {
  background-color: var(--colour-warm);
  --colour-text-muted: #4f6478;
}

/* Compactere, warmere doorverwijskaarten binnen zo'n sectie. */
.section--warm .link-cards {
  gap: var(--space-m);
}

.section--warm .link-card {
  padding: var(--space-m);
  border-color: var(--colour-warm-line);
}

.section--warm .link-card h3 {
  font-size: 1.125rem;
  margin-bottom: var(--space-xs);
}

.section--warm .link-card__icoon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-s);
  background-color: var(--colour-warm-tint);
}

.section--warm .link-card:hover {
  border-color: var(--colour-base);
  box-shadow: 0 4px 14px rgb(36 66 92 / 8%);
}

/* -------------------------------------------------------------------------
   Duoblok: tekst en beeld naast elkaar

   Op een smal scherm onder elkaar, tekst eerst. De donkere variant geeft de
   pagina een rustpunt tussen de lichte blokken; wit op de basiskleur haalt
   10,7:1, dus daar is geen twijfel over de leesbaarheid.
   ------------------------------------------------------------------------- */

.duo {
  padding-block: var(--space-xl);
}

.duo__inner {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

.duo__afbeelding {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.duo--donker {
  background-color: var(--colour-base);
  color: var(--colour-surface);
}

.duo--donker h2 {
  color: var(--colour-surface);
}

.duo--donker p {
  color: rgb(255 255 255 / 86%);
}

.duo--donker a:not(.button) {
  color: var(--colour-surface);
}

.duo--donker :focus-visible {
  outline-color: var(--colour-surface);
}

/* Het schermbeeld krijgt een lichte rand, zodat het niet in het vlak wegvalt. */
.duo--donker .duo__afbeelding {
  border: 1px solid rgb(255 255 255 / 25%);
  box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
}

@media (min-width: 62em) {
  .duo__inner {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-xxl);
  }
}

/* -------------------------------------------------------------------------
   Wat wij wel en niet doen
   ------------------------------------------------------------------------- */

.wel-niet {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-l);
}

.wel-niet__kolom {
  padding: var(--space-l);
  background-color: var(--colour-surface);
  border: 1px solid var(--colour-warm-line);
  border-radius: var(--radius);
}

.wel-niet__kolom h3 {
  margin-bottom: var(--space-m);
}

.wel-niet__kolom ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wel-niet__kolom li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--space-s);
}

.wel-niet__kolom li:last-child {
  margin-bottom: 0;
}

/* Vinkje en kruisje als vorm, niet als kleur: ook zonder kleurzicht duidelijk. */
.wel-niet__kolom--wel li::before,
.wel-niet__kolom--niet li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
}

.wel-niet__kolom--wel li::before {
  content: "\2713";
  color: #1f6b2c;
}

.wel-niet__kolom--niet li::before {
  content: "\00D7";
  color: #8a2b12;
  font-size: 1.25em;
  line-height: 1.1;
}

@media (min-width: 48em) {
  .wel-niet {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -------------------------------------------------------------------------
   Kaarten met beeld
   ------------------------------------------------------------------------- */

.beeld-kaarten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-m);
}

.beeld-kaart {
  position: relative;
  overflow: hidden;
  background-color: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.beeld-kaart:hover {
  border-color: var(--colour-base);
  box-shadow: 0 6px 18px rgb(36 66 92 / 12%);
}

.beeld-kaart:focus-within {
  border-color: var(--colour-accent-strong);
  box-shadow: 0 0 0 3px var(--colour-accent-strong);
}

.beeld-kaart__afbeelding {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.beeld-kaart__tekst {
  padding: var(--space-m);
}

.beeld-kaart h3 {
  font-size: 1.125rem;
  margin-bottom: var(--space-xs);
}

.beeld-kaart h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.beeld-kaart h3 a:focus-visible {
  outline: none;
}

.beeld-kaart p {
  margin-bottom: 0;
  max-width: none;
  color: var(--colour-text-muted);
  font-size: 1rem;
}

@media (min-width: 40em) {
  .beeld-kaarten {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  .beeld-kaarten {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-l);
  }
}

/* -------------------------------------------------------------------------
   Het dossier
   De lijst met organisaties waar de ingelogde bezoeker bij mag. Dezelfde
   vorm als een zoekresultaat, zodat wat u koos bij het inloggen er hier
   hetzelfde uitziet.
   ------------------------------------------------------------------------- */

.dossier {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-width: 48rem;
}

/* Wie er is ingelogd links, de uitlogknop rechts. */
.dossier__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-m);
}

.dossier__wie {
  margin: 0;
  max-width: none;
  font-size: 0.9375rem;
  color: var(--colour-text-muted);
}

.dossier__wie strong {
  color: var(--colour-ink);
}

/* De lijst als tabelkaart van het merkblad: rand, 8px radius, haarlijnen. */
.dossier__lijst {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  background-color: var(--colour-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.dossier__organisatie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--colour-line);
}

.dossier__organisatie:first-child {
  border-top: 0;
}

.dossier__naam {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 700;
}

.dossier__meta {
  flex-basis: 100%;
  font-size: 0.8125rem;
  color: var(--colour-text-muted);
}

/* =========================================================================
   De kennisthema's, op /kennis/ en onder aan elke modulepagina

   Een tegel met tekening, een korte inleiding en de artikelen die er zijn.
   ========================================================================= */

.themas {
  display: grid;
  gap: var(--space-l);
}

.thema {
  display: flex;
  gap: var(--space-m);
  /*
   * Een beetje lucht boven het anker, bovenop de hoogte van de vaste kopbalk
   * (`scroll-padding-top` op html), zodat de kop niet tegen de balk aan plakt.
   */
  scroll-margin-top: var(--space-m);
}

.thema__tegel {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--colour-fond);
  border-radius: var(--radius);
  color: var(--colour-base);
}

.thema__tegel .tekening {
  width: 2.75rem;
  height: 2.75rem;
}

.thema__kop {
  margin: 0;
  font-size: 1.0625rem;
}

.thema__sub {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--colour-text-muted);
}

.thema__inleiding {
  margin: var(--space-xs) 0 0;
  max-width: var(--width-prose);
}

.thema__artikelen {
  margin: var(--space-s) 0 0;
  padding-left: 1.125rem;
}

.thema__verder {
  margin: var(--space-s) 0 0;
  font-size: 0.9375rem;
  color: var(--colour-text-muted);
}

@media (min-width: 48em) {
  .themas {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l) var(--space-xl);
  }
}

/* Op /kennis/: de thema's per module, met de module als kop erboven. */
.kennis-modules {
  display: grid;
  gap: var(--space-xl);
}

.kennis-module__kop {
  margin: 0 0 var(--space-m);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--colour-line);
  font-size: 1.25rem;
}

.kennis-module__kop a {
  color: inherit;
}

/*
 * De balk die zegt dat u meekijkt als beheerder.
 *
 * Bewust in het okerkleurige accent en niet in de rustige meldingsstijl: dit
 * is geen mededeling maar een waarschuwing. Wie andermans dossier openheeft
 * moet dat op elk moment kunnen zien, ook op een schermafbeelding die later
 * in een gesprek opduikt. Boven de melding en boven de lijst, zodat hij niet
 * onder een lange lijst wegzakt.
 */
.beheerbalk {
  margin: 0 0 var(--space-m);
  padding: 0.75rem 0.875rem;
  max-width: var(--width-prose);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--colour-ink);
  background-color: #fdf4e4;
  border: 1px solid var(--colour-accent);
  border-left: 4px solid var(--colour-accent-strong);
  border-radius: var(--radius);
}

/* =========================================================================
   Startpagina — de blokken uit het ontwerp (artboard 6a)

   Maten staan hier in rem met de pixelwaarde uit het ontwerp als basis
   (16px = 1rem), zodat ze meeschalen met de tekstgrootte van de bezoeker.
   ========================================================================= */

/* Heroband: Leisteen, tekst links, foto rechts of foto als achtergrond, een
   cirkelring als decoratie. */
.hero--band {
  position: relative;
  overflow: hidden;
  padding: 0;
  background-color: var(--colour-base);
  color: var(--colour-surface);
}

.hero--band::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  border: 60px solid rgb(220 232 242 / 7%);
  pointer-events: none;
}

.hero--band .hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-l);
  align-items: center;
  padding-block: 2.5rem 5rem;
}

.hero--band h1 {
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
  line-height: 1.15;
  color: var(--colour-surface);
}

.hero--band .hero__intro {
  margin: 1rem 0 0;
  max-width: 460px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--colour-on-dark-muted);
}

.hero--band .actions {
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.625rem;
}

/* De tweede actie in de hero is een tekstlink met een Oker-streep eronder. */
.hero__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--colour-surface);
  text-decoration: none;
  border-bottom: 2px solid var(--colour-accent);
}

.hero__link:hover {
  color: var(--colour-surface);
  border-bottom-color: var(--colour-surface);
}

.hero--band :focus-visible {
  outline-color: var(--colour-accent);
}

.hero__foto {
  height: 300px;
  border-radius: var(--radius-photo);
  overflow: hidden;
  box-shadow: var(--shadow-photo);
}

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

/* Achtergrondfoto over de volle band (startpagina). Een Leisteen-verloop van
   links houdt de tekst leesbaar; rechts blijft de foto goed zichtbaar. De
   cirkelring (::before) en de inhoud liggen erboven. */
.hero__achtergrond {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__achtergrond .hero__beeld {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: right 22%;
}

/* Op een smal scherm staat de tekst over de hele foto: gelijkmatig donkerder. */
.hero__achtergrond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(36 66 92 / 78%);
}

.hero--achtergrond::before,
.hero--achtergrond .hero__inner {
  z-index: 1;
}

@media (min-width: 62em) {
  .hero__achtergrond::after {
    background: linear-gradient(
      to right,
      var(--colour-base) 0%,
      rgb(36 66 92 / 85%) 28%,
      rgb(36 66 92 / 30%) 55%,
      rgb(36 66 92 / 0%) 80%
    );
  }

  .hero--achtergrond .hero__inner {
    min-height: 32rem;
  }

  /* Op de modulepagina's: dezelfde foto-opbouw, maar een lagere band. */
  .hero--achtergrond-laag .hero__inner {
    min-height: 22rem;
  }
}

/* Een icoon links van de titel, zoals het bestandstype op een productpagina.
   Op een wit vlak, zodat ook een icoon in Leisteen op de band zichtbaar blijft. */
.hero__titelregel {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.hero__titelregel h1 {
  min-width: 0;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.hero__icoon {
  flex: none;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-card);
  background-color: var(--colour-surface);
}

.hero__icoon img {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
}

.hero__titelregel + .hero__intro {
  margin-top: var(--space-s);
}

/* Op een smal scherm staat het icoon boven de titel: naast elkaar blijft er
   voor een lange productnaam te weinig breedte over. */
@media (max-width: 39.99em) {
  .hero__titelregel {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
  }

  .hero__icoon {
    width: 3.5rem;
    height: 3.5rem;
  }

  .hero__icoon img {
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media (min-width: 62em) {
  .hero--band .hero__inner {
    grid-template-columns: 1.05fr 1fr;
    gap: 2.5rem;
    padding-block: 3.5rem 6rem;
  }
}

/* -------------------------------------------------------------------------
   Banen 01–04: een groot nummer in Lucht, een kop met tekst, en rechts een
   tekening. De even banen staan op Fond en zijn gespiegeld, zodat de vier
   samen een ritme vormen in plaats van een lijst.
   ------------------------------------------------------------------------- */

.baan {
  padding-block: 3rem;
  border-bottom: 1px solid var(--colour-line);
}

.baan:last-child {
  border-bottom: 0;
}

.baan--fond {
  background-color: var(--colour-fond);
}

.baan__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.baan__nummer {
  flex: none;
  font-size: 3.75rem;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--colour-soft);
}

.baan--fond .baan__nummer {
  color: var(--colour-soft-on-fond);
}

.baan__tekst {
  flex: 1;
}

.baan h2 {
  margin: 0;
  font-size: 1.375rem;
}

.baan p {
  margin: 0.375rem 0 0;
  max-width: 440px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--colour-text-muted);
}

.baan__tekening {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  background-color: var(--colour-fond);
  border-radius: var(--radius-card);
  color: var(--colour-base);
}

.baan--fond .baan__tekening {
  background-color: var(--colour-surface);
}

.baan__tekening .tekening {
  width: 5rem;
  height: 5rem;
}

@media (min-width: 62em) {
  .baan:first-child {
    padding-top: 3.5rem;
  }

  .baan__inner {
    flex-direction: row;
    align-items: center;
    gap: 2.75rem;
  }

  .baan__nummer {
    font-size: 5.5rem;
  }

  .baan__tekening {
    width: 8.5rem;
    height: 8.5rem;
  }

  .baan__tekening .tekening {
    width: 5.75rem;
    height: 5.75rem;
  }

  .baan--gespiegeld .baan__tekening {
    order: 0;
  }

  .baan--gespiegeld .baan__tekst {
    order: 1;
  }

  .baan--gespiegeld .baan__nummer {
    order: 2;
  }
}

/* -------------------------------------------------------------------------
   Register "Waar u grip op krijgt": de negen onderdelen op Leisteen, in twee
   kolommen. De volgorde in de HTML is 01 tot en met 09; het raster vult
   eerst de linkerkolom en dan de rechter, zodat een voorleesprogramma en
   het oog dezelfde volgorde krijgen.
   ------------------------------------------------------------------------- */

.register {
  padding-block: 3.25rem 3.5rem;
  background-color: var(--colour-base);
  color: var(--colour-surface);
}

.register :focus-visible {
  outline-color: var(--colour-accent);
}

.register__kop {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.register h2 {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--colour-surface);
}

.register__sub {
  margin: 0;
  max-width: none;
  font-size: 0.875rem;
  color: var(--colour-on-dark-faint);
}

.register__lijst {
  display: grid;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgb(220 232 242 / 25%);
}

.register__item {
  border-bottom: 1px solid rgb(220 232 242 / 15%);
}

.register__link,
.register__slot {
  display: flex;
  align-items: baseline;
  gap: 1.125rem;
  padding: 1.0625rem 0;
  color: inherit;
  text-decoration: none;
}

.register__link:hover {
  color: inherit;
}

.register__link:hover strong,
.register__link:focus-visible strong {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.register__nummer {
  flex: none;
  width: 1.625rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--colour-accent);
}

.register__tekst {
  flex: 1;
  font-size: 0.875rem;
  color: var(--colour-on-dark-muted);
}

.register__tekst strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--colour-surface);
}

.register__pijl {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--colour-accent);
}

.register__slot {
  margin: 0;
  max-width: none;
  font-size: 0.875rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--colour-on-dark-faint);
}

@media (min-width: 48em) {
  .register__kop {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }
}

@media (min-width: 62em) {
  .register__lijst {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    column-gap: 4.5rem;
  }
}

/* Een sectie met de kop in het midden, zoals "Zo werkt het". */
.section--midden .section__kop {
  text-align: center;
}

.section--midden .section__intro {
  margin-inline: auto;
}

/* De korte band, zonder foto: voor het inlogscherm en het dossier. */
.hero--band-kort .hero__inner {
  padding-block: 2.5rem 3rem;
}

.hero--band-kort h1 {
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);
}

@media (min-width: 62em) {
  .hero--band-kort .hero__inner {
    grid-template-columns: 1fr;
    padding-block: 3rem 3.5rem;
  }
}

/* De tekening op een kernpuntkaart: 64px, geen tegel, Leisteen met één
   Oker-detail. De stippen (dagen op de kalender, het eindpunt van de lijn)
   zijn gevuld in dezelfde kleur als de lijn. */
.tegel__tekening {
  display: block;
  width: 4rem;
  height: 4rem;
  margin-top: -0.25rem;
  color: var(--colour-base);
}

.tegel__tekening .tekening {
  display: block;
  width: 100%;
  height: 100%;
}

.tegel__tekening .oker {
  stroke: var(--colour-accent-strong);
}

.tegel__tekening .stip {
  fill: currentColor;
  stroke: none;
}

.tegel__tekening + h3 {
  margin-top: 0.625rem;
}

/* Drie tegels naast elkaar op de platformpagina's; vier blijft de maat van
   de startpagina. Na de korte heroband schuiven de tegels niet omhoog: die
   band heeft er de ruimte niet voor. */
@media (min-width: 62em) {
  .tegels__lijst--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero--band-kort + .tegels {
    margin-top: 0;
    padding-top: var(--space-l);
  }
}

/* =========================================================================
   Startpagina: van waarom naar wat

   Heroband met het doel, het inlogformulier op de naad, wat het de kerk
   oplevert, de modules, en de scans als afsluitende oproep. Zie
   src/content/home.ts voor de opbouw.
   ========================================================================= */

/* De korte regel naast de scanknop in de hero. */
.hero__noot {
  font-size: 0.875rem;
  color: var(--colour-on-dark-muted);
}

/* Ruimte onderin de band voor het formulier dat er half overheen valt. */
.hero--naad .hero__inner {
  padding-bottom: 7.5rem;
}

/*
 * Het inlogformulier op de naad: half op Leisteen, half op wit. Het schuift
 * omhoog met een negatieve marge; de heroband houdt daar met `.hero--naad`
 * ruimte voor vrij, anders valt het over de knop.
 */
.naad {
  position: relative;
  z-index: 2;
  margin-top: -5.5rem;
}

.inlog--balk {
  max-width: none;
  gap: var(--space-s);
  padding: 1.5rem;
  box-shadow: var(--shadow-photo);
}

.inlog__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
}

.inlog__kop h2 {
  margin: 0;
  font-size: 1.375rem;
}

.inlog__hulplink {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--colour-base);
}

.inlog__velden {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.inlog--balk .inlog__onthoud-regel {
  font-size: 0.875rem;
  color: var(--colour-text-muted);
}

@media (min-width: 48em) {
  .inlog--balk .inlog__velden {
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }
}

@media (min-width: 62em) {
  /*
   * Op een breed scherm staan onthoud-vinkje, melding en knop op één regel
   * onder de velden: de knop rechts, waar het oog na het e-mailveld landt.
   */
  .inlog--balk {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--space-l);
  }

  .inlog--balk .inlog__kop,
  .inlog--balk .inlog__velden,
  .inlog--balk .melding {
    grid-column: 1 / -1;
  }

  .inlog--balk .melding {
    max-width: none;
  }

  .inlog--balk .button {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
  }

  .inlog--balk .melding:not([hidden]) + .button {
    grid-row: 4;
  }

  .inlog--balk .inlog__onthoud {
    grid-column: 1;
    grid-row: 3;
  }

  .hero--naad .hero__inner {
    padding-bottom: 8.5rem;
  }

  .naad {
    margin-top: -6rem;
  }
}

/* Wat het oplevert en de modules; de rustiger opzet staat in startpagina.css. */
.naad + .opbrengsten {
  padding-top: var(--space-xl);
}

.opbrengsten .section__kop,
.modules .section__kop,
.scans .section__kop {
  max-width: 40rem;
  margin-bottom: var(--space-l);
}

.opbrengsten .section__kop h2,
.modules .section__kop h2,
.scans .section__kop h2 {
  margin-bottom: var(--space-xs);
}

.opbrengsten .section__intro,
.modules .section__intro,
.scans .section__intro {
  margin: 0;
}

.opbrengsten__lijst {
  display: grid;
  gap: var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

.opbrengst {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.opbrengst h3 {
  margin: 0.625rem 0 0;
  font-size: 1.0625rem;
}

.opbrengst p {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  color: var(--colour-text-muted);
}

@media (min-width: 40em) {
  .opbrengsten__lijst {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  .opbrengsten__lijst {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-l);
  }
}

/* De scans op Leisteen: de oproep waarmee de startpagina eindigt. */
.scans {
  padding-block: var(--space-xl);
  color: var(--colour-surface);
  background-color: var(--colour-base);
}

.scans h2 {
  color: var(--colour-surface);
}

.scans .section__intro {
  color: var(--colour-on-dark-muted);
}

.scans :focus-visible {
  outline-color: var(--colour-accent);
}

.scans__slot {
  margin: var(--space-l) 0 0;
  max-width: none;
  color: var(--colour-on-dark-muted);
}

.scans__slot a {
  font-weight: 600;
  color: var(--colour-surface);
  text-decoration: none;
  border-bottom: 2px solid var(--colour-accent);
}

/* =========================================================================
   Kopbalk: de ingang voor leveranciers en partners

   Rechtsboven, klein en grijs. De startpagina richt zich op de kerk; wie van
   buiten komt, vindt hier zijn eigen deur zonder dat die de kerk afleidt.
   ========================================================================= */

.site-nav__partner {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--colour-text-muted);
  text-decoration: none;
  border: 1px solid var(--colour-line);
  border-radius: var(--radius);
}

.site-nav__partner:hover,
.site-nav__partner[aria-current="page"] {
  color: var(--colour-base);
  border-color: var(--colour-slate-60);
}

.site-nav__partner-icoon {
  flex: none;
}

/* In het opengeklapte menu op een telefoon: onder de inloglink, even breed. */
:root[data-js="on"] .site-nav[data-open] .site-nav__acties .site-nav__partner {
  order: 3;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
}

/* -------------------------------------------------------------------------
   Abonnementen
   Eén vergelijkingstabel met de drie voorbeelden en hun prijs in de kop. De
   tabel scrolt binnen zijn eigen vak, zodat de pagina op de telefoon niet
   opzij schuift.
   ------------------------------------------------------------------------- */

.abo-tabel-houder {
  /* Houdt de verborgen labels in de cellen binnen dit vak; anders rekt de pagina op. */
  position: relative;
  overflow-x: auto;
  background: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
}

.abo-tabel-houder:focus-visible {
  outline: 2px solid var(--colour-base);
  outline-offset: 2px;
}

.abo-tabel {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
}

.abo-tabel th,
.abo-tabel td {
  padding: var(--space-s) var(--space-m);
  border-top: 1px solid var(--colour-line);
  text-align: left;
  vertical-align: top;
}

.abo-tabel thead th,
.abo-tabel thead td {
  border-top: 0;
  background: var(--colour-fond);
  font-weight: 800;
}

.abo-tabel thead th:not(:first-child) {
  text-align: center;
  font-size: 1.0625rem;
}

.abo-tabel tbody td {
  text-align: center;
}

.abo-tabel tbody th {
  font-weight: 600;
}

.abo-tabel__uitleg {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--colour-text-muted);
}

.abo-tabel__groep th {
  background: var(--colour-fond);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.abo-noot {
  margin: var(--space-s) 0 0;
  font-size: 0.875rem;
  color: var(--colour-text-muted);
}

.abo-ja {
  color: var(--status-ok-dot);
  font-size: 1.25rem;
  font-weight: 800;
}

.abo-nee {
  color: var(--colour-text-muted);
}

.abo-tabel__opbouw {
  color: var(--colour-text-muted);
  font-style: italic;
}

/* De kop van de vergelijking: naam, voor wie, prijs. */

.abo-tabel--vergelijk thead th.abo-tabel__pakket {
  padding: var(--space-m) var(--space-s);
  vertical-align: bottom;
  border-top: 4px solid var(--colour-base);
  font-size: inherit;
}

.abo-tabel__pakket > span {
  display: block;
}

.abo-tabel__naam {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
}

.abo-tabel__voor {
  margin-top: 0.15rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--colour-text-muted);
}

.abo-tabel__bedrag {
  margin-top: var(--space-s);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--colour-base);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.abo-tabel__per,
.abo-tabel__korting {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--colour-text-muted);
}

.abo-tabel--vergelijk tbody td {
  vertical-align: middle;
}

.abo-tabel--vergelijk tbody th {
  width: 40%;
}

/* Zo is de prijs opgebouwd: drie stappen naast elkaar. */

.abo-opbouw {
  display: grid;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stap;
}

.abo-opbouw__stap {
  counter-increment: stap;
  padding: var(--space-m);
  background: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
}

.abo-opbouw__stap h3 {
  margin: 0 0 var(--space-xs);
  font-size: 1.0625rem;
}

.abo-opbouw__stap h3::before {
  content: counter(stap) ". ";
  color: var(--colour-text-muted);
}

.abo-opbouw__stap p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--colour-text-muted);
}

.abo-opbouw__stap .abo-opbouw__bedrag {
  font-size: 2rem;
  font-weight: 800;
  color: var(--colour-base);
  font-variant-numeric: tabular-nums;
}

.abo-opbouw__lijst {
  margin: 0 0 var(--space-xs);
  padding: 0;
  list-style: none;
}

.abo-opbouw__lijst li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--colour-line);
  font-variant-numeric: tabular-nums;
}

.abo-opbouw__lijst li:last-child {
  border-bottom: 0;
}

@media (min-width: 48em) {
  .abo-opbouw {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* De rekenhulp: keuze links, uitkomst rechts; op de telefoon onder elkaar. */

.abo-reken {
  display: grid;
  gap: var(--space-l);
  align-items: start;
}

.abo-reken > * {
  min-width: 0;
}

.abo-reken fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--space-xs);
}

.abo-reken legend {
  margin-bottom: var(--space-xs);
  font-weight: 700;
}

.abo-reken__module {
  display: flex;
  gap: var(--space-s);
  align-items: flex-start;
  padding: var(--space-s) var(--space-m);
  background: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  cursor: pointer;
}

.abo-reken__module:has(input:checked) {
  border-color: var(--colour-base);
  box-shadow: inset 0 0 0 1px var(--colour-base);
}

.abo-reken__module input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  flex: none;
  accent-color: var(--colour-base);
}

.abo-reken__module span span {
  display: block;
  font-size: 0.875rem;
  color: var(--colour-text-muted);
}

.abo-reken__veld {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-m);
}

.abo-reken__veld label {
  font-weight: 700;
}

.abo-reken__veld input {
  max-width: 8rem;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--colour-slate-60);
  border-radius: var(--radius);
}

.abo-reken__hulp {
  margin: 0;
  font-size: 0.875rem;
  color: var(--colour-text-muted);
}

.abo-reken__melding {
  margin: 0;
  font-size: 0.875rem;
  color: var(--status-aandacht-text);
}

.abo-uitkomst {
  padding: var(--space-l) var(--space-m);
  background: var(--colour-base);
  color: var(--colour-surface);
  border-radius: var(--radius-card);
}

.abo-uitkomst p {
  margin: 0;
}

.abo-uitkomst__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colour-on-dark-muted);
}

.abo-uitkomst__bedrag {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.abo-uitkomst__onder {
  color: var(--colour-on-dark-muted);
}

.abo-uitkomst__regels {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: var(--space-xs) var(--space-m);
  margin: var(--space-m) 0 0;
  padding-top: var(--space-m);
  border-top: 1px solid rgb(255 255 255 / 20%);
  font-size: 0.9375rem;
}

.abo-uitkomst__regels dt {
  color: var(--colour-on-dark-muted);
}

.abo-uitkomst__regels dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.abo-reken__uitkomst h3 {
  margin: var(--space-l) 0 var(--space-xs);
  font-size: 1.0625rem;
}

.abo-reken__kan {
  margin: 0 0 var(--space-s);
  padding-left: 1.25rem;
}

.abo-reken__kan li {
  margin-bottom: 0.25rem;
}

@media (min-width: 48em) {
  .abo-reken {
    grid-template-columns: 1fr 1fr;
  }

  .abo-reken__uitkomst {
    position: sticky;
    top: var(--space-l);
  }
}

@media (max-width: 30em) {
  .abo-uitkomst__regels {
    grid-template-columns: minmax(0, 1fr);
  }

  .abo-uitkomst__regels dd {
    margin-bottom: var(--space-xs);
  }
}

/*
 * Net boven de grens van het brede menu is de balk krap: logo, vier items en
 * twee knoppen. Iets kleinere letters en minder tussenruimte houden alles op
 * één regel, zonder onder de 15px te zakken.
 */
@media (min-width: 62em) and (max-width: 77.5em) {
  .site-header__inner,
  .site-nav,
  .site-nav__list,
  .site-nav__acties {
    gap: var(--space-s);
  }

  .site-nav__link,
  .site-nav__inlog {
    font-size: 0.9375rem;
  }

  .site-nav__inlog {
    padding-inline: 0.75rem;
  }

  .site-nav__partner {
    font-size: 0.8125rem;
    padding-inline: 0.5rem;
  }

  .site-logo {
    font-size: 1rem;
  }
}

/* Op papier hoort de kopbalk één keer bovenaan, niet vast boven elke pagina. */
@media print {
  .site-header {
    position: static;
  }
}

/* De stap met de code uit de inlogmail: vervangt het formulier na het aanvragen. */
.inlog__code {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.inlog__code-kop {
  margin: 0;
  scroll-margin-top: 6rem;
  font-size: 1.375rem;
}

.inlog__code-kop:focus {
  outline: none;
}

.inlog__code-uitleg {
  margin: 0;
  color: var(--colour-text-muted);
  overflow-wrap: anywhere;
}

.inlog .inlog__code-invoer {
  box-sizing: border-box;
  width: 100%;
  max-width: 16rem;
  padding: 0.75rem 1rem;
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.25em;
  text-align: center;
}

.inlog__code-knop {
  align-self: flex-start;
}

.inlog__code-acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  margin: 0;
}

.inlog__code-acties button:disabled {
  color: var(--colour-text-muted);
  text-decoration: none;
  cursor: default;
}

/* "Ik heb al een code": een tekstlink onder de knop, voor wie later terugkomt. */
.inlog__al-code {
  justify-self: start;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--colour-base);
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-color: var(--colour-accent-strong);
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Wie op dit apparaat al met Face ID inlogde, krijgt de knop bovenaan. */
.inlog__passkey--voorop {
  justify-self: stretch;
  align-self: stretch;
  margin-bottom: var(--space-s, 0.75rem);
}

@media (min-width: 62em) {
  .inlog--balk .inlog__al-code {
    grid-column: 1 / -1;
  }
}

@media (min-width: 62em) {
  /* In de balk op de startpagina staat de stap met de code over de hele breedte. */
  .inlog--balk .inlog__code {
    grid-column: 1 / -1;
  }

  .inlog--balk .inlog__code .button {
    grid-column: auto;
    grid-row: auto;
  }
}