/* WeStayHere.Studio · merksysteem
   Gebouwd door bouw_css.py uit systeem/stijl/. Niet met de hand bewerken.
   Eén stijlblad voor alle merken, in drie lagen:
     system   laag 1: opbouw, verhoudingen, letters en components. Voor elk merk hetzelfde, alleen tokens.
     brand    laag 2: per merk alleen waarden, onder [data-brand] (40-merken.css). Wint altijd van system.
     toegang  instellingen van het apparaat: hoog contrast en minder beweging. Gaat voor het merk.
   Tokennamen zijn letterlijk die uit Penpot (WeStayHere Design System). Penpot is de bron.
   Welke components er zijn: systeem/componenten.json. */
@layer system, brand, toegang;

@layer system {
/* ---------- 10-systeem-basis: de grond onder alles ----------
   Tokens die voor elk merk gelden (ruimte, beweging, maten), de kleurrollen, de typeschaal en de kleinste
   components: knop, veld, keuze, tag, kaart, navigatiebalk. */

/* verhoudingen en rolkoppelingen: per element opnieuw berekend, zodat elk merkblok zijn eigen basis volgt */
:root,
[data-brand],
.merkbalk {
  --space-0: 0px;
  --space-05: calc(var(--space-unit) * 0.5);
  --space-15: calc(var(--space-unit) * 1.5);
  /* beweging: korte overgang voor hover, focus en openklappen */
  --duration-fast: 0.2s;
  --duration-count: 1.6s;
  /* langzamere beweging: --duration-slow voor het inzoomen van een foto bij hover (samen met --scale-hover),
     --duration-fade voor een beeld of onderschrift dat infaadt, --duration-intro met --ease-intro voor iets dat binnenschuift */
  --duration-slow: 0.4s;
  --duration-fade: 0.55s;
  --duration-intro: 0.6s;
  --ease-intro: cubic-bezier(0.2, 0.7, 0.3, 1);
  --scale-hover: 1.03;
  /* loop-hero: een foto blijft --duration-loop-hold staan, de wissel duurt --duration-loop, ondertussen zoomt hij langzaam naar --scale-loop */
  --duration-loop: 0.75s;
  --duration-loop-hold: 3s;
  --scale-loop: 1.05;
  --ease-loop: cubic-bezier(0.61, 1, 0.88, 1);
  /* een rij die binnenkomt: elk volgend item --duration-stagger later. Een groot beeld dat bij binnenkomst langzaam op zijn plek zakt: --duration-reveal */
  --duration-stagger: 0.08s;
  --duration-reveal: 2.4s;
  /* ribbon: de balk valt in --duration-ribbon-val, wacht tot --duration-ribbon-wacht en verkleurt in --duration-ribbon-kleur */
  --duration-ribbon-val: 0.8s;
  --duration-ribbon-kleur: 1s;
  --duration-ribbon-wacht: 1.8s;
  /* tile-grid: een vage, kleurige achtergrond achter de kop */
  --blur-backdrop: 64px;
  --opacity-backdrop: 0.45;
  /* regellengte van korte teksten in kaarten en blokken */
  --measure-sm: 30ch;
  --measure-md: 40ch;
  --measure-lg: 52ch;
  /* vaste stappen die voor elk merk gelijk zijn: regelafstand voor gestapelde woordmerken, doorzichtigheid van donker glas */
  --line-height-solid: 0.85;
  --opacity-glass: 0.5;
  /* breekpunten: de ladder van het systeem. CSS kan geen token in een media query lezen,
     doel: media queries schrijven alleen deze vijf waarden uit (min-width N of max-width N min 1).
     De bestaande breekpunten zijn nog niet omgezet; dat gebeurt in de Penpot-ronde */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 900px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1700px;
  /* raster (Penpot: breakpoint-tablet, breakpoint-desktop): vanaf 735 px tablet, vanaf 1069 px desktop */
  --breakpoint-tablet: 735px;
  --breakpoint-desktop: 1069px;
  /* raster: 12 kolommen. De inhoud is layout-content-ratio (87,5%) van het scherm, maximaal layout-width-content (1260),
     onder breakpoint-tablet maximaal layout-width-content-sm (420). --layout-margin is de marge per kant die daaruit volgt
     (90 px bij 1440, 66,75 bij 1068, 90 bij 600, 24,375 bij 390). --layout-container = inhoud plus twee marges,
     voor een blok dat zelf de marge als padding heeft. Alle marges van de site wijzen hiernaar */
  --layout-content-ratio: 0.875;
  --layout-width-content-sm: 420px;
  --layout-columns: 12;
  /* maximale breedte van een bijschrift of een lege beeldplek (media-placeholder) */
  --layout-width-caption: 480px;
  /* welcome is-verhaal: hoe ver de tekst op het laatste beeld van de onderrand staat. Een merk kan hem hoger zetten (laag 2) */
  --welcome-tekst-onder: var(--space-16);
  /* letter van de navigatie (globale en lokale balk); een merk kan hier een andere letter kiezen dan voor de tekst */
  /* terugval als een merk geen eigen letter kiest: de letter van het apparaat. Het merk zet zijn eigen waarden in 40-merken.css */
  --font-family-display: system-ui, "Segoe UI", sans-serif;
  --font-family-text: system-ui, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-family-nav: var(--font-family-text);
  --font-size-nav: calc(var(--font-size-base) * 0.8125); /* 13 px */
  /* knoppen (Penpot: size-button-*, font-size-button): maten. XS 24 · standaard 44 · groot 56 hoog, tekst 12 / 17 / 17 */
  --size-button-xs: calc(var(--space-unit) * 6);
  --size-button-sm: calc(var(--space-unit) * 9);
  --size-button-md: calc(var(--space-unit) * 11);
  --size-button-lg: calc(var(--space-unit) * 14);
  --font-size-button: calc(var(--font-size-base) * 1.0625);
  --radius-button-lg: var(--radius-md);
  --layout-cap: var(--layout-width-content);
  /* sectiepadding (Penpot: space-section-*): boven en onder één sectie, niet de afstand tussen twee secties.
     Desktop 144, tablet 120, mobiel 112. Verkleinde bovenpadding 120 / 80 / 56. --space-section kiest per schermbreedte */
  --space-section-lg: 144px;
  --space-section-md: 120px;
  --space-section-sm: 112px;
  --space-section-reduced-lg: 120px;
  --space-section-reduced-md: 80px;
  --space-section-reduced-sm: 56px;
  --space-section: var(--space-section-lg);
  --space-section-reduced: var(--space-section-reduced-lg);
  --layout-margin: max(
    calc(100vw * (1 - var(--layout-content-ratio)) / 2),
    calc((100vw - var(--layout-cap)) / 2)
  );
  --layout-container: calc(var(--layout-width-content) + 2 * var(--layout-margin));
  --layout-gutter-mobile: var(--layout-margin);
  --layout-gutter-desktop: var(--layout-margin);
  --space-1: var(--space-unit);
  --space-2: calc(var(--space-unit) * 2);
  --space-3: calc(var(--space-unit) * 3);
  --space-4: calc(var(--space-unit) * 4);
  --space-5: calc(var(--space-unit) * 5);
  --space-6: calc(var(--space-unit) * 6);
  --space-8: calc(var(--space-unit) * 8);
  --space-10: calc(var(--space-unit) * 10);
  --space-12: calc(var(--space-unit) * 12);
  --space-16: calc(var(--space-unit) * 16);
  --space-20: calc(var(--space-unit) * 20);
  --space-24: calc(var(--space-unit) * 24);
  --space-32: calc(var(--space-unit) * 32);
  --space-nav-gap: var(--space-6);

  --size-icon-sm: calc(var(--space-unit) * 4);
  --size-arrow: calc(var(--space-unit) * 9);
  --size-icon-md: calc(var(--space-unit) * 5);
  --size-icon-lg: calc(var(--space-unit) * 6);
  /* lijndikte van de lijniconen (Lucide); een merk kan hem dunner of dikker zetten */
  --icon-stroke-width: 2;
  /* dikkere lijn voor iconen die moeten opvallen, zoals bij een melding */
  --icon-stroke-width-strong: 2.5;
  --size-touch-min: calc(var(--space-unit) * 11);
  --size-nav-height: calc(var(--space-unit) * 11);
  --size-control-sm: calc(var(--space-unit) * 9);
  --size-control-md: calc(var(--space-unit) * 12);
  --size-control-lg: calc(var(--space-unit) * 14);
  --letter-spacing-text: -0.008em;
  --size-logo-tile: calc(var(--space-unit) * 28);
  --size-logo-mark: calc(var(--space-unit) * 12);
  --size-illustration-sm: calc(var(--space-unit) * 22);
  /* typeschaal (Penpot: font-size-type-*), 16 stappen in drie maten zoals het raster: desktop vanaf 1069, tablet 735-1068, mobiel tot 734.
     display-2xl 132/96/64 · display-xl 96/80/56 · display-lg 80/64/48 · display-md 72/56/40
     headline-lg 48/40/32 · headline-md 48/40/28 · headline-sm 40/32/28
     title-lg 32/28/24 · title-md 32/24/21 · title-sm 28/24/21
     lead-lg 24/21/19 · lead-md 21/21/19 · lead-sm 21/21/17 · body 17 · body-sm 14 · caption 12 */
  --font-size-type-display-2xl: 132px;
  --line-height-type-display-2xl: 1.0;
  --font-size-type-display-xl: 96px;
  --line-height-type-display-xl: 1.05;
  --font-size-type-display-lg: 80px;
  --line-height-type-display-lg: 1.0;
  --font-size-type-display-md: 72px;
  --line-height-type-display-md: 1.06;
  --font-size-type-headline-lg: 48px;
  --line-height-type-headline-lg: 1.08;
  --font-size-type-headline-md: 48px;
  --line-height-type-headline-md: 1.08;
  --font-size-type-headline-sm: 40px;
  --line-height-type-headline-sm: 1.1;
  --font-size-type-title-lg: 32px;
  --line-height-type-title-lg: 1.125;
  --font-size-type-title-md: 32px;
  --line-height-type-title-md: 1.125;
  --font-size-type-title-sm: 28px;
  --line-height-type-title-sm: 1.14;
  --font-size-type-lead-lg: 24px;
  --line-height-type-lead-lg: 1.33;
  /* lopende tekst, voor alle merken: 16 / 1,5, intro 19, klein 14, inleiding bovenaan een overzicht 21.
     Letterafstand volgens de tabel van Inter, de tekstletter van de meeste merken; een merk met een andere tekstletter zet hem in laag 2 */
  --type-lead-size: calc(var(--font-size-base) * 1.3125);
  --type-lead-line-height: 1.38;
  --type-lead-tracking: -0.0176em;
  --type-body-l-size: calc(var(--font-size-base) * 1.1875);
  --type-body-l-line-height: 1.42;
  --type-body-l-tracking: -0.0156em;
  --type-body-m-size: var(--font-size-base);
  --type-body-m-line-height: 1.5;
  --type-body-m-tracking: -0.011em;
  --type-body-s-size: calc(var(--font-size-base) * 0.875);
  --type-body-s-line-height: 1.43;
  --type-body-s-tracking: -0.0062em;
  --font-size-type-lead-md: var(--type-body-l-size);
  --line-height-type-lead-md: var(--type-body-l-line-height);
  --font-size-type-lead-sm: var(--type-body-l-size);
  --line-height-type-lead-sm: 1.24;
  --font-size-type-body: var(--type-body-m-size);
  --line-height-type-body: var(--type-body-m-line-height);
  --font-size-type-body-sm: var(--type-body-s-size);
  --line-height-type-body-sm: var(--type-body-s-line-height);
  --font-size-type-caption: 12px;
  /* cijfers in made-feature: 48 op alle maten */
  --font-size-type-stat: 48px;
  --line-height-type-caption: 1.33;
  /* oude namen blijven bestaan en wijzen naar de schaal */
  --font-size-type-hero: var(--font-size-type-display-xl);
  --font-size-type-section: var(--font-size-type-headline-lg);
  --font-size-type-headline: var(--font-size-type-headline-sm);
  --font-size-type-card: var(--font-size-type-title-sm);
  --font-size-type-eyebrow: var(--font-size-type-lead-sm);
  /* typografische rollen op een site: elke sectie gebruikt dezelfde maten, uit de typeschaal */
  --font-size-hero-title: var(--font-size-type-hero);
  --font-size-section-title: var(--font-size-type-section);
  --font-size-section-lead: var(--font-size-type-eyebrow);
  --font-size-card-title: var(--font-size-type-card);
  --font-size-card-title-lg: var(--font-size-type-headline);
  --font-size-card-title-sm: var(--font-size-sm);
  --font-size-card-text: var(--font-size-type-body);
  --font-size-meta: var(--font-size-xs);
  /* feature cards zoals: 372 × 425, tablet 344 × 390, mobiel 260 × 287 */
  --size-feature-card-width: calc(var(--space-unit) * 93);
  --size-feature-card-width-sm: calc(var(--space-unit) * 65);
  --size-feature-card-height: calc(var(--space-unit) * 106.25);
  /* vaste maten per breedte (Penpot: -tablet, -sm); de rol hierboven wisselt ernaar in de media queries */
  --size-feature-card-width-tablet: calc(var(--space-unit) * 86);
  --size-feature-card-height-tablet: calc(var(--space-unit) * 97.5);
  --size-feature-card-height-sm: calc(var(--space-unit) * 71.75);
  --size-pair-card-height: calc(var(--space-unit) * 170);
  --size-pair-card-height-tablet: calc(var(--space-unit) * 157);
  --size-pair-card-height-sm: calc(var(--space-unit) * 140);
  --space-button-md: calc(var(--space-unit) * 5.25);
  --space-button-xs: calc(var(--space-unit) * 2.5);
  --shadow-raised: 0 var(--space-1) var(--space-6) color-mix(in srgb, var(--color-shadow) 12%, transparent);

  --font-size-2xs: calc(var(--font-size-base) * 0.6875);
  --font-size-xs: calc(var(--font-size-base) * 0.75);
  --font-size-sm: calc(var(--font-size-base) * 0.875);
  --font-size-md: var(--font-size-base);
  --font-size-lg: calc(var(--font-size-base) * 1.125);
  --font-size-xl: calc(var(--font-size-base) * 1.25);
  --font-size-2xl: calc(var(--font-size-base) * 1.5);
  --font-size-3xl: calc(var(--font-size-base) * 2);
  --font-size-4xl: calc(var(--font-size-base) * 2.75);
  --font-size-5xl: calc(var(--font-size-base) * 3.5);
  --font-size-6xl: calc(var(--font-size-base) * 4.5);
  --font-size-7xl: calc(var(--font-size-base) * 6);
  --font-size-8xl: calc(var(--font-size-base) * 8);
  --font-size-9xl: calc(var(--font-size-base) * 12);

  --font-weight-display: var(--font-weight-bold);
  --font-weight-button: var(--font-weight-semibold);
  --radius-button: var(--radius-full);
  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-md);
  --radius-chip: var(--radius-full);
  --radius-pil: var(--radius-full);

  /* componenttokens: alleen verwijzingen naar rollen */
  --color-link: var(--color-action-text);
  --color-nav-link: var(--color-action-text);
  --color-nav-link-muted: var(--color-on-surface-variant);
  --color-nav-chevron: var(--color-fill-strong);
  /* standaarden voor componentrollen; een merk mag ze naar een andere rol laten wijzen */
  --color-control-strong: var(--color-action);
  --color-control-subtle: var(--color-surface-container);
  --color-cover-1: var(--color-action);
  --color-cover-2: var(--color-accent);
  --color-cover-3: var(--color-accent);
  --color-cover-shadow: var(--color-scrim);
  --color-cover-title: var(--color-on-image);
  --color-footer: var(--color-surface-dim);
  --color-footer-heading: var(--color-heading);
  --color-footer-line: var(--color-outline-variant);
  --color-footer-text: var(--color-on-surface-variant);
  --color-nav-dark: var(--color-surface-inverse);
  --color-nav-dark-action: var(--color-action-inverse);
  --color-nav-global: var(--color-surface-container-lowest);
  --color-on-nav-global: var(--color-on-surface);
  --color-nav-global-line: var(--color-outline-variant);
  --color-nav-global-muted: var(--color-on-surface-variant);
  /* merkkleuren als rollen (Material): een merk zonder tweede of derde kleur valt terug op de eerste */
  --color-secondary: var(--color-primary);
  --color-on-secondary: var(--color-on-primary);
  --color-tertiary: var(--color-primary);
  --color-on-tertiary: var(--color-on-primary);
  --color-on-primary-container: var(--color-on-surface);
  --color-accent: var(--color-primary);
  --color-action: var(--color-primary);
  --color-on-action: var(--color-on-primary);
  /* de actiekleur als tekst of lijn op de grond: standaard gelijk aan de actiekleur; een merk kiest een donkerder stap als die op de grond te licht is */
  --color-action-text: var(--color-action);
  /* op een donkere grond (Material: inverse-primary). Een merk zonder eigen waarde houdt zijn gewone actiekleur als inverse-primary */
  --color-inverse-primary: var(--color-primary);
  /* standaard een lichte knop op donker; een merk met een felle actiekleur die op donker leesbaar is, zet hier zijn eigen kleur (PPP) */
  --color-action-inverse: var(--color-on-surface-inverse);
  --color-on-action-inverse: var(--color-surface-inverse);
  /* tekst en links in de actiekleur op een donkere grond */
  --color-action-text-inverse: var(--color-action-inverse);
  /* staatlagen (Material): de on-kleur over het vlak, als verhouding. Geen eigen hover- of pressed-kleuren per merk */
  --opacity-state-hover: 0.08;
  --opacity-state-pressed: 0.12;
  --opacity-disabled-container: 0.12;
  --opacity-disabled-content: 0.38;
  --color-action-hover: color-mix(in srgb, var(--color-on-action) calc(var(--opacity-state-hover) * 100%), var(--color-action));
  --color-action-pressed: color-mix(in srgb, var(--color-on-action) calc(var(--opacity-state-pressed) * 100%), var(--color-action));
  --color-action-secondary-hover: color-mix(in srgb, var(--color-on-surface) calc(var(--opacity-state-hover) * 100%), var(--color-surface-container));
  --color-action-secondary-pressed: color-mix(in srgb, var(--color-on-surface) calc(var(--opacity-state-pressed) * 100%), var(--color-surface-container));
  --color-choice-hover: color-mix(in srgb, var(--color-on-surface) calc(var(--opacity-state-hover) * 100%), var(--color-choice));
  --color-choice-pressed: color-mix(in srgb, var(--color-on-surface) calc(var(--opacity-state-pressed) * 100%), var(--color-choice));
  --color-control-strong-hover: color-mix(in srgb, var(--color-on-control-strong) calc(var(--opacity-state-hover) * 100%), var(--color-control-strong));
  --color-control-subtle-hover: color-mix(in srgb, var(--color-on-surface) calc(var(--opacity-state-hover) * 100%), var(--color-control-subtle));
  --color-action-disabled: color-mix(in srgb, var(--color-on-surface) calc(var(--opacity-disabled-container) * 100%), transparent);
  --color-on-action-disabled: color-mix(in srgb, var(--color-on-surface) calc(var(--opacity-disabled-content) * 100%), transparent);
  /* scrim (Material): één donkere kleur over beeld; de doorzichtigheid is een merkwaarde */
  --opacity-scrim-hero: var(--opacity-scrim-image);
  --opacity-scrim-media: var(--opacity-scrim-image);
  --color-scrim-image: color-mix(in srgb, var(--color-scrim) calc(var(--opacity-scrim-image) * 100%), transparent);
  --color-scrim-hero: color-mix(in srgb, var(--color-scrim) calc(var(--opacity-scrim-hero) * 100%), transparent);
  --color-scrim-media: color-mix(in srgb, var(--color-scrim) calc(var(--opacity-scrim-media) * 100%), transparent);
  --color-media-placeholder: var(--color-surface-container);
  /* lichte merkkleur; een merk zonder eigen tint houdt de lichte grond */
  --color-primary-container: var(--color-surface-dim);
  --color-nav-local: var(--color-surface);
  --color-on-control-strong: var(--color-on-action);
  --color-ribbon: var(--color-surface-dim);
}

/* ---------- merkbalk: altijd in de studiowaarden ---------- */
.merkbalk {
  background: var(--color-surface-brand);
  color: var(--color-on-surface-inverse);
  font-family: var(--font-family-text);
}
.merkbalk-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  min-height: var(--size-touch-min);
  padding-left: max(var(--space-5), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-5), env(safe-area-inset-right, 0px));
}
.merkbalk-naam {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-inverse-variant);
  margin-right: var(--space-2);
}
.merkbalk ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.merkbalk a {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--size-touch-min) - var(--space-2));
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-inverse-variant);
}
.merkbalk a:hover {
  color: var(--color-on-surface-inverse);
}
.merkbalk a[aria-current] {
  background: var(--color-surface-inverse-container);
  color: var(--color-on-surface-inverse);
}
.merkbalk a:focus-visible {
  outline: var(--border-width-strong) solid var(--color-on-surface-inverse);
  outline-offset: calc(var(--space-05) * -1);
}

/* ---------- types: één klasse per Penpot-typografietoken ---------- */
.type-display-xl {
  font-family: var(--font-family-display);
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
}
.type-display-lg {
  font-family: var(--font-family-display);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
}
.type-display-lg-strong {
  font-family: var(--font-family-display);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
}
.type-display-2xl {
  font-family: var(--font-family-display);
  font-size: var(--font-size-7xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-none);
}
.type-lead-xl {
  font-family: var(--font-family-text);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-text, var(--font-weight-medium));
  line-height: var(--line-height-snug);
}
.type-lead-xl-strong {
  font-family: var(--font-family-text);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
}
.type-display-sm {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-snug);
}
.type-heading-1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
}
.type-heading-2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-snug);
}
.type-heading-3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
}
.type-heading-4 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-normal);
}
.type-overline {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-tight);
}
.type-lead-lg {
  font-family: var(--font-family-text);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-text, var(--font-weight-medium));
  line-height: var(--line-height-normal);
}
.type-lead-md {
  font-family: var(--font-family-text);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-relaxed);
}
.type-body-xl {
  font-family: var(--font-family-text);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-normal);
}
.type-body-lg {
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-normal);
}
.type-body-lg-strong {
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-normal);
}
.type-body-md {
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-relaxed);
}
.type-body-md-strong {
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-relaxed);
}
.type-body-sm {
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-normal);
}
.type-body-sm-strong {
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-normal);
}
.type-body-xs {
  font-family: var(--font-family-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-normal);
}
.type-body-xs-strong {
  font-family: var(--font-family-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-normal);
}
.type-label-xl-strong {
  font-family: var(--font-family-text);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
}
.type-label-lg-strong {
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
}
.type-label-md {
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-snug);
}
.type-label-md-strong {
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
}
.type-label-sm {
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-snug);
}
.type-label-sm-strong {
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
}
.type-label-xs {
  font-family: var(--font-family-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-snug);
}
.type-label-xs-strong {
  font-family: var(--font-family-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
}
.type-caption-lg-strong {
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
}
.type-caption-sm {
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-normal);
}
.type-button-md {
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-snug);
}
.type-button-sm {
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-snug);
}

/* ---------- systeemcomponenten ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--size-button-md);
  padding-inline: var(--space-button-md);
  border: 0;
  border-radius: var(--radius-button);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-family-text);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-snug);
}
.button-sm {
  min-height: var(--size-button-sm);
  padding-inline: var(--space-4);
  font-size: var(--font-size-sm);
}
/* button-lg: de grote knop voor een formulier "Submit": 56 px hoog, afgeronde hoeken in plaats van een pil */
.button.button-lg {
  min-height: var(--size-button-lg);
  padding-inline: calc(var(--space-unit) * 7.5);
  border-radius: var(--radius-button-lg);
  font-size: var(--font-size-button);
}
.button-primary {
  background: var(--color-action);
  color: var(--color-on-action);
}
.button-primary:hover {
  background: var(--color-action-hover);
}
.button-primary:active {
  background: var(--color-action-pressed);
}
.button-secondary {
  background: var(--color-surface-container);
  color: var(--color-on-surface);
}
.button-secondary:hover {
  background: var(--color-action-secondary-hover);
}
.button-secondary:active {
  background: var(--color-action-secondary-pressed);
}
.button-ghost {
  background: var(--color-action-ghost);
  color: var(--color-on-surface);
  min-width: var(--size-control-md);
  padding-inline: var(--space-3);
}
/* button-tekst: een kleinere actie als blauwe tekst zonder vlak (toevoegen, kopiëren). De hoofdactie blijft button-primary. */
.button-tekst {
  min-height: var(--size-touch-min);
  padding-inline: 0;
  background: none;
  color: var(--color-link);
  font-size: var(--form-tekst-size);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
}
.button-tekst:hover {
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}
.button-tekst:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--border-width-strong);
}
.button-tekst:disabled {
  background: none;
  color: var(--color-on-surface-muted);
}
.button:disabled {
  background: var(--color-action-disabled);
  color: var(--color-on-action-disabled);
  cursor: not-allowed;
}
.button svg {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}
.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.choice {
  min-height: var(--size-control-md);
  padding-inline: var(--space-5);
  border: var(--border-width-default) solid var(--color-outline-variant);
  border-radius: var(--radius-control);
  background: var(--color-choice);
  color: var(--color-on-surface);
  cursor: pointer;
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-snug);
}
.choice:hover {
  background: var(--color-choice-hover);
}
.choice:active {
  background: var(--color-choice-pressed);
}
.choice[aria-pressed="true"] {
  background: var(--color-selection);
  border-color: var(--color-selection-border);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
}
.choice:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--border-width-default);
}
.choice:disabled {
  background: var(--color-surface-container);
  border-color: var(--color-outline-subtle);
  color: var(--color-on-surface-muted);
  cursor: not-allowed;
}
/* text field: één implementatie voor gids, site en formulier (Penpot: Field / Input en Field / Textarea) */
.field {
  display: grid;
  gap: var(--space-2);
  max-width: var(--layout-width-form);
}
/* :where houdt de zwaarte van de regel gelijk; een knop die technisch een label is (bestand kiezen) valt erbuiten */
.field label:where(:not(.button)),
.field .field-label {
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-heading);
}
.field .field-optional {
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  color: var(--color-on-surface-variant);
}
.field :is(input, select, textarea) {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--size-control-md);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-default) solid var(--color-outline);
  border-radius: var(--radius-control);
  background: var(--color-choice);
  color: var(--color-on-surface);
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-snug);
}
.field textarea {
  min-height: var(--space-24);
  resize: vertical;
}
.field :is(input, select, textarea):focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--border-width-default);
}
.field :is(input, select, textarea):disabled {
  background: var(--color-surface-container);
  color: var(--color-on-surface-muted);
  cursor: not-allowed;
}
.field .hint {
  font-family: var(--font-family-text);
  font-size: var(--form-tekst-size);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-normal);
  color: var(--color-on-surface);
}
.field.is-error :is(input, select, textarea) {
  border-color: var(--color-error-outline);
  background: var(--color-error-container);
}
.field.is-error .hint {
  color: var(--color-error);
}
.card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-surface-container-lowest);
}
.card .card-category {
  color: var(--color-on-surface-muted);
}
.card .card-text {
  color: var(--color-on-surface-variant);
}
.card h3 {
  color: var(--color-heading);
}
.tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-chip);
  background: var(--color-surface-container);
  color: var(--color-on-surface);
}
.card-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.section-header {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
  max-width: var(--layout-width-reading);
  margin-inline: auto;
}
.section-header h3 {
  color: var(--color-heading);
}
.section-header p:last-child {
  color: var(--color-on-surface-variant);
}
.state-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-on-surface);
}
.state::before {
  content: "";
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-full);
  background: currentColor;
}
.state-success::before {
  background: var(--color-success);
}
.state-warning::before {
  background: var(--color-warning);
}
.state-attention::before {
  background: var(--color-attention);
}
.state-error {
  color: var(--color-error);
}
.state-error::before {
  background: var(--color-error);
}
.band-inverse {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: var(--space-8);
  border-radius: var(--radius-card);
  background: var(--color-surface-inverse);
  color: var(--color-on-surface-inverse);
}
.band-inverse h3 {
  color: var(--color-on-surface-inverse);
}
.band-inverse p {
  color: var(--color-on-surface-inverse-variant);
}
.nav-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-nav-gap);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--color-band-alt);
  border: var(--border-width-default) solid var(--color-outline-subtle);
}
.nav-bar-name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-snug);
  color: var(--color-heading);
}
.nav-bar a {
  color: var(--color-on-surface-variant);
  text-decoration: none;
}
.nav-bar .button {
  margin-left: auto;
}
.media-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: min(100%, var(--layout-width-caption));
  border-radius: var(--radius-card);
  background: var(--color-media-placeholder);
  color: var(--color-on-surface-variant);
}

/* ---------- typeschaal: voor elk merk (5 nov 2026: alle merken staan in de nieuwe vorm, de merkgrens is weg) ----------
   De oude maten (font-size-*, font-size-type-*) wijzen hier naar de rollen. */
:root,
[data-brand],
.merkbalk {
  /* typeschaal: rollen van Material, eigen maten. Grootte als verhouding van font-size-base.
     Op tablet en mobiel zakken de koppen een stap (zie 30-gidspaginas.css, @media). */
  --type-display-l-size: calc(var(--font-size-base) * 6);
  --type-display-m-size: calc(var(--font-size-base) * 5);
  --type-display-s-size: calc(var(--font-size-base) * 4);
  --type-headline-l-size: calc(var(--font-size-base) * 3.5);
  --type-headline-m-size: calc(var(--font-size-base) * 3);
  --type-headline-s-size: calc(var(--font-size-base) * 2.5);
  --type-title-l-size: calc(var(--font-size-base) * 2);
  --type-title-m-size: calc(var(--font-size-base) * 1.75);
  --type-title-s-size: calc(var(--font-size-base) * 1.5);
  --type-label-l-size: calc(var(--font-size-base) * 1.0625);
  --type-label-m-size: calc(var(--font-size-base) * 0.875);
  --type-label-s-size: calc(var(--font-size-base) * 0.75);
  --type-display-l-line-height: 1.04;
  --type-display-m-line-height: 1.05;
  --type-display-s-line-height: 1.0625;
  --type-headline-l-line-height: 1.07;
  --type-headline-m-line-height: 1.08;
  --type-headline-s-line-height: 1.1;
  --type-title-l-line-height: 1.125;
  --type-title-m-line-height: 1.14;
  --type-title-s-line-height: 1.17;
  --type-label-l-line-height: 1.24;
  --type-label-m-line-height: 1.29;
  --type-label-s-line-height: 1.33;
  /* letterafstand per rol, volgens de tabel van Inter. Koppen op 0: met de as voor maatafhankelijke vormen (opsz) is de letter op grote maten zelf al krapper.
     Tekst en labels krapper naarmate ze groter zijn. Penpot rekent in px */
  --type-display-l-tracking: 0em;
  --type-display-m-tracking: 0em;
  --type-display-s-tracking: 0em;
  --type-headline-l-tracking: 0em;
  --type-headline-m-tracking: 0em;
  --type-headline-s-tracking: 0em;
  --type-title-l-tracking: 0em;
  --type-title-m-tracking: 0em;
  --type-title-s-tracking: 0em;
  --type-label-l-tracking: -0.0128em;
  --type-label-m-tracking: -0.0062em;
  --type-label-s-tracking: 0em;
  --type-display-weight: var(--font-weight-display);
  --type-headline-weight: var(--font-weight-display);
  --type-title-weight: var(--font-weight-semibold);
  /* letter van titels: standaard die van de koppen; een merk kan de tekstletter kiezen */
  --font-family-title: var(--font-family-display);
  --type-body-weight: var(--font-weight-text, var(--font-weight-regular));
  --type-label-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  --font-size-2xs: var(--type-label-s-size);
  --font-size-xs: var(--type-label-s-size);
  --font-size-sm: var(--type-body-s-size);
  --font-size-md: var(--type-body-m-size);
  --font-size-lg: var(--type-body-m-size);
  --font-size-xl: var(--type-body-l-size);
  --font-size-2xl: var(--type-title-s-size);
  --font-size-3xl: var(--type-title-l-size);
  --font-size-4xl: var(--type-headline-s-size);
  --font-size-5xl: var(--type-headline-l-size);
  --font-size-6xl: var(--type-display-m-size);
  --font-size-7xl: var(--type-display-l-size);
  --font-size-8xl: calc(var(--type-display-l-size) * 4 / 3);
  --font-size-9xl: calc(var(--type-display-l-size) * 2);
  --font-size-type-display-xl: var(--type-display-l-size);
  --line-height-type-display-xl: var(--type-display-l-line-height);
  --font-size-type-display-lg: var(--type-display-m-size);
  --line-height-type-display-lg: var(--type-display-m-line-height);
  --font-size-type-display-md: var(--type-display-s-size);
  --line-height-type-display-md: var(--type-display-s-line-height);
  --font-size-type-headline-lg: var(--type-headline-m-size);
  --line-height-type-headline-lg: var(--type-headline-m-line-height);
  --font-size-type-headline-md: var(--type-headline-m-size);
  --line-height-type-headline-md: var(--type-headline-m-line-height);
  --font-size-type-headline-sm: var(--type-headline-s-size);
  --line-height-type-headline-sm: var(--type-headline-s-line-height);
  --font-size-type-title-lg: var(--type-title-l-size);
  --line-height-type-title-lg: var(--type-title-l-line-height);
  --font-size-type-title-md: var(--type-title-l-size);
  --line-height-type-title-md: var(--type-title-l-line-height);
  --font-size-type-title-sm: var(--type-title-m-size);
  --line-height-type-title-sm: var(--type-title-m-line-height);
  --font-size-type-lead-lg: var(--type-title-s-size);
  --line-height-type-lead-lg: var(--type-title-s-line-height);
  --font-size-type-lead-md: var(--type-body-l-size);
  --line-height-type-lead-md: var(--type-body-l-line-height);
  --font-size-type-lead-sm: var(--type-body-l-size);
  --line-height-type-lead-sm: var(--type-body-l-line-height);
  --font-size-type-body: var(--type-body-m-size);
  --line-height-type-body: var(--type-body-m-line-height);
  --font-size-type-body-sm: var(--type-body-s-size);
  --line-height-type-body-sm: var(--type-body-s-line-height);
  --font-size-type-caption: var(--type-label-s-size);
  --line-height-type-caption: var(--type-label-s-line-height);
  --font-size-type-display-2xl: calc(var(--type-display-l-size) * 1.375);
  --line-height-type-display-2xl: var(--type-display-l-line-height);
  --font-size-type-stat: var(--type-headline-m-size);
  --font-size-nav: var(--type-label-m-size);
  --font-size-button: var(--type-label-l-size);
  --letter-spacing-text: var(--type-body-m-tracking);
}

/* de vijftien tekstrollen (Material-namen, eigen maten). Oude .type-* klassen volgen via de tokens en vervallen later */
.type-display-l {
  font-family: var(--font-family-display);
  font-size: var(--type-display-l-size);
  font-weight: var(--type-display-weight);
  text-transform: var(--text-case-heading, none);
  line-height: var(--type-display-l-line-height);
  letter-spacing: var(--type-display-l-tracking);
}
.type-display-m {
  font-family: var(--font-family-display);
  font-size: var(--type-display-m-size);
  font-weight: var(--type-display-weight);
  text-transform: var(--text-case-heading, none);
  line-height: var(--type-display-m-line-height);
  letter-spacing: var(--type-display-m-tracking);
}
.type-display-s {
  font-family: var(--font-family-display);
  font-size: var(--type-display-s-size);
  font-weight: var(--type-display-weight);
  text-transform: var(--text-case-heading, none);
  line-height: var(--type-display-s-line-height);
  letter-spacing: var(--type-display-s-tracking);
}
.type-headline-l {
  font-family: var(--font-family-display);
  font-size: var(--type-headline-l-size);
  font-weight: var(--type-headline-weight);
  text-transform: var(--text-case-heading, none);
  line-height: var(--type-headline-l-line-height);
  letter-spacing: var(--type-headline-l-tracking);
}
.type-headline-m {
  font-family: var(--font-family-display);
  font-size: var(--type-headline-m-size);
  font-weight: var(--type-headline-weight);
  text-transform: var(--text-case-heading, none);
  line-height: var(--type-headline-m-line-height);
  letter-spacing: var(--type-headline-m-tracking);
}
.type-headline-s {
  font-family: var(--font-family-display);
  font-size: var(--type-headline-s-size);
  font-weight: var(--type-headline-weight);
  text-transform: var(--text-case-heading, none);
  line-height: var(--type-headline-s-line-height);
  letter-spacing: var(--type-headline-s-tracking);
}
.type-title-l {
  font-family: var(--font-family-title);
  font-size: var(--type-title-l-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-l-line-height);
  letter-spacing: var(--type-title-l-tracking);
}
.type-title-m {
  font-family: var(--font-family-title);
  font-size: var(--type-title-m-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-m-line-height);
  letter-spacing: var(--type-title-m-tracking);
}
.type-title-s {
  font-family: var(--font-family-title);
  font-size: var(--type-title-s-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-s-line-height);
  letter-spacing: var(--type-title-s-tracking);
}
.type-body-l {
  font-family: var(--font-family-text);
  font-size: var(--type-body-l-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-l-line-height);
  letter-spacing: var(--type-body-l-tracking);
}
.type-body-m {
  font-family: var(--font-family-text);
  font-size: var(--type-body-m-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-m-line-height);
  letter-spacing: var(--type-body-m-tracking);
}
.type-body-s {
  font-family: var(--font-family-text);
  font-size: var(--type-body-s-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-s-line-height);
  letter-spacing: var(--type-body-s-tracking);
}
.type-label-l {
  font-family: var(--font-family-text);
  font-size: var(--type-label-l-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-l-line-height);
  letter-spacing: var(--type-label-l-tracking);
}
.type-label-m {
  font-family: var(--font-family-text);
  font-size: var(--type-label-m-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
  letter-spacing: var(--type-label-m-tracking);
}
.type-label-s {
  font-family: var(--font-family-text);
  font-size: var(--type-label-s-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-s-line-height);
  letter-spacing: var(--type-label-s-tracking);
}

/* ---------- tekstrollen voor formulieren (vragenlijst, Config, contact) ----------
   Twee diktes (tekst en sterk, de waarde is per merk) en één tekstkleur; de rangorde zit in grootte en dikte.
   Alleen signalen hebben een eigen kleur: blauw voor links en de gekozen keuze, rood voor een fout.
   stap      32: eerste woord sterk, de rest tekst                (config-step-title)
   vraag     24: kop sterk, de vraag tekst                        (intake-vraag label)
   keuze     17, sterk: titel van een keuze, label boven keuzes  (config-choice-title, intake-vervolg)
   tekst     14, tekst: uitleg, hulpkaartje, links               (hint, help-card, button-tekst)
   klein     12: uitleg op een keuzekaart (sterk), bewaard (tekst, grijs) */
:root {
  --form-stap-size: calc(var(--font-size-base) * 2);
  --form-vraag-size: calc(var(--font-size-base) * 1.5);
  --form-keuze-size: var(--type-label-l-size);
  --form-tekst-size: var(--type-body-s-size);
  --form-klein-size: var(--type-label-s-size);
}

/* ---------- kleurstalen: vaste kleuren om uit te kiezen in de vragenlijst (laag 1, voor elk merk gelijk) ----------
   Geen merkkleuren: dit zijn de algemene kleurnamen die een klant aanwijst, zoals de kleurkeuze bij een MacBook.
   Ook in Penpot als kleur/staal-*. */
:root {
  --staal-rood: #d7263d;
  --staal-oranje: #f08a24;
  --staal-geel: #f5c518;
  --staal-groen: #2e9e5b;
  --staal-blauw: #1f6fd1;
  --staal-paars: #7a4fc4;
  --staal-roze: #ef7fb0;
  --staal-bruin: #8a5a3c;
  --staal-zwart: #1d1d1f;
  --staal-wit: #ffffff;
  --staal-grijs: #8e8e93;
  --staal-goud: #c9a227;
  /* voorbeeldletters bij de vraag Letters in de intake: laat de stijl zien in plaats van hem te beschrijven */
  --letter-strak: "Inter", system-ui, sans-serif;
  --letter-klassiek: "Source Serif 4", Georgia, serif;
  --letter-rond: "Nunito", system-ui, sans-serif;
  --letter-stoer: "Archivo Black", Impact, sans-serif;
}
/* ---------- 20-gidscomponenten: components die site en gids delen ----------
   Secties, kaarten, rails en carrousels, heroes, modals, navigatie en voet.
   Letterstijlen per breedte: de desktopwaarden zijn de Penpot-typografietokens.
   Penpot kan een vetgedrukte kernzin niet binnen één tekstlaag een eigen kleurtoken geven: daar staan kernzin en tekst onder elkaar. */

/* componenttoken: het vlak van een kaart volgt het vlak van de sectie (section.section-dim en de vormpagina's zetten color-surface-container-lowest om) */
section {
  --color-card: var(--color-surface-container-lowest);
}
/* een sectie zonder eigen grond ligt op de paginagrond (een donkere sectie zet het vlak zelf, zie section-inverse): de kaart krijgt het verhoogde vlak, zodat hij zichtbaar blijft (ook als de paginagrond wit is) */
main:not(.pagina-vorm) > section:not(.section-dim, .sand, .section-inverse) {
  --color-card: var(--color-band-alt);
}

/* sectie-intro: label, titel, inleiding */
.section-intro {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-8);
}
.section-intro-label {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface);
}
.section-intro-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
  color: var(--color-heading);
}
.section-intro-lead {
  max-width: var(--layout-width-reading);
  margin: var(--space-2) 0 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
@media (min-width: 1069px) {
  .section-intro {
    margin-bottom: var(--space-10);
  }
  .section-intro-label {
    font-size: var(--font-size-xl);
  }
  .section-intro-title {
    font-size: var(--font-size-4xl);
  }
  .section-intro-lead {
    font-size: var(--font-size-xl);
  }
}

.section-intro-center {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

/* grote uitspraak op een donker vlak, met of zonder beeld erachter */
.statement-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(var(--space-32) * 6);
  padding: var(--space-16) 0;
  background: var(--color-surface-inverse) center / cover no-repeat;
  overflow: hidden;
}
.statement-hero > .inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.statement-hero:has(.statement-hero-media)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-scrim-image);
}
.statement-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.statement-hero-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-none);
  color: var(--color-on-image);
}
@media (min-width: 1069px) {
  .statement-hero-title {
    font-size: var(--font-size-7xl);
  }
}

/* kaart die opent met een vetgedrukte kernzin */
.lead-card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 735px) {
  .lead-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1069px) {
  .lead-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lead-card-grid:has(> :nth-child(2):last-child),
  .lead-card-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.lead-card {
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-card);
}
.lead-card p {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
.lead-card b {
  color: var(--color-on-surface);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
}
.lead-card-lg {
  padding: var(--space-8);
}
.lead-card-lg p {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-text, var(--font-weight-medium));
}
.lead-card-lg b {
  font-weight: var(--font-weight-text, var(--font-weight-medium));
}
@media (min-width: 1069px) {
  .lead-card-lg p {
    font-size: var(--font-size-3xl);
  }
}

/* stemkaart: groot beeld met label en een woord */

/* uitspraak in het midden onder een stemkaart */

/* wel en niet: twee kolommen woorden */

/* principe: stemkaart, uitspraak, wel en niet, tactieken */

/* uitgelicht: tekst naast een beeld dat de helft van het vlak vult */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-card);
}
.feature-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-8);
}
.feature-label {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface);
}
.feature-title {
  margin: 0;
  text-wrap: balance;
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
  color: var(--color-heading);
}
.feature-text p:not([class]) {
  max-width: var(--measure-lg);
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
.feature-text .button {
  margin-top: var(--space-3);
}
.feature-text > .feature-title + *,
.feature-text > .feature-title + p:not([class]) {
  margin-top: var(--space-2);
}
.feature-media {
  margin: 0;
  aspect-ratio: 3 / 2;
}
.feature-media img,
.feature-media .media-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
}
.feature-media .media-placeholder {
  display: grid;
}
@media (min-width: 1069px) {
  .feature:has(.feature-media) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: calc(var(--space-32) * 4);
  }
  .feature-text {
    padding: var(--space-16);
  }
  .feature-title {
    font-size: var(--font-size-3xl);
  }
  .feature-text p:not([class]) {
    font-size: var(--font-size-xl);
  }
  .feature-media {
    aspect-ratio: auto;
  }
}

/* kaarten met titel, tekst en een link */
.link-card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 735px) {
  .link-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .link-card-grid:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.link-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-8) var(--space-10);
  border-radius: var(--radius-card);
  background: var(--color-card);
}
.link-card h3 {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
  color: var(--color-heading);
}
.link-card p {
  max-width: 34ch;
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-relaxed);
  color: var(--color-on-surface);
}
.link-card a {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  color: var(--color-link);
}
@media (min-width: 1069px) {
  .link-card p {
    font-size: var(--font-size-xl);
  }
  .link-card h3 {
    font-size: clamp(var(--font-size-2xl), 2vw, calc(var(--font-size-2xl) * 1.25));
  }
}

/* herkenbare kenmerken: uitleg boven, voorbeeld onder */
.asset-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 735px) {
  .asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1069px) {
  .asset-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .asset-grid:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .asset-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.asset-card {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--space-4) var(--space-5) var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-card);
}
.asset-card-text {
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
.asset-card-text h3 {
  display: inline;
  margin: 0;
  font: inherit;
  color: var(--color-on-surface);
}
.asset-card-text p {
  display: inline;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}
.asset-card-example {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: var(--space-3);
  padding-top: var(--space-6);
  text-align: center;
}
.asset-card-example img {
  display: block;
}
.asset-card-example img,
.asset-card-example .media-placeholder {
  width: min(85%, calc(var(--space-unit) * 60));
  max-width: none;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
.asset-card-example .media-placeholder {
  border-radius: var(--radius-md);
}
.asset-card-example.is-dark img {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-surface-inverse);
}
.asset-card-example p {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  color: var(--color-on-surface);
}
/* het raster is breder dan de tekstkolom, tot de brede maat van het merk */
@media (min-width: 1069px) {
  .asset-card-example {
    min-height: calc(var(--space-unit) * 75);
  }
  .asset-grid {
    margin-inline: calc((100% - min(100vw - 2 * var(--layout-gutter-desktop), var(--layout-width-wide))) / 2);
  }
}

/* vaste regels: titel en doorlopende zinnen met een vette kern */
.rule-statement {
  display: grid;
  gap: var(--space-6);
  justify-items: center;
  text-align: center;
}
.rule-statement-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
  color: var(--color-heading);
}
.rule-statement-text {
  margin: 0;
  max-width: var(--layout-width-content);
  text-wrap: balance;
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
.rule-statement-text b {
  color: var(--color-on-surface);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
}
@media (min-width: 1069px) {
  .rule-statement-title {
    font-size: var(--font-size-4xl);
  }
  .rule-statement-text {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-normal);
  }
}

/* donkere sectie: zet de rollen om, zodat elk component erin vanzelf goed staat */
section.section-inverse {
  background: var(--color-surface-inverse);
  color: var(--color-on-image);
  --color-on-surface: var(--color-on-image);
  --color-heading: var(--color-on-image);
  --color-on-surface-variant: var(--color-on-surface-inverse-variant);
  --color-card: var(--color-surface-inverse-container);
  --color-outline-variant: var(--color-outline-inverse);
  --color-outline-subtle: var(--color-outline-inverse);
  --color-action: var(--color-action-inverse);
  --color-on-action: var(--color-on-action-inverse);
  --color-action-text: var(--color-action-text-inverse);
  --color-link: var(--color-action-text-inverse);
}

/* carrousel met beeld en een zin eronder (bediening.js maakt de stippen of de teller) */
.highlight-section {
  padding-block: var(--space-section);
}
/* rail: de basis van elke schuifrij (highlight-rail, event-card-rail, feature-card-rail).
   Zijwaarts schuiven met snap, zonder zichtbare schuifbalk. --rail-inset laat de eerste kaart op de lijn van de tekst beginnen
   en de rij doorlopen tot de rand van het scherm */
.highlight-rail,
.event-card-rail,
.feature-card-rail {
  --rail-inset: max(
    var(--layout-gutter-mobile),
    calc((100% - var(--layout-container)) / 2 + var(--layout-gutter-mobile))
  );
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
@media (min-width: 1069px) {
  .highlight-rail,
  .event-card-rail,
  .feature-card-rail {
    --rail-inset: max(
      var(--layout-gutter-desktop),
      calc((100% - var(--layout-container)) / 2 + var(--layout-gutter-desktop))
    );
  }
}
.highlight-rail::-webkit-scrollbar,
.event-card-rail::-webkit-scrollbar,
.feature-card-rail::-webkit-scrollbar {
  display: none;
}
.highlight-rail {
  list-style: none;
  margin: 0;
  display: flex;
  gap: var(--space-5);
  overflow-y: hidden;
  touch-action: pan-x pan-y;
  padding: 0 var(--layout-gutter-mobile);
  scroll-padding-inline: var(--layout-gutter-mobile);
}
.highlight-rail::after {
  content: "";
  flex: none;
  width: var(--space-05);
}
@media (min-width: 1069px) {
  .highlight-rail {
    padding: 0 var(--rail-inset);
    scroll-padding-inline: var(--rail-inset);
  }
}
.highlight {
  flex: none;
  width: min(var(--layout-width-reading), 82%);
  scroll-snap-align: start;
}
.highlight.is-narrow {
  width: calc(min(var(--layout-width-reading), 82%) * 0.533);
}
.highlight-media {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-card);
}
.highlight.is-narrow .highlight-media {
  aspect-ratio: 4 / 5;
}
.highlight-media img,
.highlight-media .media-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
}
.highlight-media .media-placeholder {
  display: grid;
}
.highlight p {
  max-width: var(--measure-md);
  margin: var(--space-5) var(--space-3) 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
}
.highlight p b {
  color: var(--color-on-surface);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
}
@media (min-width: 1069px) {
  .highlight p {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-snug);
  }
}
.highlight-section .section-intro {
  margin-bottom: var(--space-8);
}
.section-inverse .stippen button {
  background: var(--color-on-image);
}

/* pijlen onder een rij kaarten met tekst (bediening.js) */
.carousel-arrows,
.inner.carousel-arrows {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-20);
}
/* staat alles al in beeld, dan zet bediening.js de pijlen op hidden: dat moet ook echt verbergen */
.carousel-arrows[hidden] {
  display: none;
}
.carousel-arrow {
  display: grid;
  place-items: center;
  width: var(--size-arrow);
  height: var(--size-arrow);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-control-subtle);
  color: var(--color-on-surface);
  cursor: pointer;
}
.carousel-arrow svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}
.carousel-arrow:hover:not(:disabled) {
  background: var(--color-control-subtle-hover);
}
.carousel-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}
.carousel-arrow:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-05);
}
.section-inverse .carousel-arrow {
  background: var(--color-outline-inverse);
  color: var(--color-on-image);
}
.section-inverse .hl-knop {
  background: var(--color-outline-inverse);
  color: var(--color-on-image);
}
.section-inverse .teller {
  color: var(--color-on-surface-inverse-variant);
}

/* verhaal: beeld vult het scherm, krimpt tot een kader en de tekst rolt erin omhoog (verhaal.js) */

/* toon: vragen en momenten met schuifjes */

/* sections-label: het naambordje boven een voorbeeldsectie op de pagina Sections */
section.sections-label {
  background: var(--color-band-alt);
  border-top: var(--border-width-default) solid var(--color-outline-variant);
  padding-block: var(--space-10) var(--space-6);
}

/* media-hero: groot beeld of video dat bij het scrollen krimpt tot een afgeronde kaart, waarna de tekst onderin verschijnt.
   --p: 0 vol beeld, 1 kaart. --t: 0 tekst weg, 1 tekst in beeld. Zonder script of bij minder beweging: meteen de eindstand. */
.media-hero-section {
  --p: 1;
  --t: 1;
  padding-block: var(--space-16);
}
.media-hero-pin {
  padding-inline: var(--layout-gutter-mobile);
}
.media-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: calc(var(--space-32) * 5);
  max-width: var(--layout-width-wide);
  margin-inline: auto;
  border-radius: calc(var(--p) * var(--radius-card));
  overflow: hidden;
  background: var(--color-surface-inverse);
  isolation: isolate;
}
.media-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: var(--t);
  background: linear-gradient(
      to top,
      color-mix(in srgb, var(--color-surface-inverse) 65%, transparent) 0%,
      color-mix(in srgb, var(--color-surface-inverse) 30%, transparent) 45%,
      transparent 75%
    ),
    var(--color-scrim-media);
}
.media-hero-content {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-width: var(--layout-container); /* raster: inhoud binnen de marges */
  margin: 0 auto;
  padding: var(--space-16) var(--layout-margin) var(--space-12);
  box-sizing: border-box;
  text-align: center;
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * var(--space-10)));
}
.media-hero-icon {
  display: block;
  width: auto;
  height: calc(var(--space-unit) * 10);
}
.media-hero-title {
  margin: 0;
  text-wrap: balance;
  font-family: var(--font-family-display);
  font-size: var(--font-size-type-display-lg); /* typeschaal: 80 / 64 / 48 */
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-type-display-lg);
  color: var(--color-on-image);
}
.media-hero-text {
  max-width: 46ch;
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-body); /* typeschaal: 17 */
  line-height: var(--line-height-normal);
  color: var(--color-on-image);
}
.media-hero-pause {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  display: grid;
  place-items: center;
  width: calc(var(--space-unit) * 8);
  height: calc(var(--space-unit) * 8);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-outline-inverse);
  color: var(--color-on-image);
  cursor: pointer;
}
.media-hero-pause:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-05);
}
.media-hero-pause svg {
  width: calc(var(--space-unit) * 3);
  height: calc(var(--space-unit) * 3);
}
@media (min-width: 1069px) {
  .media-hero-pin {
    padding-inline: var(--layout-gutter-desktop);
  }
  .media-hero {
    min-height: 0;
    aspect-ratio: 2 / 1;
  }
  .media-hero-content {
    padding-bottom: var(--space-20);
  }
}
/* in beweging: het kader staat vast in beeld en krimpt van schermvullend naar kaart */
.media-hero-section.is-moving {
  padding-block: 0;
}
.media-hero-section.is-moving .media-hero-pin {
  position: sticky;
  top: var(--kop, 0px);
  height: calc(100vh - var(--kop, 0px));
  box-sizing: border-box;
  padding: var(--iy, 0px) var(--ix, 0px);
}
.media-hero-section.is-moving .media-hero {
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
  .media-hero video.media-hero-media {
    display: none;
  }
}

/* word-hero: schermvullende beelden die wisselen, met een kop waarin het middelste woord meewisselt.
   Speelt één keer af en blijft op het laatste woord staan. Daaronder een intro die bij het scrollen verschijnt. */
.word-hero-section {
  padding-block: 0;
}
.word-hero {
  position: relative;
  display: grid;
  place-items: center;
  height: calc(100vh - var(--kop, 0px));
  min-height: calc(var(--space-32) * 4);
  overflow: hidden;
  background: var(--color-surface-inverse);
  isolation: isolate;
}
.word-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-scrim-image);
}
.word-hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--duration-fade) ease var(--duration-fast);
}
.word-hero-image.is-current {
  opacity: 1;
}
.word-hero-headline {
  display: grid;
  justify-items: center;
  padding-inline: var(--space-6);
  text-align: center;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-none);
  color: var(--color-on-image);
}
.word-hero-line {
  font-size: var(--font-size-2xl);
}
.word-hero-words {
  display: grid;
  overflow: hidden;
  padding-block: var(--space-2) 0.22em;
  margin-bottom: -0.12em;
  font-size: var(--font-size-5xl);
}
.word-hero-word {
  grid-area: 1 / 1;
  justify-self: center;
  align-self: end;
  font-size: calc(1em * var(--schaal, 1));
  white-space: nowrap;
  transform: translateY(120%);
  transition:
    transform var(--duration-intro) var(--ease-intro),
    opacity var(--duration-fast) ease;
}
.word-hero-word.is-current {
  transform: none;
}
.word-hero-word.is-gone {
  transform: translateY(-120%);
  opacity: 0;
}
.word-hero-caption {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-6);
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: var(--color-on-image);
  opacity: 0;
  transition: opacity var(--duration-fade) ease var(--duration-fast);
}
.word-hero-caption.is-current {
  opacity: 1;
}
.word-hero .media-hero-pause {
  bottom: var(--space-5);
}
.word-hero-intro {
  position: relative;
  z-index: 0;
  max-width: 31em;
  margin: 0 auto;
  padding: var(--space-24) var(--space-6) calc(var(--space-32) * 2);
  text-align: center;
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
  color: var(--color-on-surface);
}
/* in beweging: het beeld schuift sneller omhoog dan je scrolt en over de intro heen; de intro komt er langzaam onder vandaan */
.word-hero-section.is-moving .word-hero {
  position: relative;
  z-index: 1;
  will-change: transform;
}
.word-hero-section.is-moving .word-hero-intro {
  margin-top: calc((100vh - var(--kop, 0px)) * -0.34);
  padding-top: var(--space-32);
  opacity: var(--o, 0);
}
@media (min-width: 1069px) {
  .word-hero-line {
    font-size: var(--font-size-5xl);
  }
  .word-hero-words {
    font-size: var(--font-size-8xl);
  }
  .word-hero-caption {
    left: var(--layout-gutter-desktop);
    font-size: var(--font-size-sm);
  }
  .word-hero-intro {
    font-size: var(--font-size-3xl);
  }
}
@media (prefers-reduced-motion: reduce) {
  .word-hero-image,
  .word-hero-word,
  .word-hero-caption {
    transition: none;
  }
}

/* contact-cards: twee kaarten naast elkaar met een kop, een korte zin en een knop, gecentreerd.
   Voor de contactroute en de route naar partners. Op mobiel onder elkaar. */
.contact-cards-section {
  padding-block: var(--space-section);
}
.contact-card-grid {
  list-style: none;
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--layout-container);
  margin: 0 auto;
  padding: 0 var(--layout-margin);
}
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-10);
  border-radius: var(--radius-card);
  background: var(--color-card);
  text-align: center;
}
.contact-card-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
  color: var(--color-heading);
}
.contact-card-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--measure-sm);
  margin: var(--space-5) 0 var(--space-8);
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface);
  text-wrap: balance;
}
@media (min-width: 735px) {
  .contact-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-card {
    padding-block: var(--space-16);
  }
}
@media (min-width: 1069px) {
  .contact-card-title {
    font-size: var(--font-size-4xl);
  }
  .contact-card-text {
    font-size: var(--font-size-2xl);
  }
}

/* contact-modal: het venster dat opent vanuit een contact-card.
   Een <dialog> over de pagina met een wazige achtergrond. Kop in twee tinten, intro en een formulier
   met labels in het veld die omhoog schuiven zodra je typt. Sluiten met de knop, Esc of een klik ernaast. */
.contact-modal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--space-6) var(--space-4);
  border: 0;
  background: transparent;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.contact-modal::backdrop {
  background: var(--color-scrim-image);
  backdrop-filter: blur(var(--space-5));
  -webkit-backdrop-filter: blur(var(--space-5));
}
.contact-modal-sheet {
  position: relative;
  max-width: var(--layout-width-content);
  margin: 0 auto;
  padding: var(--space-20) var(--space-6) var(--space-16);
  border-radius: var(--radius-card);
  background: var(--color-surface-container-lowest);
  text-align: center;
  transition:
    transform var(--duration-intro) var(--ease-intro),
    opacity var(--duration-fast) ease;
}
@starting-style {
  .contact-modal[open] .contact-modal-sheet {
    transform: translateY(var(--space-10));
    opacity: 0;
  }
}
.contact-modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  place-items: center;
  width: var(--size-touch-min);
  height: var(--size-touch-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  cursor: pointer;
}
.contact-modal-close svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}
.contact-modal-close:hover {
  background: var(--color-action-secondary-hover);
}
.contact-modal-icon {
  display: block;
  height: var(--space-16);
  width: auto;
  margin: 0 auto var(--space-5);
}
.contact-modal-title {
  max-width: 18em;
  margin: 0 auto;
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
  color: var(--color-on-surface-variant);
  text-wrap: balance;
}
.contact-modal-title b {
  font-weight: inherit;
  color: var(--color-heading);
}
.contact-modal-intro {
  max-width: 32em;
  margin: var(--space-5) auto 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
}
.contact-form {
  display: grid;
  gap: var(--space-3);
  max-width: var(--layout-width-form);
  margin: var(--space-12) auto 0;
  text-align: left;
}
@media (min-width: 735px) {
  .contact-modal {
    padding: var(--space-6);
  }
}
@media (min-width: 1069px) {
  .contact-modal-title {
    font-size: var(--font-size-4xl);
  }
  .contact-modal-intro {
    font-size: var(--font-size-xl);
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-modal-sheet {
    transition: none;
  }
}

/* steps: een kaart met kop en beeld, daaronder een rij stappen met een icoon.
   Elke stap: een icoon, dan een vette opening met de uitleg in een lichtere tint. Werkt met drie of vier stappen.
   Onder de stappen kan een ondersteunende regel. Op mobiel staan de stappen onder elkaar. */
.steps-section {
  padding-block: var(--space-section);
}
.steps-inner {
  max-width: var(--layout-container);
  margin: 0 auto;
  padding-inline: var(--layout-margin);
}
.steps-media {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-card);
  text-align: center;
}
.steps-title {
  max-width: 14em;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6) 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
  color: var(--color-heading);
  text-wrap: balance;
}
.steps-intro {
  max-width: 32em;
  margin: var(--space-4) auto 0;
  padding-inline: var(--space-6);
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
}
.steps-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: var(--space-6);
  object-fit: cover;
  -webkit-mask-image: linear-gradient(transparent, #000 35%); /* lint: mag, masker */
  mask-image: linear-gradient(transparent, #000 35%); /* lint: mag, masker */
}
.steps-list {
  list-style: none;
  display: grid;
  gap: var(--space-10);
  margin: var(--space-10) 0 0;
  padding: 0;
}
.steps-icon {
  display: block;
  width: auto;
  height: var(--space-20);
}
.steps-text {
  overflow-wrap: break-word;
  hyphens: auto;
  margin: var(--space-5) 0 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
.steps-text b {
  font-weight: inherit;
  color: var(--color-heading);
}
.steps-note {
  max-width: var(--layout-width-reading);
  margin: var(--space-12) 0 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
}
@media (min-width: 735px) {
  .steps-title {
    padding-top: var(--space-16);
  }
  .steps-list {
    margin-top: var(--space-16);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-12);
  }
  .steps-text {
    font-size: var(--font-size-xl);
  }
}
@media (min-width: 1069px) {
  .steps-title {
    font-size: var(--font-size-5xl);
  }
  .steps-intro {
    font-size: var(--font-size-xl);
  }
  .steps-list {
    margin-top: var(--space-24);
  }
}

/* site: een losse websitepagina die uit secties is opgebouwd, buiten de gids (body.site).
   Kop met merk, menu en acties; secties in een begrensde kolom; een eenvoudige voet. */
body.site {
  display: block;
  background: var(--color-surface);
}
/* op een site liggen kaarten op de paginagrond: ze krijgen het verhoogde vlak, zodat ze zichtbaar blijven */
body.site section:not(.section-inverse) {
  --color-card: var(--color-band-alt);
}
.link-card .link-card-meta {
  margin-top: auto;
  font-size: var(--font-size-sm);
  color: var(--color-on-surface-variant);
}
/* site-inner volgt het grid van het systeem: inhoudsbreedte met dezelfde marge als de lokale balk (.ln-in) en .inner */
.site-inner {
  max-width: var(--layout-container);
  margin: 0 auto;
  padding-inline: var(--layout-gutter-mobile);
  box-sizing: border-box;
}
@media (min-width: 1069px) {
  .site-inner {
    padding-inline: var(--layout-gutter-desktop);
  }
}
/* lokale balk met één actie: staat rechts naast de ankers, op mobiel naast de menuknop */
.ln-actie {
  flex: none;
  order: 2;
  margin-left: var(--space-4);
}
.ln-knop {
  order: 3;
}
@media (max-width: 1068px) {
  .ln-actie {
    margin-left: auto;
  }
  .ln-in:has(.ln-actie) .ln-knop {
    margin-left: var(--space-2);
  }
  .ln-in:has(.ln-actie) .ln-titel {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.site-section {
  padding-block: var(--space-section);
}
/* witruimte van een site-sectie: ruim boven en onder, kop en inleiding als één blok, en duidelijke afstand tot de inhoud */
.site-section .section-intro-lead {
  margin-top: 0;
}
.site-section .section-intro {
  margin-bottom: var(--space-12);
}
@media (min-width: 1069px) {
  .site-section .section-intro {
    margin-bottom: var(--space-20);
  }
}
/* site-inner-wide: de brede kolom van het systeem, even breed als de inhoud van de globale balk. Voor rijen kaarten en beeld */
.site-inner + .site-inner {
  margin-top: var(--space-8);
}

.site-footer {
  padding-block: var(--space-12);
  border-top: var(--border-width-default) solid var(--color-outline-subtle);
}
.site-footer .site-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
}
.site-footer b {
  color: var(--color-heading);
}
.site-footer ul {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer a {
  color: var(--color-on-surface-variant);
}
.media-hero-eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-lead-sm); /* typeschaal: 21 / 21 / 17 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-image);
}
.media-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* grote koppen: hoofdletters of niet is een merkwaarde (token text-case-heading). Zonder waarde blijven ze zoals geschreven.
   Alleen paginatitels en titels van secties en heroes; kaarttitels, labels en lopende tekst niet. */
.logo-hero-title,
.section-intro-title,
.statement-hero-title,
.feature-title,
.rule-statement-title,
.media-hero-title,
.word-hero-headline,
.steps-title,
.contact-card-title,
.contact-modal-title {
  text-transform: var(--text-case-heading, none);
}
/* de typografie van grote koppen volgt Penpot: daar horen kapitalen en regelafstand bij type-display-* en type-heading-1 */
.type-display-lg {
  text-transform: var(--text-case-heading, none);
}
.type-display-lg {
  line-height: var(--line-height-heading, var(--line-height-tight));
}
/* regelafstand van diezelfde koppen: een merk met kapitalen heeft een krappere regel nodig (token line-height-heading), anders blijft het line-height-tight */
.logo-hero-title,
.section-intro-title,
.statement-hero-title,
.feature-title,
.rule-statement-title,
.media-hero-title,
.steps-title,
.contact-card-title,
.contact-modal-title {
  line-height: var(--line-height-heading, var(--line-height-tight));
}

/* event-header: de bovenkant van een activiteit. Categorie en titel, daaronder een groot beeld met rechts een kaart
   met de feiten (datum en tijd, locatie, deelnemers) en de acties. Op desktop blijft de kaart staan tijdens het scrollen. */
.event-header {
  padding-block: var(--space-12) var(--space-16);
}
.event-eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-lead-sm); /* typeschaal: 21 / 21 / 17 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}

.event-body {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-8);
}

/* raster: tekst over 7 van de 12 kolommen, de kaart over de laatste 4; één kolom lucht ertussen */
@media (min-width: 1069px) {
  .event-body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-5);
    row-gap: var(--space-8);
  }
  .event-body > .event-content {
    grid-column: 1 / span 7;
    max-width: none;
  }
  .event-body > .event-session {
    grid-column: 9 / span 4;
  }
}
/* event-content: de tekst van een activiteit links naast de kaart:
   titel, korte regel, chips, een inleiding, daarna delen gescheiden door een lijn, met punten (icoon, vette titel, uitleg) */
.event-content {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  max-width: var(--layout-width-reading);
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-body); /* typeschaal: 17 */
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-type-body);
  color: var(--color-on-surface);
}
.event-content p {
  margin: 0;
}
.event-content .event-eyebrow {
  margin-bottom: calc(var(--space-2) * -1);
}
/* titel van de inhoud: rustig, in de tekstletter en halfvet, niet in kapitalen */
.event-content-title {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-headline-sm); /* typeschaal: 40 / 32 / 28 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-type-headline-sm);
  color: var(--color-heading);
}
.event-content-meta {
  font-size: var(--font-size-type-lead-md); /* typeschaal: 21 / 21 / 19 */
  line-height: var(--line-height-type-lead-md);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
}
.event-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* tag: klein (11 px), medium, grijze tekst op een licht vlak */
.event-chips li {
  padding: var(--space-05) var(--space-1);
  border-radius: var(--radius-xs);
  background: var(--color-surface-container-low);
  font-size: var(--font-size-type-caption); /* typeschaal: 12 */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
}
.event-content-lead {
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  color: var(--color-heading);
  text-wrap: pretty;
}
.event-content-label {
  margin-top: var(--space-2);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  color: var(--color-heading);
}
.event-content-label + .event-list {
  margin-top: calc(var(--space-2) * -1);
}
.event-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-left: var(--space-5);
}
.event-list li::marker {
  color: var(--color-on-surface-muted);
}
.event-content-part {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-8);
  border-top: var(--border-width-default) solid var(--color-outline-variant);
}
.event-content-sub {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-title-sm); /* typeschaal: 28 / 24 / 21 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-type-title-sm);
  color: var(--color-heading);
}
.event-content-note {
  color: var(--color-on-surface-variant);
}
.event-content a {
  color: var(--color-link);
}
.event-points {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.event-point {
  display: grid;
  grid-template-columns: var(--size-control-md) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

/* foto van een persoon in plaats van het icoon (sprekers, hosts): rond */
.event-point-photo {
  display: block;
  width: var(--size-control-md);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--color-media-placeholder);
}
.event-point-title {
  font-size: var(--font-size-type-body); /* typeschaal: 17 */
  line-height: var(--line-height-type-body);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  color: var(--color-heading);
}
.event-point-text {
  font-size: var(--font-size-type-body-sm); /* typeschaal: 14 */
  line-height: var(--line-height-type-body-sm);
  color: var(--color-on-surface-variant);
}
.event-point-quote {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface);
}
/* groepslabel binnen een deel (bijvoorbeeld Keynotes en Break-out sessie onder Sprekers): klein en grijs, met lucht erboven */
.event-content-group {
  font-size: var(--font-size-type-body); /* typeschaal: 17 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-type-body);
  color: var(--color-on-surface-muted);
}
.event-points + .event-content-group {
  margin-top: var(--space-4);
}
/* event-session: de kaart naast de tekst, eenvoudig: een omlijnd vak met datum (vet), tijd en plek,
   daaronder een korte regel in grijs, dan de knop met rechts een ronde deelknop. Op desktop blijft hij staan tijdens het scrollen. */
.event-session {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  align-self: start;
  font-family: var(--font-family-text);
}
.event-session p {
  margin: 0;
}
.event-session-box {
  display: grid;
  padding: var(--space-6) var(--space-8);
  border: var(--border-width-default) solid var(--color-outline);
  border-radius: var(--radius-control);
  font-size: var(--font-size-type-body); /* typeschaal: 17 */
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-type-body);
  color: var(--color-on-surface);
}
.event-session-date {
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  color: var(--color-heading);
}
.event-session-note {
  font-size: var(--font-size-type-body-sm); /* typeschaal: 14 */
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-muted);
}
.event-session-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (min-width: 1069px) {
  .event-session {
    position: sticky;
    top: calc(var(--size-control-lg) + var(--space-6));
  }
}
/* button-outline: wit met een rand, voor een tweede actie naast de hoofdknop */
.button-outline {
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  box-shadow: inset 0 0 0 var(--border-width-default) var(--color-on-surface);
}
.button-outline:hover {
  background: var(--color-surface-container-low);
}
/* in de sessiekaart zijn de knoppen rond en compact (36 px) */
.event-session-actions .button {
  min-height: var(--size-control-sm);
  padding-inline: var(--space-4);
  padding-top: var(--space-05);
  padding-bottom: 0;
  border-radius: var(--radius-button);
  font-size: var(--font-size-sm);
}
/* share-links: deelknoppen die op de plek van "Deel" verschijnen als je erop klikt */
.share-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.button[hidden] {
  display: none;
}
.share-links[hidden] {
  display: none;
}
.share-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-control-sm);
  padding: var(--space-05) var(--space-3) 0;
  box-sizing: border-box;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-lowest);
  box-shadow: inset 0 0 0 var(--border-width-default) var(--color-action-text);
  color: var(--color-action-text);
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-button, var(--font-weight-medium));
  line-height: var(--line-height-snug);
  text-decoration: none;
  white-space: nowrap;
}
/* hover: de knop vult zich met de kleur, de tekst wordt wit */
.share-link:hover {
  background: var(--color-action);
  color: var(--color-on-action);
}
.share-link:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-05);
}
.event-session-actions {
  flex-wrap: wrap;
}
/* event-session: twee vakken, eerst het festival (licht omlijnd), dan de sessie zelf, elk met een klein label erboven */
.event-session-label {
  font-size: var(--font-size-type-body-sm); /* typeschaal: 14 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-muted);
}
.event-session-box + .event-session-label {
  margin-top: var(--space-3);
}
.event-session-box-sub {
  border-color: var(--color-outline-variant);
}
/* host-card: de ambassadeur van een activiteit */
.host-card {
  display: grid;
  grid-template-columns: var(--size-control-lg) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--color-surface-container-low);
  font-family: var(--font-family-text);
}
.host-card p {
  margin: 0;
}
.host-card-photo {
  width: var(--size-control-lg);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  object-fit: cover;
}
.host-card-label {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-muted);
}
.host-card-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-heading);
}
.host-card-role {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
.button.host-card-action {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: var(--size-control-sm);
  padding-inline: var(--space-4);
  padding-top: var(--space-05);
  padding-bottom: 0;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
}
/* icoon als beeld (bijvoorbeeld een 3D-icoon van het merk) in plaats van het lijnicoon */
.event-point-icon3d {
  display: block;
  width: var(--size-control-md);
  aspect-ratio: 1;
  object-fit: contain;
}
/* voettekst van een site, opbouw: intro, kolommen met kopjes, onderregel */
.site-footer.ft {
  padding-block: var(--space-10) var(--space-8);
  border-top: 0;
  background: var(--color-footer);
  font-family: var(--font-family-text);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-footer-text);
}
.site-footer.ft .site-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
.ft p {
  margin: 0;
}
.ft a {
  color: var(--color-footer-text);
  text-decoration: none;
}
/* footer: 12 px, medium zoals de rest van de navigatie */
.site-footer.ft a {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium, 500);
}
.ft a:hover {
  color: var(--color-footer-heading);
  text-decoration: underline;
}
.ft-intro {
  max-width: none;
  padding-bottom: var(--space-5);
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  border-bottom: var(--border-width-default) solid var(--color-footer-line);
}
.ft-intro b {
  color: var(--color-footer-heading);
}
/* een mailadres of link in de intro is één lang woord: op een smal scherm mag het breken, anders schuift de pagina zijwaarts */
.ft-intro a {
  overflow-wrap: anywhere;
}
.ft-kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-6);
  /* een haarlijn boven de kolommen, binnen de kolombreedte: zo staat de voet los van de sectie erboven, ook als de grond gelijk is */
  padding-top: var(--space-8);
  border-top: var(--border-width-default) solid var(--color-footer-line);
}
.ft-kop {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-normal);
  color: var(--color-footer-heading);
}
.site-footer .ft-lijst {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-onder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-width-default) solid var(--color-footer-line);
}
.ft-juridisch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* footer: voetnoot bovenaan en de onderste regel in 12 px. Voetnoot gescheiden van de kolommen door een lijn */
.ft-voetnoot {
  padding-bottom: var(--space-1);
}
.ft-voetnoot p {
  max-width: none;
}
.ft-voetnoot p,
.ft-onder p,
.ft-onder a,
.ft-juridisch a {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: 1.33;
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  color: var(--color-footer-text);
}
/* event-card: een activiteit als kaart (opbouw zoals de festivalkaarten in het voorbeeld van de klant): vierkant beeld met status en soort als pillen,
   daaronder het logo van de organisator, titel, plaats en datum, een korte zin en thema-tags */
.event-card-grid {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8) var(--space-5);
  margin: 0;
  padding: 0;
}

@media (min-width: 735px) {
  .event-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1069px) {
  .event-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.event-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-4);
  font-family: var(--font-family-text);
}

.event-card-link {
  display: grid;
  gap: var(--space-4);
  color: inherit;
  text-decoration: none;
}
.event-card-media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-media-placeholder);
}
.event-card-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) ease;
}
.event-card-link:hover .event-card-media > img {
  transform: scale(var(--scale-hover));
}
.event-card-badges {
  position: absolute;
  z-index: 3;
  top: var(--space-3);
  left: var(--space-3);
  right: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.event-card-badges li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  white-space: nowrap;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-lowest);
  color: var(--color-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
}
.event-card-status::before {
  content: "";
  width: var(--space-2);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--color-on-surface-muted);
}
.event-card-status.is-open::before {
  background: var(--color-success);
}
.event-card-status.is-binnenkort::before {
  background: var(--color-warning);
}
.event-card-status.is-afgelopen::before {
  background: var(--color-action);
}
.event-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
/* logo van de organisator is optioneel: alleen dan een kolom ervoor */
.event-card-body:has(> .event-card-org) {
  grid-template-columns: var(--size-control-md) minmax(0, 1fr);
}
.event-card-org {
  width: var(--size-control-md);
  aspect-ratio: 1;
  padding: var(--space-2);
  box-sizing: border-box;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-lowest);
  box-shadow: inset 0 0 0 var(--border-width-default) var(--color-outline-subtle);
  object-fit: contain;
}
.event-card-body p {
  margin: 0;
}
/* plaats en datum mogen afbreken, anders lopen ze over de volgende kaart heen */
.event-card-meta span {
  white-space: normal;
}
.event-card-title {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-body); /* typeschaal: 17 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-heading);
  text-transform: none;
}
.event-card-link:hover .event-card-title {
  text-decoration: underline;
}
.event-card-meta {
  margin-top: var(--space-05);
  font-size: var(--font-size-type-body-sm); /* typeschaal: 14 */
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
}
.event-card-text {
  font-size: var(--font-size-type-body-sm); /* typeschaal: 14 */
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
}
.event-card-tags {
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.event-card-tags li {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface-container-low);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: var(--color-on-surface);
}
/* event-card-rail: de kaarten in één rij die zijwaarts schuift, met pijlen eronder (bediening.js).
   Zichtbaar: op mobiel één kaart met een stukje van de volgende, vanaf sm twee, vanaf lg vier */
.event-card-grid.event-card-rail {
  --kaarten: 1.2;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--kaarten) - 1) * var(--space-5)) / var(--kaarten));
}
.event-card-rail > .event-card {
  scroll-snap-align: start;
}
@media (min-width: 735px) {
  .event-card-grid.event-card-rail {
    --kaarten: 2;
  }
}
@media (min-width: 1069px) {
  .event-card-grid.event-card-rail {
    --kaarten: 4;
  }
}
/* is-large: voor een rail die de kern van de pagina is. Grotere kaarten: vanaf lg drie in beeld in plaats van vier */
@media (min-width: 1069px) {
  .event-card-grid.event-card-rail.is-large {
    --kaarten: 3;
  }
}
.site-inner .event-card-rail + .carousel-arrows {
  max-width: none;
  margin-top: var(--space-6);
  padding: 0;
}
/* staat de event-card-rail direct in een sectie (niet in site-inner), dan lijnt hij uit met de tekst erboven
   en loopt hij door tot de rand van het scherm, net als feature-card-rail */
.site-section > .event-card-rail {
  padding-inline: var(--rail-inset);
  scroll-padding-inline: var(--rail-inset);
}
.site-section > .event-card-rail + .carousel-arrows {
  margin-top: var(--space-6);
}
/* site-image: een plaat over de volle breedte van het scherm, onder een sectie-intro. Op mobiel hoger uitgesneden, zodat de mensen in beeld blijven.
   Staat de plaat onderaan de sectie, dan sluit hij de sectie af zonder witruimte eronder */
.site-image {
  margin: 0;
}
.site-image img {
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (min-width: 1069px) {
  .site-image img {
    aspect-ratio: 2 / 1;
  }
}
.site-section:has(> .site-image:last-child) {
  padding-bottom: 0;
}
/* media-gallery: grote platen in het midden met de buren half in beeld, oneindig doorlopend en vanzelf verder, met stippen en een pauzeknop eronder. Per plaat een korte tekst onderin, alleen bij de plaat die in het midden staat. Script: bediening.js */
.media-gallery {
  --slide: 86cqw;
  position: relative;
  container-type: inline-size;
}
@media (min-width: 1069px) {
  .media-gallery {
    --slide: min(86cqw, var(--layout-width-wide));
  }
}
.media-gallery-strip {
  position: relative;
  display: flex;
  gap: var(--space-5);
  margin: 0;
  padding: 0 calc((100% - var(--slide)) / 2);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.media-gallery-strip::-webkit-scrollbar {
  display: none;
}
.media-gallery-item {
  position: relative;
  flex: none;
  width: var(--slide);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-media-placeholder);
  scroll-snap-align: center;
}
@media (min-width: 1069px) {
  .media-gallery-item {
    aspect-ratio: 16 / 9;
  }
}
.media-gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.media-gallery-caption {
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-16) var(--space-6) var(--space-6);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-surface-inverse) 65%, transparent),
    transparent
  );
  color: var(--color-on-image);
  transition: opacity var(--duration-fast) ease;
}
.media-gallery-caption p {
  max-width: var(--measure-md);
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-normal);
}
.media-gallery-caption b {
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
}
@media (min-width: 1069px) {
  .media-gallery-caption {
    padding: var(--space-20) var(--space-10) var(--space-8);
  }
  .media-gallery-caption p {
    font-size: var(--font-size-lg);
  }
}
.media-gallery.is-actief .media-gallery-item:not(.is-current) .media-gallery-caption {
  opacity: 0;
}
/* media-gallery met een knop: knop en een regel met kenmerken naast elkaar onderin de plaat */
.media-gallery-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}
.media-gallery-meta {
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-image);
}
@media (min-width: 1069px) {
  .media-gallery-meta {
    font-size: var(--font-size-md);
  }
}
.media-gallery-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.media-gallery-dots {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  list-style: none;
  border-radius: var(--radius-full);
  /* zelfde rol als de pijlen onder een rij kaarten (carousel-arrow), zodat alle bediening de merkkleur volgt */
  background: var(--color-control-subtle);
}
.media-gallery-dots button {
  display: block;
  width: var(--space-2);
  height: var(--space-2);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-outline);
  cursor: pointer;
  transition:
    width var(--duration-fast) ease,
    background var(--duration-fast) ease;
}
.media-gallery-dots button[aria-current="true"] {
  width: var(--space-6);
  background: var(--color-on-surface);
}
.media-gallery-play {
  display: grid;
  place-items: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-control-subtle);
  color: var(--color-on-surface);
  cursor: pointer;
}
.media-gallery-play:hover {
  background: var(--color-control-subtle-hover);
}
.media-gallery-play svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}
.media-gallery :is(button):focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-05);
}
.site-section > .media-gallery {
  margin-top: 0;
}
/* media-gallery is-content-width: platen precies zo breed als de inhoud en 650 hoog bij een scherm van 1440 (1260 x 650),
   Op mobiel blijft alles zoals bij een gewone media-gallery */
@media (min-width: 1069px) {
  .media-gallery.is-content-width {
    --slide: min(
      calc(100cqw - 2 * var(--layout-margin)),
      var(--layout-width-content)
    );
  }
  .media-gallery.is-content-width .media-gallery-item {
    aspect-ratio: 1260 / 650;
  }
}
/* feature-card: een kaart met een klein label, een grote zin en onderin een beeld, met een rond plusje rechtsonder. De hele kaart is een link.
   In een feature-card-rail schuiven de kaarten zijwaarts met pijlen eronder (bediening.js); de sectie ligt op de lichte grond */
/* site-section-tinted: de getinte grond. Secties wisselen af tussen de paginagrond en deze grond; een plaat over de volle breedte telt als scheiding.
   Kaarten die zelf de lichte grond hebben, worden op de getinte grond wit zodat ze zichtbaar blijven */
.site-section-tinted {
  background: var(--color-primary-container);
}
.site-section-tinted .quote-card {
  background: var(--color-surface-container-lowest);
}
.feature-card-rail {
  display: flex;
  gap: var(--space-5);
  margin: 0;
  padding: 0 var(--rail-inset);
  scroll-padding-inline: var(--rail-inset);
  list-style: none;
}
.feature-card-rail + .carousel-arrows {
  margin-top: var(--space-6);
}
.feature-card {
  flex: none;
  width: var(--size-feature-card-width-sm);
  height: var(--size-feature-card-height);
  scroll-snap-align: start;
}
@media (min-width: 735px) {
  .feature-card {
    width: var(--size-feature-card-width);
  }
}
/* feature-card is-wide: een brede kaart in de rij ('Hardware and software that work as one').
   Ongeveer twee keer zo breed als een gewone kaart; de zin blijft even smal als op een gewone kaart */
.feature-card.is-wide {
  width: min(calc(var(--size-feature-card-width-sm) * 1.85), calc(100vw - 2 * var(--layout-gutter-mobile)));
}
@media (min-width: 735px) {
  .feature-card.is-wide {
    width: calc(var(--size-feature-card-width) * 1.871); /* 696px op desktop */
  }
}
.feature-card.is-wide .feature-card-title,
.feature-card.is-wide .feature-card-desc {
  max-width: calc(var(--size-feature-card-width) - var(--space-16));
}
.feature-card-link {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-surface-container-lowest);
  color: inherit;
  text-decoration: none;
  font-family: var(--font-family-text);
}
/* feature-cards op een witte sectie: de kaart krijgt de lichte grond, zodat hij zichtbaar blijft */
.site-section:not(.site-section-tinted) .feature-card-link {
  background: var(--color-surface-dim);
}
.feature-card-text {
  display: grid;
  gap: var(--space-3);
  /* zoals de feature cards: 32 / 28 / 24 rondom */
  padding: var(--space-8) var(--space-8) var(--space-6);
}
@media (max-width: 1068px) {
  .feature-card-text {
    padding: calc(var(--space-unit) * 7) calc(var(--space-unit) * 7) var(--space-6);
  }
}
@media (max-width: 734px) {
  .feature-card-text {
    padding: var(--space-6);
  }
  .feature-card-text .feature-card-label {
    font-size: var(--font-size-type-body-sm); /* 17 / 17 / 14 */
  }
}
.feature-card-label {
  margin: 0;
  font-size: var(--font-size-type-body);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-heading);
}
.feature-card-title {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-title-sm); /* typeschaal: 28 / 24 / 21 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-type-title-sm);
  color: var(--color-heading);
  text-transform: none;
  text-wrap: pretty;
}
.feature-card-desc {
  margin: 0;
  font-size: var(--font-size-type-body-sm); /* typeschaal: 14 */
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-normal);
  color: var(--color-on-surface);
  text-wrap: pretty;
}
.feature-card-media {
  grid-row: 2;
  min-height: 0;
  margin: 0;
}
.feature-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* feature-card met een vrijstaande illustratie (witte grond) in plaats van een foto: niet afsnijden, met lucht eromheen, zoals een productbeeld */
/* illustraties staan met hun onderkant op één lijn, op dezelfde afstand van de rand als de tekst */
.feature-card-media.is-illustration img {
  object-fit: contain;
  object-position: center bottom;
  padding: 0 var(--space-8) var(--space-8);
  box-sizing: border-box;
  mix-blend-mode: multiply;
}
/* opent de kaart een venster (button), dan oogt hij als dezelfde kaart */
button.feature-card-link {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
button.promo-card-link {
  width: 100%;
  margin: 0;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  justify-content: flex-start;
}
/* feature-card-rail is-cover: de foto vult de hele kaart, de tekst staat er wit bovenop met een zachte schaduw van boven */
/* flex en niet block: een button zet zijn inhoud anders in het midden in plaats van bovenaan */
.feature-card-rail.is-cover .feature-card-link {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--color-scrim);
  color: var(--color-on-image);
}
.feature-card-rail.is-cover .feature-card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.feature-card-rail.is-cover .feature-card-media img {
  transition: transform var(--duration-slow) ease;
}
.feature-card-rail.is-cover .feature-card-link:hover .feature-card-media img {
  transform: scale(var(--scale-hover));
}
.feature-card-rail.is-cover .feature-card-text {
  position: relative;
  z-index: 1;
  padding-bottom: var(--space-24);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-scrim) 75%, transparent),
    color-mix(in srgb, var(--color-scrim) 45%, transparent) 60%,
    transparent
  );
}
.feature-card-rail.is-cover .feature-card-label,
.feature-card-rail.is-cover .feature-card-title,
.feature-card-rail.is-cover .feature-card-desc {
  color: var(--color-on-image);
}
.feature-card-rail.is-cover .feature-card-plus {
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .feature-card-rail.is-cover .feature-card-media img {
    transition: none;
  }
}
.feature-card-plus {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  display: grid;
  place-items: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  border-radius: var(--radius-full);
  background: var(--color-control-strong);
  color: var(--color-on-control-strong);
  transition:
    transform var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
}
.feature-card-plus svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}
.feature-card-link:hover .feature-card-plus {
  transform: scale(1.1);
  background: var(--color-control-strong-hover);
}
.feature-card-link:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-05);
}
@media (prefers-reduced-motion: reduce) {
  .feature-card-plus {
    transition: none;
  }
}
/* promo-cards: twee grote kaarten naast elkaar met een grote zin. De eerste op een verloop in de merkkleuren met een beeld onderin,
   de tweede wit met de zin in het verloop en daaronder een rij logo's in één kleur. Rechtsonder een rond plusje. Op mobiel onder elkaar */
.promo-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1069px) {
  .promo-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.promo-card-link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-height: 100%;
  aspect-ratio: 4 / 5;
  box-sizing: border-box;
  padding: var(--space-10) var(--space-6) var(--space-16);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-surface-container-lowest);
  color: var(--color-heading);
  text-decoration: none;
  font-family: var(--font-family-text);
}
.promo-card.is-accent .promo-card-link {
  background: linear-gradient(160deg, var(--color-accent), var(--color-action));
  color: var(--color-on-image);
}
.promo-card-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-card-title-lg);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-heading, var(--line-height-tight));
  text-transform: var(--text-case-heading, none);
  text-wrap: balance;
  overflow-wrap: break-word;
  color: inherit;
}
.promo-card:not(.is-accent) .promo-card-title {
  color: var(--color-heading);
}
@media (min-width: 735px) {
  .promo-card-link {
    padding: var(--space-12) var(--space-10) var(--space-16);
  }
}
.promo-card-media {
  display: block;
  width: 50%;
  max-width: none;
  margin: auto auto 0;
  object-fit: contain;
}
.promo-card-note {
  margin: auto 0 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-muted);
  text-align: center;
}
.promo-card-plus {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-6);
  display: grid;
  place-items: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  border-radius: var(--radius-full);
  background: var(--color-control-strong);
  color: var(--color-on-control-strong);
  transition:
    transform var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
}
.promo-card.is-accent .promo-card-plus {
  background: var(--color-surface-container-lowest);
  color: var(--color-action-text);
}
.promo-card-plus svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}
.promo-card-link:hover .promo-card-plus {
  transform: scale(1.1);
}
.promo-card-link:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-05);
}
@media (prefers-reduced-motion: reduce) {
  .promo-card-plus {
    transition: none;
  }
}
/* logo-grid: logo's van partners in één kleur (de kleur van de koppen), optisch even groot: elk logo krijgt hetzelfde oppervlak via zijn verhouding (--ratio).
   Het logo is een masker, zodat de kleur uit een token komt */
.logo-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.logo-grid-item {
  display: block;
  height: calc(var(--size-logo-mark) / sqrt(var(--ratio, 1)));
  aspect-ratio: var(--ratio, 1);
  background: var(--color-heading);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
/* closing-cta: rustige afsluiter onderaan een pagina, gecentreerd: een korte vraag, één zin wie je helpt en één knop naar een mens */
.closing-cta {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  text-align: center;
  font-family: var(--font-family-text);
}
.closing-cta-title {
  margin: var(--space-4) 0 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-heading, var(--line-height-tight));
  text-transform: var(--text-case-heading, none);
  text-wrap: balance;
  color: var(--color-heading);
}
/* het gezicht van wie je helpt: rond, met een ring in de actiekleur */
.closing-cta-photo {
  display: block;
  width: var(--size-logo-tile);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  object-fit: cover;
  box-shadow:
    0 0 0 var(--space-1) var(--color-surface-container-lowest),
    0 0 0 calc(var(--space-1) + var(--border-width-strong)) var(--color-action);
}
.closing-cta-text {
  max-width: var(--layout-width-reading);
  margin: 0;
  font-size: var(--font-size-section-lead);
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
/* de knop is zo breed als zijn tekst */
.closing-cta .button {
  margin-top: var(--space-4);
}
/* value-grid: drie redenen naast elkaar, gecentreerd, elk met een 3D-icoon, een korte vette kop en een zin in grijs. Op mobiel onder elkaar */
.value-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12) var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  font-family: var(--font-family-text);
}
@media (min-width: 1069px) {
  .value-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.value-item {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-2);
}
.value-icon {
  display: block;
  width: var(--size-illustration-sm);
  aspect-ratio: 1;
  margin-bottom: var(--space-4);
  object-fit: contain;
}
.value-title {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  text-transform: none;
  color: var(--color-heading);
}
.value-text {
  max-width: var(--measure-sm);
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
}
/* stat-card: een cijfer als beeld. Een hoge kaart in een merkkleur of op een foto, met het cijfer groot in het midden
   en één zin onderin. Onder de kaart een korte uitleg: eerst vet, dan grijs. Varianten: is-photo, is-dark, is-brand */
.stat-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-family-text);
}
@media (min-width: 1069px) {
  .stat-card-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
.stat-card {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  margin: 0;
}
.stat-card-visual {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  aspect-ratio: 4 / 3;
  padding: var(--space-8);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-cover-shadow);
  color: var(--color-cover-title);
  text-align: center;
  isolation: isolate;
}
@media (min-width: 1069px) {
  .stat-card-visual {
    aspect-ratio: 7 / 10;
  }
}
.stat-card.is-brand .stat-card-visual {
  background: linear-gradient(
    160deg,
    var(--color-cover-1),
    var(--color-cover-2)
  );
}
.stat-card.is-dark .stat-card-visual {
  background: var(--color-scrim);
}
.stat-card-visual > img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: grayscale(1) brightness(1.2) contrast(1.1);
  mix-blend-mode: luminosity;
  opacity: 0.45;
}
.stat-card-number {
  align-self: center;
  font-family: var(--font-family-display);
  font-size: var(--font-size-7xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-solid, var(--line-height-none));
}
.stat-card-line {
  max-width: 16ch;
  margin: 0;
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  text-wrap: balance;
}
.stat-card-caption {
  margin: 0;
  padding-inline: var(--space-4);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
  text-wrap: pretty;
}
.stat-card-caption b {
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  color: var(--color-heading);
}
/* stat-grid: grote kale cijfers met één regel eronder, naast elkaar en gecentreerd */
.stat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10) var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
@media (min-width: 735px) {
  .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.stat-value {
  display: block;
  font-family: var(--font-family-display);
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-none);
  color: var(--color-action-text);
}
.stat-label {
  display: block;
  max-width: 24ch;
  margin: var(--space-3) auto 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
@media (min-width: 1069px) {
  .stat-value {
    font-size: var(--font-size-7xl);
  }
}
/* quote-card: één zin van een deelnemer met foto, naam en rol eronder */
.quote-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1069px) {
  .quote-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.quote-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  margin: 0;
  padding: var(--space-8);
  border-radius: var(--radius-card);
  background: var(--color-surface-dim);
  font-family: var(--font-family-text);
}
.quote-card blockquote {
  margin: 0;
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-heading);
  text-wrap: pretty;
}
.quote-card figcaption {
  display: grid;
  grid-template-columns: var(--size-control-md) minmax(0, 1fr);
  gap: 0 var(--space-3);
  align-items: center;
}
.quote-card-photo {
  grid-row: span 2;
  width: var(--size-control-md);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--color-media-placeholder);
}
.quote-card-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-heading);
}
.quote-card-role {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
/* logo-strip: een smalle rij partnerlogo's direct onder de hero, klein en in de gedempte tekstkleur, met een kort label ervoor */
/* direct onder een media-hero: de hero houdt onder de kaart space-10 vrij; samen met space-10 hier staat de rij met gelijke ruimte boven en onder (space-20) */
.logo-strip {
  padding-block: var(--space-10) var(--space-20);
}
.logo-strip .site-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4) var(--space-10);
}
.logo-strip-label {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-muted);
}
.logo-strip .logo-grid {
  justify-content: center;
  gap: var(--space-6) var(--space-10);
}
.logo-strip .logo-grid-item {
  background: var(--color-on-surface-muted);
}
/* value-grid is-cards: elk item als kaart volgens de regels van feature-card: zelfde hoogte, zelfde letters,
   het beeld bovenin op een vaste hoogte, zodat de tekst in elke kaart op dezelfde hoogte begint. Links uitgelijnd. Voor een gekleurde sectie */
.value-grid.is-cards {
  gap: var(--space-5);
  text-align: left;
}
.value-grid.is-cards .value-item {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: stretch;
  gap: 0;
  height: var(--size-feature-card-height);
  border-radius: var(--radius-card);
  background: var(--color-surface-container-lowest);
  overflow: hidden;
}
.value-grid.is-cards .value-body {
  grid-row: 2;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-8) var(--space-8);
}
.value-grid.is-cards .value-step {
  display: block;
  width: auto;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
  background: none;
  color: var(--color-heading);
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
}
.value-grid.is-cards .value-title {
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  text-wrap: pretty;
}
/* naast elkaar krijgt elke kop ruimte voor twee regels, zodat de tekstjes eronder allemaal op dezelfde hoogte beginnen */
@media (min-width: 1069px) {
  .value-grid.is-cards .value-title {
    min-height: calc(2lh);
  }
}
.value-grid.is-cards .value-text {
  max-width: none;
  font-size: var(--font-size-card-text);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface);
  text-wrap: pretty;
}
.value-grid.is-cards .value-media {
  grid-row: 1;
  margin: 0;
  padding: var(--space-8) var(--space-8) 0;
}
.value-grid.is-cards .value-media img {
  display: block;
  width: 100%;
  height: calc(var(--space-32) + var(--space-8));
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
}
/* value-grid met stappen: de stappen naast elkaar, elk met een nummer in een rondje in de actiekleur in plaats van een icoon */
/* stappen staan naast elkaar in zoveel kolommen als er stappen zijn, zodat drie of vier stappen allebei gecentreerd staan */
@media (min-width: 1069px) {
  .value-grid.is-steps {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
.value-step {
  display: grid;
  place-items: center;
  width: var(--size-control-md);
  aspect-ratio: 1;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-action);
  color: var(--color-on-action);
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-none);
}
/* button-outline-action: de tweede knop naast de hoofdknop, als omlijnde pil in de actiekleur op een transparante grond; bij hover vult hij zich */
.button-outline-action {
  background: transparent;
  color: var(--color-action-text);
  box-shadow: inset 0 0 0 var(--border-width-default) var(--color-action-text);
}
.button-outline-action:hover {
  background: var(--color-action);
  color: var(--color-on-action);
}
/* op een foto is de actiekleur te zwak: daar wordt de omlijnde knop wit, en bij hover wit gevuld */
.media-hero .button-outline-action {
  color: var(--color-on-image);
  box-shadow: inset 0 0 0 var(--border-width-default) var(--color-on-image);
}
.media-hero .button-outline-action:hover {
  background: var(--color-on-image);
  color: var(--color-heading);
}
/* info-modal: het venster achter het plusje van een kaart. Zelfde venster als contact-modal (dialog, wazige achtergrond, sluitknop),
   maar links uitgelijnd: label, grote kop, beeld, alinea's met een vette opening en onderaan de acties */
/* het venster past altijd in zijn geheel in beeld: het vel is nooit hoger dan het scherm,
   het beeld krimpt mee en pas als ook dat niet genoeg is scrolt het vel zelf */
.info-modal[open] {
  display: grid;
  place-items: center;
}
.info-modal .contact-modal-sheet {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--layout-width-reading);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-12) var(--space-6) var(--space-10);
  text-align: left;
  font-family: var(--font-family-text);
}
@media (min-width: 735px) {
  .info-modal .contact-modal-sheet {
    padding: var(--space-16) var(--space-16) var(--space-12);
  }
}
.info-modal-label {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-heading);
}
.info-modal-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-card-title-lg);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-heading, var(--line-height-tight));
  text-transform: var(--text-case-heading, none);
  text-wrap: balance;
  color: var(--color-heading);
}
.info-modal-media {
  flex: 0 1 auto;
  min-height: var(--space-24);
  aspect-ratio: 3 / 2;
  margin: var(--space-6) 0;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.info-modal-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.info-modal-media.is-illustration img {
  object-fit: contain;
}
/* een lege beeldplek vult het hele kader, met een icoon en een woord in het midden */
.info-modal-media .media-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
}
.info-modal-media .media-placeholder svg {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
}
/* zonder beeld krijgt de tekst dezelfde ruimte onder de kop */
.info-modal-title + .info-modal-body {
  margin-top: var(--space-6);
}
.info-modal-body {
  display: grid;
  gap: var(--space-4);
}
.info-modal-body p {
  margin: 0;
  font-size: var(--font-size-card-text);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
}
.info-modal-body b {
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  color: var(--color-heading);
}
.info-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
}
/* event-card-cover: de kaartfoto als cover, in de merkkleuren uit laag 2.
   is-duotone  de foto als kleurverloop: schaduw in één donkere kleur, licht in een verloop van twee merkkleuren
   is-gradient geen foto, alleen het verloop met een woord
   is-tone-b, -c, -d wisselen het verloop af (standaard kleur 1 naar 2), zodat een rij kaarten niet eentonig wordt.
   Een titel, het formatnaampje en de datum liggen eroverheen. */
.event-card-media.is-duotone,
.event-card-media.is-gradient {
  --van: var(--color-cover-1);
  --naar: var(--color-cover-2);
  isolation: isolate;
  background: linear-gradient(160deg, var(--van), var(--naar));
}
.event-card-media.is-tone-b {
  --van: var(--color-cover-2);
  --naar: var(--color-cover-3);
}
.event-card-media.is-tone-c {
  --van: var(--color-cover-3);
  --naar: var(--color-cover-1);
}
.event-card-media.is-tone-d {
  --van: var(--color-cover-1);
  --naar: var(--color-cover-3);
}
.event-card-media.is-duotone > img {
  filter: grayscale(1) brightness(1.35) contrast(1.1);
  mix-blend-mode: multiply;
}
.event-card-media.is-duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-cover-shadow);
  mix-blend-mode: lighten;
  pointer-events: none;
}
.event-card-cover-title {
  position: absolute;
  z-index: 2;
  left: var(--space-5);
  right: var(--space-5);
  bottom: var(--space-5);
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-type-headline-sm); /* typeschaal: 40 / 32 / 28 */
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-heading, var(--line-height-tight));
  text-transform: var(--text-case-heading, none);
  text-wrap: balance;
  color: var(--color-cover-title);
}
.event-card-cover-kicker {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-body-sm); /* typeschaal: 14 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  text-transform: none;
  letter-spacing: var(--letter-spacing-text, normal);
}
/* event-card-date: kalenderblokje linksboven op de cover van een evenement: donker glas, maand gewoon, dag vet */
.event-card-date {
  position: absolute;
  z-index: 3;
  top: var(--space-4);
  left: var(--space-4);
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  min-width: var(--space-16);
  padding: var(--space-3) var(--space-4);
  box-sizing: border-box;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--color-scrim) calc(var(--opacity-glass) * 100%), transparent);
  -webkit-backdrop-filter: blur(var(--space-3));
  backdrop-filter: blur(var(--space-3));
  color: var(--color-cover-title);
  font-family: var(--font-family-text);
  line-height: var(--line-height-none);
}
.event-card-date-month {
  font-size: var(--font-size-type-body); /* typeschaal: 17 */
  font-weight: var(--font-weight-text, var(--font-weight-regular));
}
.event-card-date-day {
  font-size: var(--font-size-type-lead-lg); /* typeschaal: 24 / 21 / 19 */
  font-weight: var(--font-weight-bold);
}
/* staat de status onder de kaart, dan is het een eigen regel met een bolletje */
.event-card-meta .event-card-status {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-05);
  white-space: nowrap;
}
/* het naampje van het format rechtsboven op een cover (ENERGY BOOSTER, BREAKOUT BOOSTER), gestapeld zoals het woordmerk.
   bediening.js maakt de regels even breed, zodat het één blok is */
.event-card-cover-mark {
  position: absolute;
  z-index: 2;
  top: var(--space-4);
  right: var(--space-4);
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-card-title-sm);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-solid);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--color-cover-title);
}
.event-card-cover-mark span {
  display: block;
  width: max-content;
}
/* reason-card: het verschil. Een rij kleine kaarten met pijlen (feature-card-rail),
   per kaart een icoon en één zin waarvan het begin vet in de actiekleur staat */
.reason-card {
  flex: none;
  display: grid;
  align-content: start;
  gap: var(--space-5);
  min-height: calc(var(--space-32) * 2);
  width: var(--size-feature-card-width-sm);
  box-sizing: border-box;
  margin-block: var(--space-6);
  padding: var(--space-8);
  border-radius: var(--radius-card);
  background: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-raised);
  scroll-snap-align: start;
  transition:
    transform var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
}
.reason-card:hover {
  transform: scale(1.01);
  box-shadow: 0 var(--space-2) var(--space-8) color-mix(in srgb, var(--color-shadow) 16%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .reason-card {
    transition: none;
  }
  .reason-card:hover {
    transform: none;
  }
}
.reason-card-icon {
  display: block;
  width: auto;
  height: var(--space-16);
  max-width: var(--space-24);
  object-fit: contain;
  object-position: left bottom;
}
.reason-card-text {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-lead-lg); /* typeschaal: 24 / 21 / 19 */
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-snug);
  color: var(--color-heading);
  text-wrap: pretty;
}
.reason-card-text b {
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  color: var(--color-action-text);
}
/* reason-grid: de reason-cards vast naast elkaar, zonder pijlen. Op mobiel onder elkaar, vanaf sm twee, vanaf lg vier */
.reason-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 735px) {
  .reason-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1069px) {
  .reason-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.reason-grid .reason-card {
  width: auto;
}
/* reason-card met een cijfer in plaats van een icoon, en een slotkaart in de merkkleur die twee kolommen breed is */
.reason-card-number {
  display: block;
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-solid, var(--line-height-none));
  color: var(--color-action-text);
}
.reason-card.is-accent {
  align-content: end;
  background: linear-gradient(
    160deg,
    var(--color-cover-1),
    var(--color-cover-2)
  );
}
.reason-card.is-accent .reason-card-number,
.reason-card.is-accent .reason-card-text,
.reason-card.is-accent .reason-card-text b {
  color: var(--color-cover-title);
}
.reason-card.is-accent .reason-card-text {
  font-family: var(--font-family-display);
  font-size: var(--font-size-card-title-lg);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-heading, var(--line-height-tight));
  text-transform: var(--text-case-heading, none);
  text-wrap: balance;
}
@media (min-width: 735px) {
  .reason-grid .reason-card.is-wide {
    grid-column: span 2;
  }
}
/* kop in twee tonen: eerst de bewering in de kopkleur, dan een aanvulling in grijs, in dezelfde regel */
.section-intro-title .is-muted {
  color: var(--color-heading);
}
.section-intro-title .is-accent {
  color: var(--color-heading);
}
.reason-card-title.is-accent {
  color: var(--color-heading);
}
/* reason-grid is-feature: Een grote kaart links over twee rijen, daarnaast zes kleine in een raster van 3 x 2.
   Kaarten in de getinte vlakkleur, icoon bovenin, één zin waarvan een deel in de actiekleur staat */
.site-section .section-intro-title.is-compact,
.section-intro-title.is-compact {
  font-size: var(--font-size-card-title-lg);
  text-wrap: pretty;
}
.reason-grid.is-feature .reason-card {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: var(--space-8); /* gelijk aan de feature cards: 32 / 28 / 24 */
  background: var(--color-primary-container);
  box-shadow: none;
}
.reason-grid.is-feature .reason-card-text {
  font-size: var(--font-size-type-body); /* typeschaal: 17 */
  line-height: var(--line-height-type-body);
}
@media (max-width: 1068px) {
  .reason-grid.is-feature .reason-card {
    padding: calc(var(--space-unit) * 7);
  }
}
@media (max-width: 734px) {
  .reason-grid.is-feature .reason-card {
    padding: var(--space-6);
  }
}
.reason-grid.is-feature .reason-card-icon {
  height: var(--space-12);
}
.reason-card.is-lead {
  grid-template-rows: auto auto auto 1fr;
  gap: var(--space-3);
}
.reason-card-label {
  margin: 0;
  font-size: var(--font-size-type-caption); /* typeschaal: 12 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-action-text);
}
.reason-card-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-type-title-sm); /* typeschaal: 28 / 24 / 21 */
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-heading, var(--line-height-tight));
  text-transform: var(--text-case-heading, none);
  text-wrap: balance;
  color: var(--color-heading);
}
.reason-card-lead-text {
  margin: 0;
  font-size: var(--font-size-type-body); /* typeschaal: 17 */
  line-height: var(--line-height-normal);
  color: var(--color-on-surface);
}
.reason-card-media {
  align-self: end;
  margin: var(--space-6) 0 0;
  min-height: 0;
}
.reason-card-media img {
  display: block;
  width: 100%;
  max-height: calc(var(--space-32) * 2);
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: multiply;
}
@media (min-width: 735px) {
  .reason-grid.is-feature {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .reason-grid.is-feature .reason-card {
    min-height: calc(var(--space-32) * 2);
  }
  .reason-card.is-lead {
    grid-column: span 2;
  }
}
@media (min-width: 1069px) {
  .reason-grid.is-feature {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* raster: 4 x 3 kolommen */
  }
  .reason-card.is-lead {
    grid-column: auto;
    grid-row: span 2;
  }
}
/* link achter de intro van een sectie, zoals "Bekijk alle initiatieven ›" */
.section-intro-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-05);
  color: var(--color-action-text);
  text-decoration: none;
  white-space: nowrap;
}
.section-intro-link:hover {
  text-decoration: underline;
}
.section-intro-link svg {
  width: 0.8em;
  height: 0.8em;
}
@media (prefers-reduced-motion: reduce) {
  .event-card-media > img {
    transition: none;
  }
}
/* sectiekop op een site: één maat voor elke sectie (rol font-size-section-title), de intro daaronder in de leesbreedte */
.site-section .section-intro-title {
  font-size: var(--font-size-section-title);
}
.site-section .section-intro-lead {
  max-width: var(--layout-width-reading);
  font-size: var(--font-size-section-lead);
}
.site-section > .site-inner > .section-intro {
  max-width: none;
}
/* globale balk op een site: licht. Logo links, links in het midden, rechts inloggen en één knop.
   Onder 1200 px zit alles in het uitklapmenu (anders is er te weinig ruimte). De maten van de menuknop zijn die van de gids. In de gids blijft de balk donker. */
/* globale balk in dezelfde doorschijnende tint als de lokale balk, zodat ze bovenaan precies gelijk zijn */
body.site .gn {
  background: color-mix(
    in srgb,
    var(--color-nav-global) calc(var(--opacity-nav-local, 0.82) * 100%),
    transparent
  );
  color: var(--color-on-surface);
}
body.site .gn-merk {
  color: var(--color-on-surface);
}
body.site .gn-logo {
  height: var(--space-6);
}
body.site .gn-lijst a,
body.site .gn-login {
  color: var(--color-on-surface);
  text-decoration: none;
}
body.site .gn-lijst a:hover {
  color: var(--color-heading);
}
body.site .gn-knop span {
  background: var(--color-on-surface);
}
body.site .gn-acties {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
body.site .gn-acties .button {
  white-space: nowrap;
}
body.site .gn-login {
  font-family: var(--font-family-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-loose);
  white-space: nowrap;
}
/* ribbon: smalle mededelingsbalk boven de globale balk, tekst in het midden met een link */
.ribbon {
  overflow: hidden;
}
.ribbon-bar {
  background: var(--color-ribbon);
  color: var(--color-on-surface);
}
/* intro: de balk wacht boven de rand, valt na de opening naar beneden in de actiekleur en verkleurt daarna naar zijn gewone kleur */
.ribbon.is-wacht .ribbon-bar {
  transform: translateY(-100%);
}
.ribbon.is-intro .ribbon-bar {
  animation:
    ribbon-val var(--duration-ribbon-val) ease-in-out both,
    ribbon-kleur var(--duration-ribbon-kleur) ease-in-out var(--duration-ribbon-wacht) both;
}
.ribbon.is-intro .ribbon-link {
  animation: ribbon-link-kleur var(--duration-ribbon-kleur) ease-in-out var(--duration-ribbon-wacht) both;
}
@keyframes ribbon-val {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: none;
  }
}
@keyframes ribbon-kleur {
  from {
    background-color: var(--color-action);
    color: var(--color-on-action);
  }
  to {
    background-color: var(--color-ribbon);
    color: var(--color-on-surface);
  }
}
@keyframes ribbon-link-kleur {
  from {
    color: var(--color-on-action);
  }
  to {
    color: var(--color-action-text);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ribbon.is-wacht .ribbon-bar {
    transform: none;
  }
  .ribbon.is-intro .ribbon-bar,
  .ribbon.is-intro .ribbon-link {
    animation: none;
  }
}
.ribbon-text {
  margin: 0 auto;
  max-width: var(--layout-container);
  padding: var(--space-3) var(--layout-gutter-mobile);
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-snug);
  text-align: center;
}
.ribbon-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-05);
  color: var(--color-action-text);
  text-decoration: none;
  white-space: nowrap;
}
.ribbon-link svg {
  flex: none;
  width: 1em;
  height: 1em;
}
/* ribbon in een logo-hero: ligt bovenop de foto en valt er bij de intro overheen */
.logo-hero:has(> .ribbon) {
  position: relative;
}
.logo-hero > .ribbon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.ribbon-link:hover {
  text-decoration: underline;
}

/* logo-hero: gecentreerde opening met een logo op een tegel, optioneel label (naam bij het logo, in de accentkleur), grote kop en een knop */

/* bovenaan een pagina vult de logo-hero de rest van het scherm (de hoogte zet bediening.js), de inhoud staat in het midden */
.logo-hero {
  padding: var(--space-16) 0 var(--space-12);
  text-align: center;
  display: grid;
  align-content: center;
  min-height: var(--logo-hero-hoogte, auto);
  box-sizing: border-box;
}
.logo-hero-tile {
  display: grid;
  place-items: center;
  width: var(--size-logo-tile);
  aspect-ratio: 1;
  margin: 0 auto var(--space-4);
  padding: var(--space-3);
  box-sizing: border-box;
  border-radius: var(--radius-xl);
  background: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-raised);
}
.logo-hero-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.logo-hero-label {
  margin: 0 auto var(--space-6);
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-lead-sm); /* typeschaal: 21 / 21 / 17, gelijk aan de kleine kop van de media hero */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-accent);
}
.logo-hero-title {
  margin: 0 auto;
  max-width: var(--layout-width-content);
  font-family: var(--font-family-display);
  font-size: var(--font-size-type-display-md); /* typeschaal: 72 / 56 / 40; twee lange regels, daarom een stap onder de andere heroes */
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-heading, var(--line-height-type-display-md));
  color: var(--color-heading);
  text-wrap: balance;
}
.logo-hero-title span {
  display: block;
}
/* de kop van een logo-hero mag breder dan de tekstkolom, zodat elke regel van de kop op één regel past */
.logo-hero > .site-inner {
  max-width: var(--layout-container); /* raster: de volle inhoudsbreedte binnen de marges */
}
.logo-hero-title {
  max-width: none;
}
.logo-hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
}
@media (min-width: 1069px) {
  .logo-hero {
    padding-top: var(--space-20);
  }
}
/* logo-hero met beeld: een foto over de hele sectie, met de gewone beeldoverlay; tekst wordt licht */
.logo-hero:has(.logo-hero-media) {
  position: relative;
  overflow: hidden;
  color: var(--color-on-image);
}
.logo-hero:has(.logo-hero-media)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-scrim-hero);
}
.logo-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo-hero:has(.logo-hero-media) > .site-inner {
  position: relative;
  z-index: 1;
}
.logo-hero:has(.logo-hero-media) .logo-hero-title,
.logo-hero:has(.logo-hero-media) .logo-hero-label {
  color: var(--color-on-image);
}

/* gn-actie: de ene actie in de globale balk als rode tekstlink met een plusteken ervoor */
body.site .gn-actie {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-action-text);
  font-family: var(--font-family-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-loose);
  text-decoration: none;
  white-space: nowrap;
}
body.site .gn-actie:hover {
  color: var(--color-action-hover);
}
body.site .gn-actie svg {
  flex: none;
  width: 1em;
  height: 1em;
}
@media (min-width: 1200px) {
  body.site .gn-in {
    display: grid;
    /* logo en knoppen op hun eigen breedte, het menu in het midden van de ruimte daartussen */
    grid-template-columns: auto minmax(0, 1fr) auto;
    max-width: var(--layout-container); /* zelfde breedte als de inhoud */
    height: var(--size-nav-height); /* 44 px */
  }
  body.site .gn-merk {
    justify-self: start;
  }
  body.site .gn-menu {
    display: contents;
  }
  body.site .gn-lijst {
    justify-self: center;
    margin: 0;
    gap: var(--space-6);
  }
  body.site .gn-lijst a {
    padding: 0;
  }
  body.site .gn-acties {
    justify-self: end;
  }
}
@media (max-width: 1199px) {
  body.site .gn-in {
    position: relative;
  }
  body.site .gn-knop {
    display: grid;
    gap: var(--space-15);
    margin-left: auto;
    width: var(--size-control-sm);
    height: var(--size-control-sm);
    place-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
  }
  body.site .gn-knop span {
    display: block;
    width: var(--space-4);
    height: var(--border-width-strong);
    transition: transform var(--duration-fast);
  }
  html.gn-open body.site .gn-knop span:first-child {
    transform: translateY(calc((var(--space-15) + var(--border-width-strong)) / 2)) rotate(45deg);
  }
  html.gn-open body.site .gn-knop span:last-child {
    transform: translateY(calc((var(--space-15) + var(--border-width-strong)) / -2)) rotate(-45deg);
  }
  body.site .gn-menu {
    display: none;
  }
  html.gn-open body.site .gn-menu {
    display: grid;
    gap: var(--space-6);
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 70;
    padding: var(--space-2) var(--layout-gutter-mobile) var(--space-6);
    background: var(--color-nav-global);
  }
  html.gn-open body.site .gn-lijst {
    display: block;
    position: static;
    margin: 0;
    padding: 0;
    background: none;
  }
  html.gn-open body.site .gn-lijst a,
  html.gn-open body.site .gn-login {
    padding: 0;
    color: var(--color-on-surface);
    font-size: var(--font-size-xl);
  }
  html.gn-open body.site .gn-actie {
    font-size: var(--font-size-xl);
  }
  /* past de rij acties niet op één regel, dan loopt hij door naar een tweede regel in plaats van uit beeld te schuiven */
  body.site .gn-acties {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: var(--space-4);
  }
}
/* is-extra: een tweede tekstlink naast inloggen (zoals Account maken). Tussen 1200 en 1700 px is de balk te smal voor een derde actie:
   dan alleen in het uitklapmenu en vanaf 1700 px (xl op de ladder) weer in de balk */
@media (min-width: 1200px) and (max-width: 1699px) {
  body.site .gn-acties .is-extra {
    display: none;
  }
}
@media (min-width: 1069px) and (max-width: 1199px) {
  html.gn-open body.site .gn-menu {
    padding-inline: var(--layout-gutter-desktop);
  }
}

/* lokale balk op een site: transparant met vervaging, in de kleur van het merk (token color-nav-local), anders de paginagrond */
body.site .ln {
  background: color-mix(
    in srgb,
    var(--color-nav-local) calc(var(--opacity-nav-local, 0.82) * 100%),
    transparent
  );
  border-bottom: 0;
}
html.ln-open body.site .ln,
html.ln-open body.site .ln-lijst {
  background: var(--color-nav-local);
}

/* button-xs: de compacte knop voor een navigatiebalk: laag, kleine tekst, pilvorm */
.button.button-xs {
  min-height: var(--size-button-xs);
  /* tekst optisch in het midden: 2 px meer ruimte boven dan onder */
  padding: var(--space-1) var(--space-button-xs) var(--space-05);
  border-radius: var(--radius-button);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  gap: var(--space-1);
}

/* knoptekst optisch in het midden: kleine knoppen (36 px en lager) een halve stap omlaag, de grote knop (48 px) niet */
.button {
  padding-bottom: calc(var(--space-05) / 2);
}
.button.button-sm {
  padding-top: var(--space-05);
  padding-bottom: 0;
}

/* ---------- onderdelen voor een verhaalpagina ---------- */

/* media-gallery is-card: Dezelfde doorlopende carrousel met stippen
   en pauzeknop, maar elke plaat is zo breed als de inhoudskolom en lijnt links uit met de kop erboven.
   Twee soorten platen, afwisselend:
   - een lichte plaat (standaard): de tekst linksboven, een illustratie vrijstaand in de plaat eronder;
   - is-photo: de foto vult de plaat, de tekst wit en gecentreerd onderin op een schaduw.
   Tekst: een vet begin, daarna gewone tekst. Script: bediening.js, zoals media-gallery */
.media-gallery.is-card {
  --slide: calc(100cqw - 2 * var(--layout-gutter-mobile));
}
@media (min-width: 1069px) {
  .media-gallery.is-card {
    --slide: min(calc(100cqw - 2 * var(--layout-gutter-desktop)), var(--layout-width-content));
  }
}
.media-gallery.is-card .media-gallery-item {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-container-lowest);
}
@media (min-width: 1069px) {
  .media-gallery.is-card .media-gallery-item {
    aspect-ratio: 1260 / 680;
  }
}
.media-gallery-card-text {
  position: relative;
  z-index: 1;
  padding: var(--space-8) var(--space-8) var(--space-6); /* 32 vanaf de rand op tablet en mobiel, 48 op desktop */
}
.media-gallery-card-text p {
  max-width: var(--measure-md);
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-title-sm); /* typeschaal: 28 / 24, op mobiel 17 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
.media-gallery-card-text b {
  color: var(--color-heading);
}
.media-gallery.is-card .media-gallery-item img {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 var(--space-6) var(--space-6);
  box-sizing: border-box;
  object-fit: contain;
}
.media-gallery.is-card .media-gallery-item.is-photo {
  justify-content: flex-end;
  background: var(--color-scrim);
}
.media-gallery.is-card .media-gallery-item.is-photo img {
  position: absolute;
  inset: 0;
  padding: 0;
  object-fit: cover;
}
.media-gallery-item.is-photo .media-gallery-card-text {
  padding-top: var(--space-24);
  background: linear-gradient(to top, color-mix(in srgb, var(--color-scrim) 70%, transparent), transparent);
  text-align: center;
}
.media-gallery-item.is-photo .media-gallery-card-text p {
  margin-inline: auto;
  color: color-mix(in srgb, var(--color-on-image) 80%, transparent);
}
.media-gallery-item.is-photo .media-gallery-card-text b {
  color: var(--color-on-image);
}
@media (min-width: 1069px) {
  .media-gallery-card-text {
    padding: var(--space-12) var(--space-12) var(--space-8);
  }
  .media-gallery-item.is-photo .media-gallery-card-text {
    padding: var(--space-32) var(--space-12) var(--space-12);
  }
  .media-gallery-card-text p {
    max-width: var(--measure-lg);
  }
  .media-gallery.is-card .media-gallery-item img {
    padding: 0 var(--space-12) var(--space-12);
  }
}

/* closing-cta is-card: een oproep als brede kaart
   Op een telefoon gecentreerd met het beeld bovenaan; vanaf md de tekst links en het beeld rechts, tot op de onderrand.
   Het beeld mag een foto, illustratie of korte video op een witte grond zijn: met multiply valt het wit weg in de kaartkleur */
.closing-cta.is-card {
  justify-items: center;
  gap: var(--space-6);
  margin-inline: auto;
  padding: var(--space-10) var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-card, var(--color-surface-container-lowest));
}
.closing-cta-body {
  display: grid;
  justify-items: inherit;
  gap: var(--space-3);
}
.closing-cta-media {
  display: block;
  width: auto;
  max-width: 100%;
  height: calc(var(--size-logo-tile) * 2);
  object-fit: contain;
  mix-blend-mode: multiply;
}
.closing-cta.is-card .closing-cta-title {
  margin: 0;
  font-size: var(--font-size-card-title);
}
.closing-cta.is-card .closing-cta-text {
  max-width: var(--measure-md);
  font-size: var(--font-size-lg);
}
/* de knop: een compacte pil met 8 bij 16 px binnenruimte; letterdikte uit het systeem (--font-weight-button) */
.closing-cta.is-card .button {
  min-height: 0;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-button);
  font-size: var(--font-size-md);
  line-height: var(--line-height-snug);
}
@media (min-width: 1069px) {
  .closing-cta.is-card {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: start;
    gap: var(--space-8);
    /*: 1260 bij 480, de tekst op een vaste afstand van de linkerrand */
    aspect-ratio: 1260 / 480;
    /* één rij precies zo hoog als de kaart: anders rekt de video de rij op en zakt de tekst onder het midden */
    grid-template-rows: minmax(0, 1fr);
    padding: 0 0 0 var(--space-20);
    text-align: start;
  }
  .closing-cta.is-card .closing-cta-body {
    padding-block: var(--space-12);
  }
  .closing-cta.is-card .closing-cta-media {
    order: 2;
    align-self: end;
    justify-self: center;
    height: 92%;
  }
}

/* point-feature: groot beeld naast een lijst punten. Per punt een icoon, een titel (of met is-value een groot cijfer) en een korte zin.
   Vanaf md beeld en lijst naast elkaar; is-reverse zet de lijst links */
.point-feature {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}
.point-feature-media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 4 / 5;
  max-width: 100%;
}
.point-feature-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 1069px) {
  .point-feature {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
  .point-feature.is-reverse .point-feature-media {
    order: 2;
  }
}
.point-feature + .point-feature {
  margin-top: var(--space-20);
}
.point-text + .point-list {
  margin-top: var(--space-8);
}
.point-feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.point-feature-title {
  margin: 0 0 var(--space-8);
  font-family: var(--font-family-display);
  font-size: var(--font-size-card-title-lg);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-heading, var(--line-height-tight));
  text-transform: var(--text-case-heading, none);
  text-wrap: balance;
  color: var(--color-heading);
}
.point-list {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.point-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
}
.point-icon {
  display: block;
  width: var(--size-control-md);
  height: var(--size-control-md);
  object-fit: contain;
}
.point-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-snug);
  color: var(--color-heading);
}
.point-title.is-value {
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-none);
}
.point-text {
  grid-column: 1 / -1;
  max-width: var(--measure-md);
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
}

/* faq-list: vragen die je openklapt Gewone details en summary,
   dus zonder script en met het toetsenbord te bedienen. De lijst loopt over de volle kolom, een lijn tussen de vragen,
   een pijltje naar beneden dat bij openen omdraait. Een link naar alle vragen staat eronder (faq-more) */
.faq-list {
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-width-default) solid var(--color-outline-variant);
}
.faq-item {
  border-bottom: var(--border-width-default) solid var(--color-outline-variant);
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-heading);
  list-style: none;
  cursor: pointer;
}
@media (min-width: 1069px) {
  .faq-question {
    font-size: var(--font-size-2xl);
  }
}
.faq-question::-webkit-details-marker {
  display: none;
}
.faq-question svg {
  flex: none;
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  transition: transform var(--duration-fast) ease;
}
.faq-item[open] .faq-question svg {
  transform: rotate(180deg);
}
.faq-question:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-05);
}
.faq-answer {
  padding: 0 0 var(--space-6);
}
.faq-answer p {
  max-width: var(--measure-lg);
  margin: 0 0 var(--space-3);
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
}
.faq-answer p:last-child {
  margin-bottom: 0;
}
.faq-more {
  margin: var(--space-8) 0 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
}
@media (prefers-reduced-motion: reduce) {
  .faq-question svg {
    transition: none;
  }
}

/* welcome: de opening van een verhaalpagina. Eerst het logo met de tagline op de lichte grond; bij scrollen vervagen die
   (bediening.js zet --welcome-fade van 1 naar 0), komt de foto eronder tevoorschijn en schuift de tekst wit over de foto omhoog.
   De foto staat vast in beeld zolang de sectie loopt. Een lichte sluier in de paginagrond ligt eroverheen en verdwijnt met het logo;
   daarna maakt een schaduw de foto donker genoeg voor witte tekst */
.welcome {
  position: relative;
  isolation: isolate;
  padding-block: 0;
  background: var(--color-surface);
}
.welcome-media {
  position: sticky;
  top: 0;
  z-index: -1;
  height: 100svh;
  margin: 0;
  overflow: hidden;
}
/* een foto of een video die vanzelf speelt (stil, in een lus) */
.welcome-media :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.welcome-media::before,
.welcome-media::after {
  content: "";
  position: absolute;
  inset: 0;
}
.welcome-media::before {
  background: color-mix(in srgb, var(--color-scrim) 45%, transparent);
  opacity: calc(1 - var(--welcome-fade, 1));
}
.welcome-media::after {
  background: linear-gradient(
    to bottom,
    var(--color-surface) 0%,
    var(--color-surface) 60%,
    transparent 100%
  );
  opacity: var(--welcome-fade, 1);
}
.welcome-stage {
  height: 130svh;
  margin-top: -100svh;
}
.welcome-mark {
  position: sticky;
  top: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-8);
  height: 100svh;
  padding-inline: var(--layout-margin);
  text-align: center;
  opacity: var(--welcome-fade, 1);
  transform: translateY(calc((1 - var(--welcome-fade, 1)) * var(--space-12) * -1));
}
.welcome-logo {
  display: block;
  width: min(64vw, calc(var(--size-logo-tile) * 3));
  height: auto;
}
/* de tagline op één regel zolang het scherm breed genoeg is; op een telefoon loopt hij door */
.welcome-tagline {
  max-width: none;
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-type-headline-lg); /* typeschaal: 48 / 40 / 32 */
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-heading, var(--line-height-tight));
  text-transform: var(--text-case-heading, none);
  text-wrap: balance;
  color: var(--color-heading);
}
.welcome-text {
  position: relative;
  box-sizing: border-box;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 100svh;
  /* raster: 7 van de 12 kolommen breed, gecentreerd; op mobiel de volle inhoudsbreedte */
  max-width: calc(var(--layout-width-content) * 7 / 12 + 2 * var(--layout-margin));
  margin-inline: auto;
  padding: var(--space-16) var(--layout-margin);
  text-align: center;
  color: var(--color-on-image);
}
.welcome-text > * {
  max-width: 100%;
}
.welcome-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-family-display);
  font-size: var(--font-size-type-headline-md); /* typeschaal: 48 / 40 / 28 */
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-heading, var(--line-height-tight));
  text-transform: var(--text-case-heading, none);
  text-wrap: balance;
  color: inherit;
}
.welcome-lead {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-lead-sm); /* typeschaal: 21 / 21 / 17 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
}
.welcome-text .button {
  margin-top: var(--space-8);
}

/* welcome is-layered: dezelfde opening, maar opgebouwd uit lagen. Achter de lucht, daarvoor het logo met de tagline,
   vooraan het landschap met een transparante lucht. Bij scrollen komt het landschap omhoog (--welcome-rise van 0 naar 1) terwijl
   logo en tagline vervagen (--welcome-fade); daarna schuift de tekst wit over het landschap. Lucht en voorgrond hebben dezelfde
   breedte en uitlijning. Script: bediening.js */
.welcome.is-layered .welcome-scene {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  overflow: hidden;
}
.welcome-sky,
.welcome-front {
  position: absolute;
  left: 0;
  width: 100%;
  max-width: none;
  object-fit: cover;
}
.welcome-sky {
  top: 0;
  height: 100%;
}
.welcome-front {
  bottom: 0;
  z-index: 2;
  height: 70svh;
  object-position: center top;
  transform: translateY(calc((1 - var(--welcome-rise, 0)) * 35%));
}
/* op een smal scherm valt de uitsnede anders weg: links houden, daar staat in de polder de eerste windturbine */
@media (max-width: 734px) {
  .welcome-front {
    object-position: 20% top;
  }
}
.welcome.is-layered .welcome-mark {
  position: absolute;
  inset: 0 0 25svh;
  z-index: 1;
  height: auto;
}
.welcome-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: color-mix(in srgb, var(--color-scrim) 50%, transparent);
  /* pas donker als de tekst eraan komt: eerst blijft de lucht licht */
  opacity: calc((var(--welcome-rise, 0) - 0.4) / 0.6);
  pointer-events: none;
}
.welcome.is-layered .welcome-stage {
  height: 40svh;
  margin-top: 0;
}
.welcome.is-layered .welcome-text {
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .welcome-front {
    transform: none;
  }
}

/* welcome is-verhaal: een opening die als een korte film met het scrollen meeloopt, opgebouwd uit lagen (welcome-laag).
   Elke laag krijgt uit bediening.js zijn eigen zicht (--laag-zicht), verschuiving (--laag-y) en onthulling (--laag-onthul),
   op basis van de voortgang door de sectie. De momenten staan in de inhoud: data-in, data-uit, data-schuif, data-onthul.
   is-van-onder: de laag komt van onder naar boven tevoorschijn. is-uit-punt: de laag groeit vanuit een punt (--punt). */
.welcome.is-verhaal .welcome-scene {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--color-scrim);
}
.welcome-laag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: var(--laag-zicht, 1);
  transform: translateY(var(--laag-y, 0%));
  will-change: transform, opacity;
}
/* een laag die mag schuiven is hoger dan het scherm, zodat er ruimte is om te bewegen */
.welcome-laag.is-hoog {
  height: var(--laag-hoogte, 140%);
  object-position: center bottom; /* wat wegvalt, valt weg uit de lucht; de grond blijft op zijn plek */
}
/* een laag die van onder binnenschuift steekt boven en onder uit, zodat er bij het schuiven geen rand zichtbaar wordt */
.welcome-laag[data-schuif]:not(.is-hoog) {
  top: -15%;
  height: 130%;
}
.welcome-laag.is-van-onder {
  /* een zachte rand, zodat het lijkt alsof hij opkomt in plaats van wordt afgeknipt */
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--laag-onthul, 1) * 110% - 10%), transparent calc(var(--laag-onthul, 1) * 110% + 4%));
  mask-image: linear-gradient(to top, #000 calc(var(--laag-onthul, 1) * 110% - 10%), transparent calc(var(--laag-onthul, 1) * 110% + 4%));
}
/* een voorgrond zonder lucht (transparant): staat op de onderkant en schuift over de lagen erachter */
.welcome-laag.is-voorgrond,
.welcome-laag.is-voorgrond[data-schuif] {
  top: auto;
  bottom: 0;
  height: 100%;
  object-position: center bottom;
}
.welcome-laag.is-uit-punt {
  -webkit-mask-image: radial-gradient(circle at var(--punt, 50% 90%), #000 calc(var(--laag-onthul, 1) * 130%), transparent calc(var(--laag-onthul, 1) * 130% + 25%));
  mask-image: radial-gradient(circle at var(--punt, 50% 90%), #000 calc(var(--laag-onthul, 1) * 130%), transparent calc(var(--laag-onthul, 1) * 130% + 25%));
}
.welcome.is-verhaal .welcome-mark {
  position: absolute;
  inset: 0;
  z-index: 5;
  height: auto;
}
.welcome.is-verhaal .welcome-shade {
  z-index: 4;
  /* alleen onderin donkerder, waar de tekst komt; het beeld zelf blijft licht */
  background: linear-gradient(to top, color-mix(in srgb, var(--color-scrim) 70%, transparent), transparent 55%);
  opacity: var(--laag-zicht, 0);
}
/* de tekst staat op het laatste beeld van de scène; als de scène loslaat, gaat alles samen omhoog */
.welcome.is-verhaal .welcome-scene .welcome-text {
  position: absolute;
  inset: auto 0 0;
  z-index: 5;
  min-height: 0;
  padding-bottom: var(--welcome-tekst-onder);
  opacity: var(--laag-zicht, 1);
}
.welcome.is-verhaal .welcome-stage {
  height: 300svh;
  margin-top: 0;
}

/* minder beweging: geen film, alleen het laatste beeld met de tekst */
@media (prefers-reduced-motion: reduce) {
  .welcome.is-verhaal .welcome-laag {
    opacity: 1;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .welcome.is-verhaal .welcome-stage {
    height: 40svh;
  }
}

/* made-feature:
   Een raster van 12 kolommen: links (9 kolommen) het product groot, tot buiten de linkerrand;
   rechts (3 kolommen) een kop van twee regels en drie cijfers onder elkaar, elk met een icoon.
   Op een telefoon alles onder elkaar en links uitgelijnd */
.made-feature-section {
  overflow-x: clip;
}
.made-feature {
  display: grid;
  gap: var(--space-10);
}
.made-feature-media {
  margin: 0;
}
.made-feature-stats {
  display: grid;
  gap: var(--space-6);
  align-content: start;
}
/* de kop naast de cijfers in de koppenletter van het merk; het gemarkeerde deel (b) in de actiekleur */
.made-feature-heading {
  margin: 0 0 var(--space-1);
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-heading, var(--line-height-tight));
  text-transform: var(--text-case-heading, none);
  color: var(--color-heading);
}
.made-feature-heading b {
  font-weight: inherit;
  color: var(--color-heading);
}
.made-stat {
  margin: 0;
}
.made-stat-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.made-stat-icon {
  width: var(--size-control-md);
  height: var(--size-control-md);
  object-fit: contain;
}
.made-stat-value {
  font-family: var(--font-family-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-none);
  color: var(--color-action-text);
}
.made-stat-caption {
  max-width: 230px;
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
@media (min-width: 1069px) {
  .made-feature {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    column-gap: var(--space-5);
  }
  .made-feature-media {
    grid-column: 1 / span 9;
    display: flex;
    justify-content: flex-end;
  }
  /* de teksten verticaal in het midden naast het product */
  .made-feature-stats {
    grid-column: 10 / span 3;
    align-self: center;
  }
  .made-feature-heading {
    font-size: var(--font-size-2xl);
  }
}
/* made-feature-video: een productvideo op een witte grond; met multiply valt het wit weg in de paginagrond.
   Script: made-feature-video.js (speelt één keer af zodra hij in beeld komt) */
.made-feature-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 832 / 464;
  mix-blend-mode: multiply;
}

/* closing-cta is-card platform-feature-cta: dezelfde oproepkaart op de getinte grond van het merk, met lucht eronder */
.closing-cta.is-card.platform-feature-cta {
  margin-bottom: var(--space-16);
  background: var(--color-primary-container);
}
@media (min-width: 1069px) {
  .closing-cta.is-card.platform-feature-cta {
    margin-bottom: var(--space-24);
  }
}

/* intro-copy: een korte alinea in groot, in de koppenletter van het merk (bij een merk met kapitalen ook in kapitalen).
   De tekst in de kopkleur, de kern (b) in de actiekleur, zodat je hem ook scant als je alleen de kern leest */
.intro-copy {
  display: grid;
  gap: var(--space-8);
  max-width: 1040px;
  margin-inline: auto;
  text-align: center;
}
.intro-copy p {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: clamp(var(--font-size-2xl), 2.9vw, var(--font-size-4xl));
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-heading, var(--line-height-tight));
  text-transform: var(--text-case-heading, none);
  text-wrap: pretty;
  color: var(--color-heading);
}
.intro-copy b {
  font-weight: inherit;
  color: var(--color-heading);
}

/* help-card: een grijs kaartje zoals bij Apple, met een vetgedrukte vraag, een korte regel en een plus rechtsboven.
   Het is een knop: hij opent een info-modal met de uitleg (data-modal-open="<id>"). Geen rand */
.help-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--layout-width-form);
  padding: var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface-container-low);
  color: var(--color-on-surface);
  font-family: var(--font-family-text);
  font-size: var(--form-tekst-size);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-snug);
  text-align: left;
  cursor: pointer;
}
.help-card b,
.help-card-sub {
  display: block;
}
.help-card b {
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
}
.help-card svg {
  flex: none;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}
.help-card:hover {
  background: var(--color-surface-container);
}
.help-card:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-05);
}
/* info-modal-ways: in een info-modal een korte keuzelijst, elk met een zin en een link met een pijltje */
.info-modal-ways {
  margin-top: var(--space-5);
  padding-block: var(--space-5);
  border-block: var(--border-width-default) solid var(--color-outline-subtle);
}
.info-modal-ways + .info-modal-body {
  margin-top: var(--space-5);
}
.info-modal-ways-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  color: var(--color-heading);
}
.info-modal-ways-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.info-modal-ways-list p {
  margin: 0;
  font-size: var(--font-size-card-text);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
}
.info-modal-ways-list b {
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  color: var(--color-heading);
}
.info-modal-ways-list .section-intro-link {
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
}
.info-modal-ways-note {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-card-text);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
}

/* value-grid is-four: vier redenen; vanaf sm twee bij twee, vanaf lg vier naast elkaar */
@media (min-width: 735px) {
  .value-grid.is-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1069px) {
  .value-grid.is-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-12) var(--space-8);
  }
}

/* info-note: klein informatieblok met een lijnicoon, een vette kop, een zin in grijs en eventueel een link. Penpot: Informatiepaneel.
   Voor uitleg bij een formulier of een stap, niet voor een venster (dat is info-modal) */
.info-note {
  display: grid;
  grid-template-columns: var(--size-icon-md) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-card, var(--color-surface-container-lowest));
  font-family: var(--font-family-text);
}
.info-note-icon {
  display: block;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  color: var(--color-on-surface-muted);
}
.info-note-body {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
}
.info-note-title,
.info-note-text,
.info-note-link {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.info-note-title,
.info-note-link {
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  color: var(--color-on-surface);
}
.info-note-text {
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  color: var(--color-on-surface-muted);
}
.info-note-link {
  text-decoration: underline;
}

/* disclosure: klein uitklapblok bij een veld, zoals "Waarom vragen we dit?". Gewone details en summary, met een chevron in de accentkleur
   die bij openen omdraait. Penpot: Uitklapper. Voor een lijst vragen is er faq-list */
.disclosure {
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.disclosure-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: calc(var(--space-unit) * 2.5);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  color: var(--color-on-surface);
  list-style: none;
  cursor: pointer;
}
.disclosure-trigger::-webkit-details-marker {
  display: none;
}
.disclosure-trigger svg {
  flex: none;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  color: var(--color-accent);
  transition: transform var(--duration-fast) ease;
}
.disclosure[open] .disclosure-trigger svg {
  transform: rotate(180deg);
}
.disclosure-trigger:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-05);
}
.disclosure-content {
  margin: var(--space-2) 0 0;
  color: var(--color-on-surface-muted);
}
@media (prefers-reduced-motion: reduce) {
  .disclosure-trigger svg {
    transition: none;
  }
}

/* action-bar: balk onderaan een scherm of formulierstap met één brede knop, zoals "Verder". Penpot: Actiebalk.
   Een haarlijn erboven scheidt hem van de inhoud; op een telefoon kan hij met is-sticky onderaan blijven staan */
.action-bar {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) calc(var(--space-unit) * 7);
  border-top: var(--border-width-default) solid var(--color-outline-subtle);
  background: var(--color-surface-container-lowest);
}
.action-bar.is-sticky {
  position: sticky;
  bottom: 0;
  z-index: 20;
}
.action-bar-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--size-control-md);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-action);
  color: var(--color-on-action);
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-relaxed);
  text-decoration: none;
  cursor: pointer;
}
.action-bar-button:hover {
  background: var(--color-action-hover);
}
.action-bar-button:active {
  background: var(--color-action-pressed);
}
.action-bar-button:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-05);
}
/* ---------- 25-platform: components voor een platform of tool (5 nov 2026) ----------
   Laag 1. Tabs, chips, lijsten, tabellen, menu, tooltip, toast, progress en skeleton, badge, accordion,
   breadcrumbs, paginering en zoeken. Alles uit tokens; een merk zet alleen waarden in 40-merken.css.
   In Penpot: WeStayHere Design System, pagina "2 Brandsysteem · 13 Platform". */

/* lagen en hoogte (elevation): drie schaduwen en vaste lagen, als verhouding van de ruimteladder */
:root,
[data-brand],
.merkbalk {
  --shadow-0: none;
  --shadow-1: 0 var(--border-width-default) var(--space-1) color-mix(in srgb, var(--color-shadow) 10%, transparent);
  --shadow-2: 0 var(--space-1) var(--space-4) color-mix(in srgb, var(--color-shadow) 14%, transparent);
  --shadow-3: 0 var(--space-3) var(--space-10) color-mix(in srgb, var(--color-shadow) 20%, transparent);
  --z-sticky: 10;
  --z-menu: 20;
  --z-overlay: 30;
  --z-toast: 40;
  --color-skeleton: var(--color-surface-container);
  --color-skeleton-glans: var(--color-surface-container-lowest);
  /* zwevend vlak (toast, tooltip): op licht donker, op donker een lichtere stap dan de grond */
  --color-float: var(--color-surface-inverse);
  --color-on-float: var(--color-on-surface-inverse);
  --color-float-action: var(--color-action-text-inverse);
  --color-badge: var(--color-error);
  --color-on-badge: var(--color-on-action);
}
[data-modus="dark"] {
  --color-float: var(--color-surface-container-highest);
  --color-on-float: var(--color-on-surface);
  --color-float-action: var(--color-link);
}

/* ---------- tabs: een paar weergaven van dezelfde inhoud ---------- */
.tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: var(--border-width-default) solid var(--color-outline-variant);
}
.tab {
  position: relative;
  flex: none;
  min-height: var(--size-touch-min);
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: none;
  color: var(--color-on-surface-variant);
  font-family: var(--font-family-text);
  font-size: var(--type-label-l-size);
  line-height: var(--type-label-l-line-height);
  font-weight: var(--type-label-weight);
  cursor: pointer;
}
.tab:hover {
  color: var(--color-on-surface);
}
.tab[aria-selected="true"] {
  color: var(--color-on-surface);
}
.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: auto var(--space-2) calc(var(--border-width-default) * -1);
  height: var(--border-width-strong);
  border-radius: var(--radius-full);
  background: var(--color-action);
}
.tab:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: calc(var(--border-width-strong) * -1);
}
.tab-panel[hidden] {
  display: none;
}

/* ---------- chips: kiezen en filteren. Een tag (10-systeem-basis) is alleen een label ---------- */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--size-control-sm);
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-chip);
  background: var(--color-surface-container); /* geen lijn om een keuze: een vlak, zoals een kaart */
  color: var(--color-on-surface);
  font-family: var(--font-family-text);
  font-size: var(--type-label-m-size);
  line-height: var(--type-label-m-line-height);
  font-weight: var(--type-label-weight);
  cursor: pointer;
}
.chip:hover {
  background: var(--color-surface-container-high);
}
.chip[aria-pressed="true"],
.chip[aria-checked="true"] {
  background: var(--color-selection);
  box-shadow: inset 0 0 0 var(--border-width-strong) var(--color-action);
}
/* een verborgen chip blijft verborgen, ook al is hij inline-flex */
.chip[hidden] {
  display: none;
}
.chip .icoon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}
.chip:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--border-width-default);
}

/* ---------- badge: een aantal of een stip op een icoon of tab ---------- */
.badge {
  display: inline-grid;
  place-items: center;
  min-width: var(--space-5);
  height: var(--space-5);
  padding: 0 var(--space-15);
  box-sizing: border-box;
  border-radius: var(--radius-full);
  background: var(--color-badge);
  color: var(--color-on-badge);
  font-family: var(--font-family-text);
  font-size: var(--type-label-s-size);
  line-height: var(--type-label-s-line-height);
  font-weight: var(--type-label-weight);
  font-variant-numeric: tabular-nums;
}
.badge.is-stip {
  min-width: var(--space-2);
  height: var(--space-2);
  padding: 0;
}
.badge.is-zacht {
  background: var(--color-surface-container);
  color: var(--color-on-surface);
}

/* ---------- lijst: rijen met een titel, een regel uitleg en iets aan het eind ---------- */
.list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--size-touch-min);
  padding: var(--space-3) var(--space-2);
  border-bottom: var(--border-width-default) solid var(--color-outline-subtle);
  color: var(--color-on-surface);
  text-decoration: none;
}
.list-item:last-child {
  border-bottom: 0;
}
a.list-item:hover {
  background: var(--color-choice-hover);
}
.list-item-titel {
  display: block;
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-line-height);
  font-weight: var(--type-label-weight);
}
.list-item-tekst {
  display: block;
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-line-height);
  color: var(--color-on-surface-variant);
}
.list-item-meta {
  font-size: var(--type-label-m-size);
  line-height: var(--type-label-m-line-height);
  color: var(--color-on-surface-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- tabel: rijen data. Getallen rechts, kop blijft staan bij scrollen ---------- */
.data-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-card);
  background: var(--color-surface-container-lowest);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-family-text);
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-line-height);
  color: var(--color-on-surface);
}
.data-table th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-container-lowest);
  border-bottom: var(--border-width-default) solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
  font-size: var(--type-label-m-size);
  line-height: var(--type-label-m-line-height);
  font-weight: var(--type-label-weight);
  text-align: left;
  text-transform: none;
  letter-spacing: var(--type-label-m-tracking);
  white-space: nowrap;
}
.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-default) solid var(--color-outline-subtle);
}
.data-table tbody tr:last-child td {
  border-bottom: 0;
}
.data-table tbody tr:hover {
  background: var(--color-choice-hover);
}
.data-table .is-getal {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table [aria-sort] button {
  all: unset;
  cursor: pointer;
}
.data-table.is-compact :is(th, td) {
  padding: var(--space-2) var(--space-3);
}

/* ---------- menu: een lijst acties die openklapt onder een knop ---------- */
.menu {
  position: absolute;
  z-index: var(--z-menu);
  min-width: calc(var(--space-unit) * 50);
  margin: var(--space-1) 0 0;
  padding: var(--space-1);
  list-style: none;
  border-radius: var(--radius-md);
  background: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-2);
}
.menu[hidden] {
  display: none;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--size-control-sm);
  padding: var(--space-2) var(--space-3);
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-on-surface);
  font-family: var(--font-family-text);
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-line-height);
  text-align: left;
  cursor: pointer;
}
.menu-item:hover,
.menu-item:focus-visible {
  background: var(--color-choice-hover);
  outline: 0;
}
.menu-item[aria-checked="true"] {
  font-weight: var(--type-label-weight);
}
.menu-item.is-gevaar {
  color: var(--color-error);
}
.menu-scheiding {
  height: var(--border-width-default);
  margin: var(--space-1) 0;
  background: var(--color-outline-subtle);
}
.menu-anker {
  position: relative;
  display: inline-block;
}

/* ---------- tooltip: een korte uitleg bij een icoon zonder tekst. Nooit iets wat je moet weten om verder te kunnen ---------- */
.tooltip {
  position: absolute;
  z-index: var(--z-menu);
  max-width: calc(var(--space-unit) * 60);
  padding: var(--space-15) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-float);
  color: var(--color-on-float);
  font-family: var(--font-family-text);
  font-size: var(--type-label-m-size);
  line-height: var(--type-label-m-line-height);
  box-shadow: var(--shadow-1);
  pointer-events: none;
  width: max-content;
}
.tooltip[hidden] {
  display: none;
}

/* ---------- toast: een korte melding die vanzelf weggaat, met hooguit één actie ---------- */
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--layout-width-form);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-float);
  color: var(--color-on-float);
  font-family: var(--font-family-text);
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-line-height);
  box-shadow: var(--shadow-3);
}
.toast-tekst {
  flex: 1;
}
.toast-actie {
  flex: none;
  min-height: var(--size-control-sm);
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-button);
  background: none;
  color: var(--color-float-action);
  font: inherit;
  font-weight: var(--type-label-weight);
  cursor: pointer;
}
.toast-stapel {
  position: fixed;
  z-index: var(--z-toast);
  inset: auto var(--space-4) var(--space-4) var(--space-4);
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  pointer-events: none;
}
.toast-stapel .toast {
  pointer-events: auto;
}

/* ---------- laden: een balk met voortgang, een draaiend teken, en skeleton voor wat nog komt ---------- */
.progress-bar {
  height: var(--space-1);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-surface-container);
}
.progress-bar > i {
  display: block;
  width: var(--waarde, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--color-progress, var(--color-action));
}
.progress-bar.is-onbepaald > i {
  width: 40%;
  animation: platform-onbepaald calc(var(--duration-fast) * 7) ease-in-out infinite;
}
@keyframes platform-onbepaald {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
.spinner {
  display: inline-block;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  box-sizing: border-box;
  border: var(--border-width-strong) solid var(--color-surface-container);
  border-top-color: var(--color-action);
  border-radius: var(--radius-full);
  animation: platform-draai calc(var(--duration-fast) * 4) linear infinite;
}
@keyframes platform-draai {
  to { transform: rotate(1turn); }
}
.skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-skeleton) 0%, var(--color-skeleton-glans) 50%, var(--color-skeleton) 100%);
  background-size: 200% 100%;
  animation: platform-glans calc(var(--duration-fast) * 7) ease-in-out infinite;
}
.skeleton.is-regel {
  height: var(--space-4);
  margin-bottom: var(--space-2);
}
.skeleton.is-kop {
  width: 60%;
  height: var(--space-6);
  margin-bottom: var(--space-3);
}
.skeleton.is-beeld {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
}
@keyframes platform-glans {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .spinner,
  .progress-bar.is-onbepaald > i {
    animation: none;
  }
}

/* ---------- accordion: inhoud die je openklapt, met details en summary ---------- */
.accordion {
  border-top: var(--border-width-default) solid var(--color-outline-subtle);
}
.accordion details {
  border-bottom: var(--border-width-default) solid var(--color-outline-subtle);
}
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--size-touch-min);
  padding: var(--space-3) 0;
  color: var(--color-on-surface);
  font-size: var(--type-title-s-size);
  line-height: var(--type-title-s-line-height);
  font-weight: var(--type-title-weight);
  font-family: var(--font-family-title);
  list-style: none;
  cursor: pointer;
}
.accordion summary::-webkit-details-marker {
  display: none;
}
.accordion summary .icoon {
  flex: none;
  transition: transform var(--duration-fast) ease;
}
.accordion details[open] summary .icoon {
  transform: rotate(180deg);
}
.accordion summary:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--border-width-default);
}
.accordion-inhoud {
  padding: 0 0 var(--space-4);
  color: var(--color-on-surface-variant);
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-line-height);
}

/* ---------- breadcrumbs: waar je bent, van boven naar hier ---------- */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--type-label-m-size);
  line-height: var(--type-label-m-line-height);
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-on-surface-variant);
}
.breadcrumbs li + li::before {
  content: "/";
  color: var(--color-on-surface-muted);
}
.breadcrumbs a {
  color: var(--color-on-surface-variant);
}
.breadcrumbs [aria-current="page"] {
  color: var(--color-on-surface);
  font-weight: var(--type-label-weight);
}

/* ---------- paginering: bladeren door een lange lijst ---------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}
.pagination a,
.pagination span {
  display: inline-grid;
  place-items: center;
  min-width: var(--size-control-sm);
  height: var(--size-control-sm);
  padding: 0 var(--space-2);
  box-sizing: border-box;
  border-radius: var(--radius-chip);
  color: var(--color-on-surface);
  font-size: var(--type-label-m-size);
  line-height: var(--type-label-m-line-height);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.pagination a:hover {
  background: var(--color-choice-hover);
}
.pagination [aria-current="page"] {
  background: var(--color-action);
  color: var(--color-on-action);
  font-weight: var(--type-label-weight);
}
.pagination .is-leeg {
  color: var(--color-on-surface-muted);
}

/* ---------- zoeken: een veld met een vergrootglas en een knop om te wissen ---------- */
.search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--layout-width-form);
}
.search input {
  width: 100%;
  min-height: var(--size-control-md);
  margin: 0;
  padding: var(--space-3) var(--space-10) var(--space-3) var(--space-10);
  box-sizing: border-box;
  border: var(--border-width-default) solid var(--color-outline);
  border-radius: var(--radius-full);
  background: var(--color-choice);
  color: var(--color-on-surface);
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-snug);
}
.search input::-webkit-search-cancel-button {
  display: none;
}
.search input:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--border-width-default);
}
.search > .icoon {
  position: absolute;
  left: var(--space-4);
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  color: var(--color-on-surface-variant);
  pointer-events: none;
}
.search-wis {
  position: absolute;
  right: var(--space-1);
  display: grid;
  place-items: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-on-surface-variant);
  cursor: pointer;
}
.search-wis:hover {
  background: var(--color-choice-hover);
}

/* ---------- lege staat: wat je ziet als er nog niets is ---------- */
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-width: var(--layout-width-form);
  margin-inline: auto;
  padding: var(--space-10) var(--space-5);
  text-align: center;
}
.empty-state > .icoon {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  color: var(--color-on-surface-muted);
}
.empty-state h3 {
  margin: 0;
  color: var(--color-heading);
  font-size: var(--type-title-m-size);
  line-height: var(--type-title-m-line-height);
}
.empty-state p {
  margin: 0;
  color: var(--color-on-surface-variant);
}

/* ---------- melding in de pagina (banner): blijft staan tot hij is opgelost ---------- */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-line-height);
}
.banner > .icoon {
  flex: none;
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  margin-top: var(--space-05);
}
.banner.is-fout > .icoon {
  color: var(--color-error);
}
.banner.is-gelukt > .icoon {
  color: var(--color-success);
}
.banner.is-let-op > .icoon {
  color: var(--color-warning);
}

/* iconen in de components: altijd de kleine maat, de kleur volgt de tekst */
:is(.list-item, .menu-item, .accordion summary, .pagination, .tab, .banner, .toast) .icoon {
  flex: none;
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}
.list-item > .icoon {
  color: var(--color-on-surface-variant);
}

/* contact-bubble: een foto rechtsonder, vast in beeld. Een klik opent een kaartje met naam, uitleg en mailadres.
   Voor wie hulp nodig heeft tijdens het invullen. Zonder foto staan er initialen. */
.contact-bubble {
  position: fixed;
  right: calc(var(--space-unit) * 5.5 + env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-unit) * 5.5 + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-menu);
  display: grid;
  justify-items: end;
  gap: var(--space-3);
}
.contact-bubble-knop {
  display: grid;
  place-items: center;
  width: var(--space-14);
  height: var(--space-14);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-2);
  cursor: pointer;
}
.contact-bubble-knop:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--border-width-strong);
}
.contact-bubble-foto {
  display: grid;
  place-items: center;
  width: calc(var(--space-unit) * 13.5);
  height: calc(var(--space-unit) * 13.5);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
}
.contact-bubble-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-bubble-kaart {
  position: relative;
  display: grid;
  gap: var(--space-3);
  width: min(calc(100vw - 2 * var(--space-4)), calc(var(--space-unit) * 80));
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-3);
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface);
}
.contact-bubble-kaart[hidden] {
  display: none;
}
/* sluitkruisje rechtsboven in het kaartje */
/* op de telefoon kleiner en dichter in de hoek, zodat hij minder van de pagina afdekt */
@media (max-width: 734px) {
  .contact-bubble {
    right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }
  .contact-bubble-knop {
    width: var(--size-control-md);
    height: var(--size-control-md);
  }
  .contact-bubble-foto {
    width: calc(var(--size-control-md) - var(--space-05));
    height: calc(var(--size-control-md) - var(--space-05));
  }
}
.contact-bubble-sluit {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  place-items: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  cursor: pointer;
}
.contact-bubble-sluit svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}
.contact-bubble-sluit:hover {
  background: var(--color-surface-container-high);
}
.contact-bubble-sluit:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-05);
}
.contact-bubble-kaart p {
  margin: 0;
}
/* de eerste alinea houdt ruimte vrij voor het kruisje */
.contact-bubble-kaart .contact-bubble-sluit + p {
  padding-right: var(--size-control-sm);
}
.contact-bubble-kaart b {
  display: block;
  font-size: var(--font-size-md);
  color: var(--color-heading);
}
.contact-bubble-mail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.contact-bubble-adres {
  color: var(--color-link);
  user-select: all;
  overflow-wrap: anywhere;
}
/* ---------- 30-gidspaginas: algemene opmaak van elke pagina ----------
   Regels voor gewone elementen (body, koppen, tekst, links, tabellen), de beeldenrij (galerij), de navigatie
   bovenaan een site (gn, ln) en de typeschaal als klassen (.type-...).
   Let op: de regels voor gewone elementen gelden voor elke pagina van elk merk. Ze komen uit de oude YAM-site
   en horen eigenlijk in 10-systeem-basis. Ze staan hier omdat verplaatsen de volgorde verandert. */

/* ---------- tokenwaarden in de gids ---------- */
.layer-tag {
  display: inline-flex;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-relaxed);
  background: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  white-space: nowrap;
}

@media (max-width: 734px) {
  .band-inverse {
    padding: var(--space-5);
  }
}

/* blokken die maar bij één merk horen */
[data-only] {
  display: none;
}
[data-brand="westayhere"] [data-only="westayhere"],
[data-brand="yam"] [data-only="yam"],
[data-brand="fxr"] [data-only="fxr"],
[data-brand="ppp"] [data-only="ppp"] {
  display: grid;
}

/* ---------- gewone elementen ---------- */

* {
  box-sizing: border-box;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
body {
  color: var(--color-on-surface);
  font-family: var(--font-family-text);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-text);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-display);
  color: var(--color-heading);
  text-wrap: balance;
  margin: 0;
}
a {
  color: inherit;
}
code {
  font-family: var(--font-family-mono);
  font-size: 0.92em;
}
.nav {
  --color-surface: var(--color-band-alt);
  --color-outline-variant: var(--color-outline-subtle);
  --color-nav-link: var(--color-action);
  --color-nav-link-muted: var(--color-on-surface-variant);
  --color-nav-chevron: var(--color-fill-strong);
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.inner {
  max-width: var(--kolom);
  margin: 0 auto;
  padding-inline: var(--layout-gutter-mobile);
}
p {
  margin: 0 0 var(--space-3);
  max-width: 62ch;
  line-height: var(--line-height-normal);
}
p:last-child {
  margin-bottom: 0;
}

.galerij {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-inline: max(var(--layout-gutter-mobile), calc(50% - 457px)); /* lint: mag, lijnt uit met de kolom van de gids */
  scroll-padding-inline: max(var(--layout-gutter-mobile), calc(50% - 457px)); /* lint: mag, lijnt uit met de kolom van de gids */
  padding-bottom: var(--space-3);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.galerij::-webkit-scrollbar {
  display: none;
}
.galerij figure {
  flex: none;
  margin: 0;
}
.galerij img {
  display: block;
  height: var(--h);
  width: auto;
  max-width: none;
  border-radius: var(--radius-xs);
  background: var(--color-surface-container-lowest);
}
.galerij figcaption {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  letter-spacing: -0.01em;
  color: var(--color-on-surface);
  margin-top: var(--space-2);
  width: 0;
  min-width: 100%;
}
.stippen {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.stippen button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-on-surface);
  opacity: 0.22;
  cursor: pointer;
  transition: opacity var(--duration-fast) ease;
}
.stippen button[aria-current="true"] {
  opacity: 0.85;
}
.stippen button:focus-visible {
  outline: var(--border-width-strong) solid var(--color-on-surface);
  outline-offset: 3px;
}
/* tokennamen breken niet af op een koppelteken */
main code {
  white-space: nowrap;
}
/* bediening bij acht of meer slides: pijlen met een teller (bediening.js) */
.bediening-teller {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.teller {
  min-width: 5ch;
  text-align: center;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 734px) {
  .galerij img {
    height: calc(var(--h) * 0.62);
  }
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 540px;
  font-size: var(--font-size-sm);
}
th,
td {
  text-align: left;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: var(--border-width-default) solid var(--color-outline-subtle);
  vertical-align: top;
}
th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  border-bottom-color: var(--color-outline-variant);
}
@media (min-width: 735px) {
  .galerij {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1069px) {
  body {
    display: grid;
    grid-template-columns: var(--nav) 1fr;
    align-items: start;
  }
  .nav {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    height: 100vh;
    overflow-y: auto;
    border-bottom: 0;
    border-right: var(--border-width-default) solid var(--color-outline-variant);
  }
  .inner {
    padding-inline: 0;
  }
}

.geen-lijn {
  border-bottom: 0;
}
/* mobiel: de kiezer staat onder het logo in plaats van eroverheen */
body {
  background: var(--color-surface);
}
section {
  scroll-margin-top: var(--space-20);
  padding-block: clamp(56px, 7.5vw, var(--space-24));
  border-bottom: 0;
}
.galerij img {
  border-radius: var(--radius-card);
}
.galerij figure {
  scroll-snap-align: start;
  scroll-margin-left: 0;
}
a:focus-visible,
button:focus-visible {
  outline: var(--border-width-strong) solid var(--color-on-surface);
  outline-offset: 2px;
}
/* lichte band: de rol surface-dim (bij WeStayHere zand). .sand is de oude naam, tijdelijk, tot de YAM- en PPP-bronnen zijn omgezet */
section:is(.section-dim, .sand) {
  background: var(--color-primary-container);
  --color-surface-container-lowest: var(--color-surface);
}

.hl-knop {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 0;
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity var(--duration-fast);
}
.hl-knop svg {
  width: 16px;
  height: 16px;
}
.hl-knop:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (min-width: 1069px) {
  main .inner {
    max-width: var(--layout-container);
    padding-inline: var(--layout-margin);
    box-sizing: border-box;
  }
  .galerij {
    padding-inline: var(--layout-margin);
    scroll-padding-inline: var(--layout-margin);
  }
}
/* sectiekop op één regel: schaalt mee met de kolom zodat lange koppen niet breken */
@media (min-width: 1069px) {
  main .inner {
    box-sizing: border-box;
  }

  main .galerij {
    padding-inline: max(
      var(--layout-gutter-desktop),
      calc((100% - var(--layout-container)) / 2 + var(--layout-gutter-desktop))
    );
    scroll-padding-inline: max(
      var(--layout-gutter-desktop),
      calc((100% - var(--layout-container)) / 2 + var(--layout-gutter-desktop))
    );
  }
}
/* ===== Navigatie bovenaan: globale balk + vaste subnavigatie ===== */
:root {
  color-scheme: light;
  --kaart-gap: var(--space-4);
  --kolom: 1120px;
  --nav: 0px;
}
html {
  scroll-padding-top: var(--space-16);
}
body {
  display: block;
}
.nav {
  position: relative;
  height: auto;
  overflow: visible;
  border: 0;
  background: transparent;
  z-index: 60;
}
/* globale balk van de gids: de navigatiekleur van het merk (color-nav-global en de tekstrollen erbij), standaard de lichte grond */
.gn {
  background: var(--color-nav-global);
  color: var(--color-on-nav-global);
}
.gn-in {
  max-width: var(--layout-container);
  margin: 0 auto;
  padding: 0 var(--layout-gutter-desktop);
  box-sizing: border-box;
  height: var(--size-nav-height);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.gn-merk {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-on-nav-global);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  flex: none;
}

.gn-lijst {
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
}
.gn-lijst a,
.gn-lijst [role="link"] {
  display: block;
  padding: 0 var(--space-2);
  line-height: var(--line-height-loose);
  font-size: var(--font-size-xs);
  letter-spacing: -0.01em;
  color: var(--color-nav-global-muted);
  text-decoration: none;
  transition: color var(--duration-fast);
  white-space: nowrap;
}
.gn-lijst a:hover,
.gn-lijst a[aria-current] {
  color: var(--color-on-nav-global);
}
.gn-knop {
  display: none;
}
/* subnavigatie */
.ln {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: var(--border-width-default) solid var(--color-outline-subtle);
}
.ln-in {
  max-width: var(--layout-container);
  margin: 0 auto;
  padding: 0 var(--layout-gutter-desktop);
  box-sizing: border-box;
  height: 52px;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.ln-titel {
  font-size: var(--font-size-type-lead-md); /* 21 px */
  line-height: var(--line-height-loose);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  letter-spacing: -0.3px;
  color: var(--color-on-surface);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.ln-lijst {
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent, #000 var(--space-3), #000 calc(100% - var(--space-3)), transparent); /* lint: mag, zwart is hier het masker, geen kleur */
}
.ln-lijst::-webkit-scrollbar {
  display: none;
}
.ln-lijst li {
  flex: none;
}
.ln-lijst a {
  display: block;
  padding: 0 var(--space-05);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-loose);
  color: var(--color-on-surface-variant);
  text-decoration: none;
  white-space: nowrap;
  font-weight: var(--font-weight-text, var(--font-weight-regular));
}
.ln-lijst a:hover {
  color: var(--color-on-surface);
}
.ln-knop {
  display: none;
}
/* mobiel en tablet */
@media (max-width: 1068px) {
  .gn-in,
  .ln-in {
    padding: 0 var(--layout-gutter-mobile);
  }
}
@media (max-width: 1199px) {
  .gn-knop {
    display: grid;
    gap: var(--space-15);
    margin-left: auto;
    width: 36px;
    height: 36px;
    place-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
  }
  .gn-knop span {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--color-on-nav-global);
    transition: transform var(--duration-fast);
  }
  .gn-open .gn-knop span:first-child {
    transform: translateY(3.75px) rotate(45deg);
  }
  .gn-open .gn-knop span:last-child {
    transform: translateY(-3.75px) rotate(-45deg);
  }
  .gn-lijst {
    display: none;
  }
  .gn-open .gn-lijst {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--space-12);
    background: var(--color-nav-global);
    padding: var(--space-2) var(--layout-gutter-mobile) var(--space-6);
    z-index: 70;
  }
  .gn-open .gn-lijst a,
  .gn-open .gn-lijst [role="link"] {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-loose);
    padding: 0;
    color: var(--color-on-nav-global);
  }
  .ln-titel {
    font-size: var(--font-size-type-lead-md);
  }
  .ln-knop {
    display: grid;
    place-items: center;
    margin-left: auto;
    width: 36px;
    height: 36px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--color-on-surface);
  }
  .ln-knop svg {
    width: 16px;
    height: 16px;
    transition: transform var(--duration-fast);
  }
  .ln-open .ln-knop svg {
    transform: rotate(180deg);
  }
  .ln-lijst {
    display: none;
    mask-image: none;
  }
  .ln-open .ln-lijst {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--space-12);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: var(--space-2) var(--layout-gutter-mobile) var(--space-5);
    border-bottom: var(--border-width-default) solid var(--color-outline-subtle);
    max-height: 70vh;
    overflow-y: auto;
  }
  .ln-open .ln-lijst a {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-loose);
    border-bottom: var(--border-width-default) solid var(--color-outline-subtle);
  }
}
.nav .gn-lijst {
  margin-left: auto;
}
.ln .ln-lijst {
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--space-4)), transparent); /* lint: mag, zwart is hier het masker, geen kleur */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--space-4)), transparent); /* lint: mag, zwart is hier het masker, geen kleur */
}
@media (max-width: 1199px) {
  .ln-open .ln-lijst {
    background: var(--color-surface);
    -webkit-mask-image: none;
    mask-image: none;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--color-shadow) 8%, transparent);
  }
  .ln-open .ln {
    background: var(--color-surface);
  }
}
.gn-logo {
  display: block;
  height: 18px;
  width: auto;
}
.ln .ln-lijst,
.ln-lijst {
  -webkit-mask-image: none;
  mask-image: none;
}
/* ---------- iconen: verkeerd gebruik, goed naast fout ---------- */
@media (min-width: 1069px) {
  main .inner {
    max-width: var(--layout-container);
    padding-inline: var(--layout-gutter-desktop);
  }
}

.ln-lijst a[aria-current] {
  color: var(--color-on-surface);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
}

/* Horizontale schuifstroken vangen het verticale scrollen van de pagina niet meer op.
   overflow-x:auto maakt een element ook verticaal scrollbaar; daardoor bleef het wiel
   boven een beeldenrij of een brede tabel hangen in plaats van de pagina te scrollen. */
.galerij {
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
html:not(.ln-open) .ln-lijst {
  overflow-y: hidden;
  touch-action: pan-x pan-y;
}

/* diktes in tekst: twee diktes. Lopende tekst in font-weight-text, nadruk in font-weight-text-strong.
   Vet in een zin (b, strong) is dus één stap zwaarder dan de tekst, niet bold; bold is voor koppen.
   :where houdt dit op specificiteit 0, zodat een component dat iets anders wil (intro-copy, made-feature-heading) altijd wint. */
:where(p, li, dd, dt, figcaption, td, blockquote, summary) :where(b, strong) {
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
}

/* typeschaal als klassen: zet .type-headline-md enz. op een element om die stap te gebruiken. Letter en gewicht komen van het element zelf */
.type-display-lg {
  font-size: var(--font-size-type-display-lg);
  line-height: var(--line-height-type-display-lg);
}
.type-body-sm {
  font-size: var(--font-size-type-body-sm);
  line-height: var(--line-height-type-body-sm);
}
@media (max-width: 1068px) {
  :root,
  [data-brand],
  .merkbalk {
    --space-section: var(--space-section-md);
    --space-section-reduced: var(--space-section-reduced-md);
    --size-feature-card-width: var(--size-feature-card-width-tablet);
    --size-feature-card-height: var(--size-feature-card-height-tablet);
    --font-size-type-display-2xl: 96px;
    --font-size-type-display-xl: 80px;
    --font-size-type-display-lg: 64px;
    --font-size-type-display-md: 56px;
    --font-size-type-headline-lg: 40px;
    --font-size-type-headline-md: 40px;
    --font-size-type-headline-sm: 32px;
    --font-size-type-title-lg: 28px;
    --font-size-type-title-md: 24px;
    --font-size-type-title-sm: 24px;
    --font-size-type-lead-lg: 21px;
    --font-size-type-lead-md: var(--type-body-l-size);
    --font-size-type-lead-sm: var(--type-body-l-size);
    --font-size-type-body: var(--type-body-m-size);
    --font-size-type-body-sm: var(--type-body-s-size);
    --font-size-type-caption: 12px;
  }
}
@media (max-width: 734px) {
  :root,
  [data-brand],
  .merkbalk {
    --layout-cap: var(--layout-width-content-sm);
    --space-section: var(--space-section-sm);
    --space-section-reduced: var(--space-section-reduced-sm);
    --size-feature-card-height: var(--size-feature-card-height-sm);
    --font-size-type-display-2xl: 64px;
    --font-size-type-display-xl: 56px;
    --font-size-type-display-lg: 48px; /*: grote koppen zakken op mobiel naar ca. 60% */
    --font-size-type-display-md: 40px;
    --font-size-type-headline-lg: 32px;
    --font-size-type-headline-md: 28px;
    --font-size-type-headline-sm: 28px;
    --font-size-type-title-lg: 24px;
    --font-size-type-title-md: 21px;
    --font-size-type-title-sm: 21px;
    --font-size-type-lead-lg: 19px;
    --font-size-type-lead-md: 19px;
    --font-size-type-lead-sm: 17px;
    --font-size-type-body: var(--type-body-m-size);
    --font-size-type-body-sm: var(--type-body-s-size);
    --font-size-type-caption: 12px;
  }
}

/* nieuwe typeschaal (WeStayHere): koppen een stap kleiner; de oude type-maten volgen de rollen */
@media (max-width: 1068px) {
  :root,
  [data-brand],
  .merkbalk {
    --type-display-l-size: calc(var(--font-size-base) * 5);
    --type-display-m-size: calc(var(--font-size-base) * 4);
    --type-display-s-size: calc(var(--font-size-base) * 3.5);
    --type-headline-l-size: calc(var(--font-size-base) * 3);
    --type-headline-m-size: calc(var(--font-size-base) * 2.5);
    --type-headline-s-size: calc(var(--font-size-base) * 2);
    --type-title-l-size: calc(var(--font-size-base) * 1.75);
    --type-title-m-size: calc(var(--font-size-base) * 1.5);
    --type-title-s-size: calc(var(--font-size-base) * 1.3125);
    --font-size-type-display-xl: var(--type-display-l-size);
    --line-height-type-display-xl: var(--type-display-l-line-height);
    --font-size-type-display-lg: var(--type-display-m-size);
    --line-height-type-display-lg: var(--type-display-m-line-height);
    --font-size-type-display-md: var(--type-display-s-size);
    --line-height-type-display-md: var(--type-display-s-line-height);
    --font-size-type-headline-lg: var(--type-headline-m-size);
    --line-height-type-headline-lg: var(--type-headline-m-line-height);
    --font-size-type-headline-md: var(--type-headline-m-size);
    --line-height-type-headline-md: var(--type-headline-m-line-height);
    --font-size-type-headline-sm: var(--type-headline-s-size);
    --line-height-type-headline-sm: var(--type-headline-s-line-height);
    --font-size-type-title-lg: var(--type-title-l-size);
    --line-height-type-title-lg: var(--type-title-l-line-height);
    --font-size-type-title-md: var(--type-title-l-size);
    --line-height-type-title-md: var(--type-title-l-line-height);
    --font-size-type-title-sm: var(--type-title-m-size);
    --line-height-type-title-sm: var(--type-title-m-line-height);
    --font-size-type-lead-lg: var(--type-title-s-size);
    --line-height-type-lead-lg: var(--type-title-s-line-height);
    --font-size-type-lead-md: var(--type-body-l-size);
    --line-height-type-lead-md: var(--type-body-l-line-height);
    --font-size-type-lead-sm: var(--type-body-l-size);
    --line-height-type-lead-sm: var(--type-body-l-line-height);
    --font-size-type-body: var(--type-body-m-size);
    --line-height-type-body: var(--type-body-m-line-height);
    --font-size-type-body-sm: var(--type-body-s-size);
    --line-height-type-body-sm: var(--type-body-s-line-height);
    --font-size-type-caption: var(--type-label-s-size);
    --line-height-type-caption: var(--type-label-s-line-height);
    --font-size-type-display-2xl: calc(var(--type-display-l-size) * 1.375);
    --line-height-type-display-2xl: var(--type-display-l-line-height);
    --font-size-type-stat: var(--type-headline-m-size);
  }
}
@media (max-width: 734px) {
  :root,
  [data-brand],
  .merkbalk {
    --type-display-l-size: calc(var(--font-size-base) * 3.5);
    --type-display-m-size: calc(var(--font-size-base) * 3);
    --type-display-s-size: calc(var(--font-size-base) * 2.5);
    --type-headline-l-size: calc(var(--font-size-base) * 2);
    --type-headline-m-size: calc(var(--font-size-base) * 1.75);
    --type-headline-s-size: calc(var(--font-size-base) * 1.75);
    --type-title-l-size: calc(var(--font-size-base) * 1.5);
    --type-title-m-size: calc(var(--font-size-base) * 1.3125);
    --type-title-s-size: calc(var(--font-size-base) * 1.1875);
    --type-body-l-size: calc(var(--font-size-base) * 1.1875);
    --font-size-type-display-xl: var(--type-display-l-size);
    --line-height-type-display-xl: var(--type-display-l-line-height);
    --font-size-type-display-lg: var(--type-display-m-size);
    --line-height-type-display-lg: var(--type-display-m-line-height);
    --font-size-type-display-md: var(--type-display-s-size);
    --line-height-type-display-md: var(--type-display-s-line-height);
    --font-size-type-headline-lg: var(--type-headline-m-size);
    --line-height-type-headline-lg: var(--type-headline-m-line-height);
    --font-size-type-headline-md: var(--type-headline-m-size);
    --line-height-type-headline-md: var(--type-headline-m-line-height);
    --font-size-type-headline-sm: var(--type-headline-s-size);
    --line-height-type-headline-sm: var(--type-headline-s-line-height);
    --font-size-type-title-lg: var(--type-title-l-size);
    --line-height-type-title-lg: var(--type-title-l-line-height);
    --font-size-type-title-md: var(--type-title-l-size);
    --line-height-type-title-md: var(--type-title-l-line-height);
    --font-size-type-title-sm: var(--type-title-m-size);
    --line-height-type-title-sm: var(--type-title-m-line-height);
    --font-size-type-lead-lg: var(--type-title-s-size);
    --line-height-type-lead-lg: var(--type-title-s-line-height);
    --font-size-type-lead-md: var(--type-body-l-size);
    --line-height-type-lead-md: var(--type-body-l-line-height);
    --font-size-type-lead-sm: var(--type-body-l-size);
    --line-height-type-lead-sm: var(--type-body-l-line-height);
    --font-size-type-body: var(--type-body-m-size);
    --line-height-type-body: var(--type-body-m-line-height);
    --font-size-type-body-sm: var(--type-body-s-size);
    --line-height-type-body-sm: var(--type-body-s-line-height);
    --font-size-type-caption: var(--type-label-s-size);
    --line-height-type-caption: var(--type-label-s-line-height);
    --font-size-type-display-2xl: calc(var(--type-display-l-size) * 1.375);
    --line-height-type-display-2xl: var(--type-display-l-line-height);
    --font-size-type-stat: var(--type-headline-m-size);
  }
}
/* ---------- documentatie: de merkgids met inhoudsopgave en leeskolom ----------
   Laag 1. Links een vaste inhoudsopgave, rechts één leeskolom. Elke pagina heeft dezelfde blokken:
   kop (titel, samenvatting), beeld, secties met best practices, tips voor ontwikkelaars,
   per toepassing, en onderaan gerelateerd en bladeren. Alleen rollen en tokens. */

:root,
[data-brand],
.merkbalk {
  /* alles in één gecentreerde kolom zo breed als layout-width-narrow (980): inhoudsopgave 200, ruimte 40, tekst 740. De marge is layout-margin, net als op de site */
  --doc-nav-width: calc(var(--space-unit) * 50);
  --doc-content-width: calc(var(--doc-page-width) - var(--doc-nav-width) - var(--space-10));
  --doc-page-width: var(--layout-width-narrow);
  --doc-top-height: var(--size-nav-height);
  /* rondingen van de gids zelf: ze volgen de rollen van Shape. Een merk kan ze in laag 2 overschrijven */
  --doc-radius-vlak: var(--radius-card);
  --doc-radius-kaart: var(--radius-card);
  --doc-radius-veld: var(--radius-control);
  --doc-radius-pil: var(--radius-chip);
}

body.doc {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-family-text);
}

/* bovenbalk van de gids: merknaam en wat dit is */
.doc-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--doc-top-height);
  padding-inline: max(var(--layout-margin), calc((100% - var(--doc-page-width)) / 2));
  background: color-mix(in srgb, var(--color-nav-global) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); /* lint: mag, zoals de globale balk */
  backdrop-filter: saturate(180%) blur(20px); /* lint: mag, zoals de globale balk */
  border-bottom: var(--border-width-default) solid var(--color-outline-subtle);
  color: var(--color-on-nav-global);
}
.doc-top-merk {
  font-family: var(--font-family-display);
  font-size: var(--type-label-l-size);
  letter-spacing: var(--type-label-l-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-l-line-height);
  color: inherit;
  text-decoration: none;
}
.doc-top-wat {
  font-size: var(--type-label-l-size);
  letter-spacing: var(--type-label-l-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-l-line-height);
  color: var(--color-nav-global-muted);
}
/* lokale navigatie rechts: Overview, What's New, Get Started, Guidelines, Resources */
.doc-top-links {
  display: flex;
  gap: var(--space-6);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.doc-top-links a {
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
  color: var(--color-nav-global-muted);
  text-decoration: none;
}
.doc-top-links a:hover {
  color: var(--color-on-nav-global);
}
.doc-top-links a[aria-current="page"] {
  color: var(--color-on-nav-global);
  font-weight: var(--type-label-weight);
}
/* weergave: de drie thema's Light, Dark en Sand. Een gesegmenteerde knop; het script zet data-modus op html */
.doc-top-thema {
  display: flex;
  align-items: center;
}
.doc-thema {
  display: inline-flex;
  padding: var(--space-05);
  border: var(--border-width-default) solid var(--color-primary);
  border-radius: var(--doc-radius-pil);
}
.doc-thema button {
  padding: var(--space-05) var(--space-2);
  font: inherit;
  font-size: var(--type-label-s-size);
  letter-spacing: var(--type-label-s-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-s-line-height);
  color: var(--color-primary);
  background: none;
  border: 0;
  border-radius: var(--doc-radius-pil);
  cursor: pointer;
}
.doc-thema button[aria-checked="true"] {
  color: var(--color-on-primary);
  background: var(--color-primary);
}
.doc-top-menu {
  display: none;
}
.doc-nav-knop {
  display: none;
}

/* raster: inhoudsopgave en leeskolom */
.doc-shell {
  display: grid;
  grid-template-columns: var(--doc-nav-width) minmax(0, 1fr);
  column-gap: var(--space-10);
  align-items: start;
  box-sizing: content-box;
  max-width: var(--doc-page-width);
  margin-inline: auto;
  padding-inline: var(--layout-margin);
}

/* inhoudsopgave */
.doc-nav {
  position: sticky;
  top: var(--doc-top-height);
  height: calc(100vh - var(--doc-top-height));
  overflow-y: auto;
  box-sizing: border-box;
  padding: var(--space-6) 0 var(--space-12);
}
.doc-zoek {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
  color: var(--color-on-surface);
  background: var(--color-surface-container-lowest);
  border: var(--border-width-default) solid var(--color-outline-variant);
  border-radius: var(--doc-radius-veld);
}
.doc-zoek::placeholder {
  color: var(--color-on-surface-muted);
}
.doc-nav-groep {
  margin: 0 0 var(--space-4);
}
.doc-nav-groep > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  list-style: none;
  cursor: pointer;
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
  color: var(--color-on-surface);
}
.doc-nav-groep > summary::-webkit-details-marker {
  display: none;
}
.doc-nav-groep > summary svg {
  width: var(--space-3);
  height: var(--space-3);
  flex: none;
  color: var(--color-on-surface-muted);
  transition: transform var(--duration-fast) ease;
}
.doc-nav-groep[open] > summary svg {
  transform: rotate(90deg);
}
.doc-nav-groep ul {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
}
.doc-nav-groep a {
  display: block;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-8);
  border-radius: var(--doc-radius-veld);
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
  color: var(--color-on-surface-variant);
  text-decoration: none;
}
.doc-nav-groep a:hover {
  color: var(--color-on-surface);
  background: var(--color-choice-hover);
}
.doc-nav-groep a[aria-current="page"] {
  color: var(--color-on-surface);
  font-weight: var(--type-label-weight);
  background: var(--color-surface-container-low);
}
.doc-nav-groep a.is-leeg {
  color: var(--color-on-surface-muted);
}

/* leeskolom */
.doc-main {
  min-width: 0;
  padding: var(--space-10) 0 var(--space-24);
}
.doc-artikel {
  max-width: var(--doc-content-width);
}

/* kop van de pagina */
.doc-titel {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--type-headline-m-size);
  font-weight: var(--type-headline-weight);
  text-transform: var(--text-case-heading, none);
  line-height: var(--type-headline-m-line-height);
  letter-spacing: var(--type-headline-m-tracking);
  color: var(--color-heading);
  text-wrap: balance;
}
.doc-samenvatting {
  margin: var(--space-4) 0 0;
  max-width: var(--layout-width-reading);
  font-size: var(--type-body-l-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-l-line-height);
  letter-spacing: var(--type-body-l-tracking);
  color: var(--color-on-surface);
}
.doc-beeld {
  margin: var(--space-10) 0 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--doc-radius-vlak);
  background: var(--color-media-placeholder);
  display: grid;
  place-items: center;
  color: var(--color-on-surface-muted);
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
}
.doc-beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* secties */
.doc-sectie {
  margin-top: var(--space-16);
  padding-block: 0;
  scroll-margin-top: calc(var(--doc-top-height) + var(--space-6));
}
.doc-sectie > h2 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-family-title);
  font-size: var(--type-title-l-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-l-line-height);
  letter-spacing: var(--type-title-l-tracking);
  color: var(--color-heading);
}
.doc-sectie h3 {
  margin: var(--space-8) 0 var(--space-3);
  font-family: var(--font-family-title);
  font-size: var(--type-title-s-size);
  letter-spacing: var(--type-title-s-tracking);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-s-line-height);
  color: var(--color-heading);
}
.doc-sectie p,
.doc-sectie li {
  max-width: var(--layout-width-reading);
  font-size: var(--type-body-m-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-m-line-height);
  letter-spacing: var(--type-body-m-tracking);
  color: var(--color-on-surface);
}
.doc-sectie p {
  margin: 0 0 var(--space-4);
}
.doc-sectie b,
.doc-sectie strong {
  font-weight: var(--type-label-weight);
  color: var(--color-on-surface);
}
.doc-sectie code {
  font-family: var(--font-family-mono);
  font-size: 0.9em; /* lint: mag, code iets kleiner dan de tekst eromheen */
  color: var(--color-on-surface);
}
.doc-sectie a {
  color: var(--color-link);
}

/* best practice: een vette eerste zin met de uitleg erachter */
.doc-regel {
  margin: 0 0 var(--space-5);
}
/* regel met een vette opening: de opening in de tekstkleur, de uitleg als tweede toon */
.doc-sectie .doc-regel {
  color: var(--color-on-surface-variant);
}

/* lijst van de hoofdstukken of van kenmerken */
.doc-lijst {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}
.doc-lijst li {
  margin-bottom: var(--space-2);
}

/* kader voor ontwikkelaars of een opmerking */
.doc-noot {
  max-width: var(--layout-width-reading);
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-surface-container-low);
}
.doc-noot-kop {
  margin: 0 0 var(--space-2);
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
  color: var(--color-on-surface);
}
.doc-noot p {
  margin: 0;
}

/* tabel, zoals de stijlen van een knop */
.doc-tabel {
  width: 100%;
  min-width: 0;
  max-width: var(--layout-width-reading);
  border-collapse: collapse;
  margin: var(--space-4) 0 var(--space-6);
}
.doc-tabel th,
.doc-tabel td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: var(--border-width-default) solid var(--color-outline-subtle);
  font-size: var(--type-body-s-size);
  letter-spacing: var(--type-body-s-tracking);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-s-line-height);
}
.doc-tabel th {
  font-size: var(--type-label-m-size);
  line-height: var(--type-label-m-line-height);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-m-tracking);
  text-transform: none;
  color: var(--color-on-surface);
  border-bottom-color: var(--color-outline-variant);
}
.doc-tabel td {
  color: var(--color-on-surface);
}

/* voorbeeld: een vlak waarin een component live staat */
.doc-voorbeeld {
  margin: var(--space-6) 0 var(--space-8);
  padding: var(--space-10) var(--space-8);
  border-radius: var(--doc-radius-vlak);
  background: var(--color-surface-container-low);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
}

/* voorbeeld met velden of een sectie: onder elkaar, links uitgelijnd */
.doc-voorbeeld.is-kolom {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
}
.doc-voorbeeld.is-kolom > .field {
  width: 100%;
}
.doc-voorbeeld.is-breed {
  display: block;
}
/* voorbeeld van een venster: het vel op de gedempte achtergrond */
.doc-modal-vlak {
  background: linear-gradient(var(--color-scrim-image), var(--color-scrim-image)), var(--color-surface-container-low);
  padding: var(--space-12) var(--space-6);
}
.doc-modal-vel {
  width: 100%;
  padding: var(--space-16) var(--space-6) var(--space-10);
}
.doc-modal-acties {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
/* alle iconen in de gids komen uit Lucide (systeem/iconen/lucide.json); de lijndikte uit icon-stroke-width */
svg.icoon {
  stroke-width: var(--icon-stroke-width);
}
/* statusiconen: een dikkere lijn, zodat ze bij een melding opvallen */
.doc-melding svg.icoon,
.doc-icoon-cel.is-status svg.icoon {
  stroke-width: var(--icon-stroke-width-strong);
}
.doc-icoon-cel {
  display: inline-flex;
  color: var(--color-on-surface);
}
.doc-icoon-cel svg {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
}
.doc-icoon-tabel td:nth-child(2) {
  width: calc(var(--space-unit) * 20);
}

/* icons: een raster van iconen met hun naam; de lijn komt uit icon-stroke-width */
.doc-iconen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
  margin: var(--space-4) 0 var(--space-8);
  padding: 0;
  list-style: none;
}
.doc-iconen.is-maten {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.doc-sectie .doc-iconen li {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  max-width: none;
  margin: 0;
  font-size: var(--type-body-s-size);
  letter-spacing: var(--type-body-s-tracking);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-s-line-height);
}
.doc-iconen b {
  margin-top: var(--space-2);
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
  color: var(--color-on-surface);
}
.doc-icoon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-card);
  background: var(--color-surface-container-low);
  color: var(--color-on-surface);
}
.doc-icoon svg {
  width: var(--doc-icoon, var(--size-icon-lg));
  height: var(--doc-icoon, var(--size-icon-lg));
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* shape: per rol een vlak met die ronding, en de ladder als rij hoeken */
.doc-vormen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10) var(--space-6);
  margin: var(--space-6) 0;
  padding: 0;
  list-style: none;
}
.doc-sectie .doc-vorm {
  max-width: none;
  margin: 0;
}
.doc-vorm-vlak {
  aspect-ratio: 4 / 3;
  background: var(--color-surface-container-lowest);
  border: var(--border-width-default) solid var(--color-outline-variant);
}
.doc-vorm-vlak.is-balk {
  aspect-ratio: auto;
  height: var(--doc-vorm-h);
}
.doc-vormen.is-balken,
.doc-vormen.is-vlakken {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.doc-vormen.is-balken .doc-vorm {
  display: grid;
  grid-template-rows: var(--size-button-lg) auto;
  align-items: end;
}
.doc-sectie .doc-vorm b {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--type-label-l-size);
  letter-spacing: var(--type-label-l-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-l-line-height);
}
.doc-sectie .doc-vorm span:not(.doc-hex) {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--type-body-s-size);
  letter-spacing: var(--type-body-s-tracking);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-s-line-height);
}
.doc-vorm-ladder {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
  padding: 0;
  list-style: none;
}
.doc-sectie .doc-vorm-ladder li {
  display: grid;
  gap: var(--space-1);
  max-width: none;
  margin: 0;
}
.doc-vorm-ladder i {
  display: block;
  aspect-ratio: 1;
  border-top: var(--border-width-strong) solid var(--color-on-surface);
  border-left: var(--border-width-strong) solid var(--color-on-surface);
}
.doc-vorm-ladder code {
  font-size: var(--type-label-s-size);
}

/* layout: het raster als schema (marge, twaalf kolommen, marge) en de ruimteladder als balkjes */
.doc-raster {
  display: grid;
  grid-template-columns: 6.25fr 87.5fr 6.25fr;
  height: calc(var(--space-unit) * 30);
  margin: var(--space-5) 0 var(--space-6);
  border-radius: var(--doc-radius-vlak);
  border: var(--border-width-default) solid var(--color-outline-subtle);
  overflow: hidden;
  background: var(--color-surface-container-low);
}
.doc-raster-kolommen {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-1);
}
.doc-raster-kolommen span {
  background: var(--color-selection);
  border-inline: var(--border-width-default) solid var(--color-selection-border);
}
.doc-ruimte {
  display: block;
  height: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-data-1);
}

/* typografie: de letter groot, en per rol een voorbeeld dat op één regel blijft */
.doc-letter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-8) 0;
  padding: var(--space-8);
  border-radius: var(--doc-radius-vlak);
  background: var(--color-surface-container-low);
  font-family: var(--font-family-display);
}
.doc-letter-groot {
  margin: 0;
  font-size: var(--type-display-l-size);
  letter-spacing: var(--type-display-l-tracking);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-l-line-height);
  color: var(--color-heading);
}
.doc-letter-reeks {
  margin: 0;
  font-size: var(--type-body-l-size);
  letter-spacing: var(--type-body-l-tracking);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-l-line-height);
  color: var(--color-on-surface-variant);
  overflow-wrap: anywhere;
}
.doc-type-voorbeeld {
  max-width: 0;
  width: 40%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-heading);
}

/* logo: het logo op een grond, met uitleg eronder. Wel en niet naast elkaar */
.doc-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
}
.doc-logos.is-vier {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.doc-logo {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  margin: 0;
}
.doc-logo.is-breed {
  grid-column: 1 / -1;
}
.doc-logo-vlak {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: var(--space-8);
  border-radius: var(--doc-radius-vlak);
  border: var(--border-width-default) solid var(--color-outline-subtle);
  overflow: hidden;
}
.doc-logo.is-breed .doc-logo-vlak {
  aspect-ratio: 3 / 1;
}
.doc-logo-vlak img {
  position: relative;
  width: 70%;
  max-height: 60%;
  object-fit: contain;
}
.doc-logo.is-breed .doc-logo-vlak img {
  width: 50%;
}
.doc-logo-vlak img[src*="Mark"] {
  width: 30%;
}
.doc-logo-vlak img.is-icoon {
  width: 34%;
  max-height: none;
}
.doc-logo-vlak img.is-uitgerekt {
  transform: scaleX(1.35) scaleY(0.7);
}
.doc-logo-vlak.is-beeld {
  align-items: flex-end;
  justify-content: flex-start;
}
.doc-logo-vlak.is-beeld {
  padding: var(--space-5);
}
.doc-logo-vlak.is-beeld img:not(.doc-logo-foto) {
  width: 40%;
}
.doc-logo-vlak img.doc-logo-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
.doc-logo-plaat {
  position: relative;
  display: flex;
  width: 60%;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--neutral-0);
}
.doc-logo-vlak .doc-logo-plaat img {
  width: 100%;
}
/* vrije ruimte: het logo op een vaste hoogte, de stippelrand op een kwart van die hoogte eromheen */
.doc-logo-ruimte {
  display: flex;
  padding: var(--space-2);
  outline: var(--border-width-default) dashed var(--color-outline);
}
.doc-logo-vlak .doc-logo-ruimte img {
  width: auto;
  height: var(--space-8);
  max-height: none;
}
.doc-logo-vlak img.is-klein {
  width: auto;
  height: calc(var(--space-unit) * 6);
}
.doc-logo figcaption {
  font-size: var(--type-body-s-size);
  letter-spacing: var(--type-body-s-tracking);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-s-line-height);
  color: var(--color-on-surface-variant);
}
.doc-logo figcaption b {
  display: block;
  color: var(--color-on-surface);
}
.doc-logo.is-niet figcaption::before {
  content: "Niet";
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-error);
}

/* beelden: een rij foto's, elk met de naam eronder */
.doc-beelden {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
  padding: 0;
  list-style: none;
}
.doc-beelden li {
  display: grid;
  gap: var(--space-2);
}
.doc-beelden img {
  aspect-ratio: 3 / 2;
  border-radius: var(--doc-radius-vlak);
  background: var(--color-media-placeholder);
}
.doc-beelden span {
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
  color: var(--color-on-surface-muted);
}

.doc-beelden li img {
  height: auto;
}
.doc-beelden-leeg {
  display: grid;
  place-items: center;
  padding: var(--space-2);
  text-align: center;
  aspect-ratio: 3 / 2;
  border-radius: var(--doc-radius-vlak);
  background: var(--color-media-placeholder);
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
  color: var(--color-on-surface-muted);
}

/* staten: dezelfde knop naast elkaar, met de naam van de staat eronder */
.doc-staten {
  gap: var(--space-6);
}
.doc-staten figure {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin: 0;
}
.doc-staten figcaption,
.doc-scrim figcaption,
.doc-grafiek > figcaption {
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
  color: var(--color-on-surface-muted);
}

/* grafiek: liggende staven, één in de merkkleur, de rest grijs; naam en getal bij elke staaf */
.doc-grafiek {
  margin: var(--space-8) 0 0;
  padding: var(--space-6);
  border-radius: var(--doc-radius-vlak);
  background: var(--color-surface-container-low);
}
.doc-grafiek ol {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
}
.doc-grafiek li {
  display: grid;
  grid-template-columns: calc(var(--space-unit) * 24) minmax(0, 1fr) calc(var(--space-unit) * 12);
  align-items: center;
  gap: var(--space-3);
  font-size: var(--type-body-s-size);
  letter-spacing: var(--type-body-s-tracking);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-s-line-height);
  color: var(--color-on-surface-variant);
}
.doc-grafiek i {
  display: block;
  width: calc(var(--doc-staaf) * 100%);
  height: var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--color-data-4);
}
.doc-grafiek li.is-nadruk i {
  background: var(--color-data-1);
}
.doc-grafiek li.is-nadruk b {
  color: var(--color-data-1);
}
.doc-grafiek b {
  color: var(--color-on-surface);
  font-variant-numeric: tabular-nums;
}
.doc-grafiek p {
  margin: 0;
  font-size: var(--type-body-s-size);
  letter-spacing: var(--type-body-s-tracking);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-s-line-height);
  color: var(--color-on-surface-variant);
}

/* tekst op beeld: dezelfde foto met en zonder scrim */
.doc-scrim {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
.doc-scrim figure {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}
.doc-scrim-beeld {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: var(--space-5);
  border-radius: var(--doc-radius-vlak);
  overflow: hidden;
  background: var(--color-media-placeholder);
}
.doc-scrim-beeld img,
.doc-beelden img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.doc-scrim-beeld img {
  position: absolute;
  inset: 0;
}
.doc-scrim-beeld.is-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-scrim-image);
}
.doc-scrim-beeld p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--type-title-s-size);
  letter-spacing: var(--type-title-s-tracking);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-s-line-height);
  color: var(--color-on-image);
}

/* uitsnedes: hetzelfde beeld in elke verhouding, met de naam eronder */
.doc-uitsnedes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-6) var(--space-4);
  margin: var(--space-6) 0;
  padding: 0;
  list-style: none;
}
.doc-uitsnedes li {
  display: grid;
  gap: var(--space-2);
  height: calc(var(--space-unit) * 40);
  grid-template-rows: minmax(0, 1fr) auto;
}
.doc-uitsnedes img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: cover;
  border-radius: var(--doc-radius-vlak);
  background: var(--color-media-placeholder);
}
.doc-uitsnedes .is-16-9 img { aspect-ratio: 16 / 9; }
.doc-uitsnedes .is-3-2 img { aspect-ratio: 3 / 2; }
.doc-uitsnedes .is-4-3 img { aspect-ratio: 4 / 3; }
.doc-uitsnedes .is-1-1 img { aspect-ratio: 1; }
.doc-uitsnedes .is-4-5 img { aspect-ratio: 4 / 5; }
.doc-uitsnedes span {
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
  color: var(--color-on-surface-muted);
}

/* contrast: een proefje van tekst op grond, met de gemeten verhouding ernaast */
.doc-proef {
  display: inline-grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  margin-right: var(--space-2);
  vertical-align: middle;
  border-radius: var(--radius-xs);
  border: var(--border-width-default) solid var(--color-outline-subtle);
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-label-m-line-height);
}
.doc-hex.is-te-laag {
  color: var(--color-error);
  font-weight: var(--font-weight-semibold);
}

/* stem: per principe een omschrijving, wat we zijn en niet zijn, en tactieken. Ruimte tussen principes zoals tussen secties */
.doc-principe {
  margin: var(--space-16) 0 0;
}
.doc-sectie .doc-principe h3 {
  margin-top: 0;
}
.doc-sectie h2 + .doc-principe {
  margin-top: var(--space-8);
}
.doc-wel-niet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin: var(--space-6) 0 0;
}
.doc-wel-niet > div {
  padding-top: var(--space-3);
  border-top: var(--border-width-default) solid var(--color-outline-subtle);
}
.doc-sectie .doc-wel-niet p,
.doc-sectie .doc-principe .doc-label {
  margin: 0 0 var(--space-1);
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
  color: var(--color-on-surface-muted);
}
.doc-sectie .doc-principe .doc-label {
  margin: var(--space-8) 0 var(--space-3);
}
.doc-wel-niet ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--type-body-m-size);
  letter-spacing: var(--type-body-m-tracking);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-m-line-height);
  color: var(--color-on-surface);
}
.doc-wel-niet li:not(:last-child)::after {
  content: ",\00a0";
}
.doc-wel-niet .is-niet ul {
  color: var(--color-on-surface-variant);
}

/* toon per moment: per moment een kaart met het doel, een balk per principe en de kanalen */
.doc-momenten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin: var(--space-8) 0;
  padding: 0;
  list-style: none;
}
.doc-moment {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6) var(--space-6);
  border-radius: var(--doc-radius-vlak);
  border: var(--border-width-default) solid var(--color-outline-subtle);
}
.doc-sectie .doc-moment h3 {
  margin: 0;
}
.doc-sectie .doc-moment > p {
  margin: 0;
}
.doc-schalen {
  display: grid;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-6);
}
.doc-schaal {
  display: grid;
  grid-template-columns: calc(var(--space-unit) * 20) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
  color: var(--color-on-surface-variant);
}
.doc-schaal i {
  display: block;
  height: var(--space-2);
  border-radius: var(--radius-chip);
  background: var(--color-outline-subtle);
}
.doc-schaal i::before {
  content: "";
  display: block;
  width: var(--waarde, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}
.doc-sectie .doc-moment .doc-kanalen {
  margin: var(--space-3) 0 0;
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
  color: var(--color-on-surface-muted);
}

/* gerelateerd: kaarten naar andere pagina's */
.doc-gerelateerd {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-unit) * 56), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.doc-gerelateerd a {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: var(--space-5);
  border-radius: var(--doc-radius-kaart);
  /* een kaart zonder rand: hij onderscheidt zich door zijn vlak, een stap af van de grond */
  background: var(--color-surface-container-low);
  text-decoration: none;
  transition: background-color var(--duration-fast) ease;
}
.doc-gerelateerd a:hover {
  background: var(--color-surface-container);
}
.doc-gerelateerd b {
  display: block;
  font-size: var(--type-label-l-size);
  letter-spacing: var(--type-label-l-tracking);
  line-height: var(--type-label-l-line-height);
  font-weight: var(--type-label-weight);
  color: var(--color-on-surface);
}
.doc-gerelateerd span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--type-body-s-size);
  letter-spacing: var(--type-body-s-tracking);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-s-line-height);
  color: var(--color-on-surface-variant);
}

/* onderaan: vorige en volgende, versie */
.doc-voet {
  margin-top: var(--space-24);
  padding-top: var(--space-6);
  border-top: var(--border-width-default) solid var(--color-outline-subtle);
}
.doc-bladeren {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.doc-bladeren a {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-decoration: none;
  font-size: var(--type-label-l-size);
  letter-spacing: var(--type-label-l-tracking);
  line-height: var(--type-label-l-line-height);
  font-weight: var(--type-label-weight);
  color: var(--color-link);
}
.doc-bladeren a span {
  font-size: var(--type-label-s-size);
  letter-spacing: var(--type-label-s-tracking);
  line-height: var(--type-label-s-line-height);
  font-weight: var(--type-label-weight);
  color: var(--color-on-surface-muted);
}
.doc-bladeren a[rel="next"] {
  margin-left: auto;
  text-align: right;
}
.doc-onder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-10);
  font-size: var(--type-label-s-size);
  letter-spacing: var(--type-label-s-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-s-line-height);
  color: var(--color-on-surface-muted);
}

/* resources: templates en bestanden om mee aan de slag te gaan Resources.
   Per toepassing een sectie met kaarten. Elke kaart: een vorm in de juiste verhouding,
   een naam, de maat, en per programma een link. Wat er nog niet is, staat er gedempt bij. */
.doc-sprong {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}
.doc-sprong a {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--doc-radius-pil);
  background: var(--color-surface-container-low);
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
  color: var(--color-on-surface);
  text-decoration: none;
}
.doc-sprong a:hover {
  background: var(--color-surface-container);
}
.doc-bronnen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-unit) * 48), 1fr));
  gap: var(--space-8) var(--space-6);
  margin: var(--space-6) 0 var(--space-5);
  padding: 0;
  list-style: none;
}
.doc-sectie .doc-bron {
  max-width: none;
  margin: 0;
}
.doc-bron-beeld {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: var(--color-surface-container-low);
}
/* de vorm van het template in zijn eigen verhouding, binnen een vaste rand */
.doc-bron-vorm {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: var(--doc-bron-vorm, 1);
  height: calc(100% - var(--space-5) * 2);
  max-width: calc(100% - var(--space-5) * 2);
  box-sizing: border-box;
  border-radius: var(--radius-xs);
  background: var(--color-media-placeholder);
  border: var(--border-width-default) solid var(--color-outline-subtle);
}
.doc-bron-vorm.is-breed {
  width: calc(100% - var(--space-5) * 2);
  height: auto;
  max-height: calc(100% - var(--space-5) * 2);
}
.doc-sectie .doc-bron h3 {
  margin: var(--space-4) 0 0;
  font-size: var(--type-title-s-size);
  letter-spacing: var(--type-title-s-tracking);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-s-line-height);
}
.doc-sectie .doc-bron-maat {
  margin: var(--space-1) 0 0;
  font-size: var(--type-body-s-size);
  letter-spacing: var(--type-body-s-tracking);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-s-line-height);
  color: var(--color-on-surface-muted);
}
.doc-bron-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.doc-sectie .doc-bron-links li {
  margin: 0;
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
}
.doc-bron-links a {
  font-weight: var(--type-label-weight);
  text-decoration: none;
}
.doc-bron-links a:hover {
  text-decoration: underline;
}
.doc-bron-links .is-leeg {
  color: var(--color-on-surface-muted);
  cursor: default;
}
.doc-sectie .doc-richtlijn {
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
}
.doc-richtlijn a {
  text-decoration: none;
}

/* volle pagina's zonder inhoudsopgave: Overview, What's New, Get Started, Resources */
.doc-vol {
  padding: var(--space-16) var(--layout-margin) var(--space-24);
}
.doc-pagina {
  max-width: var(--doc-page-width);
  margin-inline: auto;
}
.doc-held h1 {
  margin: 0;
  max-width: calc(var(--space-unit) * 200);
  font-family: var(--font-family-display);
  font-size: var(--type-headline-l-size);
  font-weight: var(--type-headline-weight);
  text-transform: var(--text-case-heading, none);
  line-height: var(--type-headline-l-line-height);
  letter-spacing: var(--type-headline-l-tracking);
  color: var(--color-heading);
  text-wrap: balance;
}
.doc-held > p {
  margin: var(--space-4) 0 0;
  max-width: var(--layout-width-reading);
  font-size: var(--type-lead-size);
  letter-spacing: var(--type-lead-tracking);
  font-weight: var(--type-body-weight);
  line-height: var(--type-lead-line-height);
  color: var(--color-on-surface);
}
.doc-vol .doc-sectie {
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: var(--border-width-default) solid var(--color-outline-subtle);
}
.doc-vol .doc-sectie > h2 {
  font-size: var(--type-headline-s-size);
  line-height: var(--type-headline-s-line-height);
  letter-spacing: var(--type-headline-s-tracking);
  font-weight: var(--type-headline-weight);
  text-transform: var(--text-case-heading, none);
}
.doc-vol .doc-voet {
  max-width: var(--doc-page-width);
  margin-inline: auto;
}

/* kaarten met beeld, tekst en een link: Overview en Get Started */
.doc-kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-unit) * 56), 1fr));
  gap: var(--space-8) var(--space-6);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}
.doc-sectie .doc-kaart {
  max-width: none;
  margin: 0;
}
.doc-kaart-beeld {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  background: var(--color-media-placeholder);
}
.doc-sectie .doc-kaart h3,
.doc-held .doc-kaart h3 {
  margin: var(--space-4) 0 0;
  font-family: var(--font-family-title);
  font-size: var(--type-title-s-size);
  letter-spacing: var(--type-title-s-tracking);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-s-line-height);
  color: var(--color-heading);
}
.doc-sectie .doc-kaart p,
.doc-held .doc-kaart p {
  margin: var(--space-2) 0 0;
  font-size: var(--type-body-s-size);
  letter-spacing: var(--type-body-s-tracking);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-s-line-height);
  color: var(--color-on-surface);
}
.doc-kaart-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.doc-sectie .doc-kaart-links li,
.doc-held .doc-kaart-links li {
  margin: 0;
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
}
.doc-kaart-links a {
  color: var(--color-link);
  text-decoration: none;
}
.doc-kaart-links a:hover {
  text-decoration: underline;
}
.doc-held .doc-kaarten {
  margin-top: var(--space-12);
}

/* What's New: per versie een datum, een kop en wat er veranderd is */
.doc-nieuw {
  margin: 0;
  padding: 0;
  list-style: none;
}
.doc-sectie .doc-nieuw > li {
  max-width: none;
  display: grid;
  grid-template-columns: calc(var(--space-unit) * 40) minmax(0, 1fr);
  gap: var(--space-6);
  margin: 0 0 var(--space-8);
}
.doc-nieuw time {
  font-size: var(--type-label-m-size);
  letter-spacing: var(--type-label-m-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
  color: var(--color-on-surface-muted);
}
.doc-sectie .doc-nieuw h3 {
  margin: 0 0 var(--space-2);
}

/* kleur: stalen, ladders en proefvlakken op de Color-pagina. De kleur zelf komt uit een token in de inhoud (style="background: var(--token)");
   hex en contrast schrijft het script van de pagina erbij, zodat ze altijd kloppen met de tokens */
.doc-kleurbalk {
  display: flex;
  height: calc(var(--space-unit) * 40);
  margin: var(--space-10) 0 0;
  overflow: hidden;
  border-radius: var(--doc-radius-vlak);
  border: var(--border-width-default) solid var(--color-outline-variant);
}
.doc-kleurbalk > div {
  flex: var(--doc-aandeel, 1);
}
.doc-stalen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-unit) * 36), 1fr));
  gap: var(--space-10) var(--space-6);
  margin: var(--space-6) 0;
  padding: 0;
  list-style: none;
}
.doc-sectie .doc-staal {
  max-width: none;
  margin: 0;
}
.doc-staal-vlak {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  border: var(--border-width-default) solid var(--color-outline-subtle);
}
.doc-sectie .doc-staal b {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--type-label-l-size);
  letter-spacing: var(--type-label-l-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-l-line-height);
}
.doc-sectie .doc-staal span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--type-body-s-size);
  letter-spacing: var(--type-body-s-tracking);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-s-line-height);
}
.doc-hex {
  font-family: var(--font-family-mono);
  font-size: var(--type-label-s-size);
  letter-spacing: var(--type-label-s-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-s-line-height);
  color: var(--color-on-surface-muted);
}
.doc-ladder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-unit) * 15), 1fr));
  gap: var(--space-3) var(--space-1);
  margin: var(--space-4) 0 var(--space-8);
  padding: 0;
  list-style: none;
}
.doc-sectie .doc-ladder li {
  margin: 0;
  max-width: none;
  font-size: var(--type-label-s-size);
  letter-spacing: var(--type-label-s-tracking);
  font-weight: var(--type-body-weight); /* uitzondering op label-s: de gekozen stappen zijn vet, de rest niet */
  line-height: var(--type-label-s-line-height);
}
.doc-ladder i {
  display: block;
  aspect-ratio: 1 / 1.4;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-2xs);
  border: var(--border-width-default) solid var(--color-outline-subtle);
}
.doc-ladder .doc-hex {
  display: block;
  font-size: var(--type-label-s-size);
  letter-spacing: var(--type-label-s-tracking);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-s-line-height);
}
.doc-ladder .is-vast {
  font-weight: var(--type-label-weight);
  color: var(--color-on-surface);
}
/* proefvlak: dezelfde tekst op licht en op donker */
.doc-panelen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-unit) * 64), 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-8);
}
.doc-paneel {
  padding: var(--space-6);
  border-radius: var(--doc-radius-vlak);
  border: var(--border-width-default) solid var(--color-outline-subtle);
}
.doc-paneel p {
  margin: 0 0 var(--space-3);
  color: inherit;
}
.doc-paneel .doc-paneel-kop {
  font-family: var(--font-family-title);
  font-size: var(--type-title-m-size);
  letter-spacing: var(--type-title-m-tracking);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-m-line-height);
}
.doc-paneel .button {
  margin-top: var(--space-2);
}
.doc-paneel .doc-hex {
  display: block;
  margin-top: var(--space-4);
  color: inherit;
  opacity: var(--opacity-disabled-content);
}
/* stip voor een kleur in een tabel */
.doc-stip {
  display: inline-block;
  width: var(--space-3);
  height: var(--space-3);
  margin-right: var(--space-2);
  vertical-align: middle;
  border-radius: var(--radius-full);
  border: var(--border-width-default) solid var(--doc-stip-rand, var(--color-outline-variant));
}
/* in de specificaties heeft de stip zijn eigen modus; de rand volgt de pagina, zodat hij op licht en donker te zien is */
.doc-spec {
  --doc-stip-rand: var(--color-outline);
  max-width: none;
}
/* lange tokennamen breken af in plaats van uit de kolom te lopen (smalle schermen) */
.doc-spec code,
.doc-staal code,
.doc-tabel code,
.doc-noot code {
  white-space: normal;
  overflow-wrap: anywhere;
}
/* status: tekst in zwart, alleen het icoon draagt de kleur */
.doc-melding {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--layout-width-reading);
  margin: 0 0 var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-container-lowest);
}
.doc-melding svg {
  width: var(--space-5);
  height: var(--space-5);
  flex: none;
}
.doc-sectie .doc-melding p {
  margin: 0;
  color: var(--color-on-surface);
}
.doc-sectie .doc-melding small {
  display: block;
  font-size: var(--type-body-s-size);
  letter-spacing: var(--type-body-s-tracking);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-s-line-height);
  color: var(--color-on-surface-variant);
}

/* tablet en mobiel: de inhoudsopgave klapt in onder een knop */
@media (max-width: 1068px) {
  /* de bovenbalk houdt op tablet de volle breedte binnen de marges, anders passen de links er niet naast de weergaveknop */
  .doc-top {
    padding-inline: var(--layout-margin);
  }
  .doc-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .doc-nav {
    display: none;
    position: fixed;
    inset: var(--doc-nav-top, var(--doc-top-height)) 0 0 0;
    z-index: 15;
    width: 100%;
    height: auto;
    padding-inline: var(--layout-margin);
    background: var(--color-surface);
  }
  html.doc-nav-open .doc-nav {
    display: block;
  }
  .doc-nav-knop {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    font: inherit;
    font-size: var(--type-label-m-size);
    letter-spacing: var(--type-label-m-tracking);
    font-weight: var(--type-label-weight);
    line-height: var(--type-label-m-line-height);
    color: var(--color-on-nav-global);
    background: var(--color-surface-container-low);
    border: 0;
    border-radius: var(--doc-radius-pil);
    cursor: pointer;
  }
  .doc-main {
    padding: var(--space-8) 0 var(--space-16);
  }
}
/* tablet en mobiel: de links bovenin klappen in onder een pijltje, anders passen ze niet naast de weergaveknop */
@media (max-width: 1068px) {
  .doc-top-wat {
    display: none;
  }
  /* de lokale navigatie klapt in onder een pijltje */
  .doc-top-menu {
    display: inline-flex;
    margin-left: auto;
    padding: var(--space-2);
    color: var(--color-on-nav-global);
    background: none;
    border: 0;
    cursor: pointer;
  }
  .doc-top-menu svg {
    width: var(--space-4);
    height: var(--space-4);
    transition: transform var(--duration-fast) ease;
  }
  html.doc-top-open .doc-top-menu svg {
    transform: rotate(180deg);
  }
  .doc-top-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: var(--space-2) var(--layout-margin) var(--space-5);
    background: var(--color-nav-global);
    border-bottom: var(--border-width-default) solid var(--color-outline-subtle);
  }
  html.doc-top-open .doc-top-links {
    display: flex;
  }
  .doc-top-thema {
    padding-top: var(--space-4);
  }
  .doc-top-links a {
    display: block;
    padding: var(--space-3) 0;
    font-size: var(--type-body-m-size);
    letter-spacing: var(--type-body-m-tracking);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-m-line-height);
    border-bottom: var(--border-width-default) solid var(--color-outline-subtle);
  }
}
@media (max-width: 734px) {
  .doc-vol {
    padding: var(--space-10) var(--layout-margin) var(--space-16);
  }
  .doc-sectie .doc-nieuw > li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
  .doc-shell,
  .doc-nav {
    padding-inline: var(--layout-margin);
  }
  .doc-voorbeeld {
    padding: var(--space-6) var(--space-4);
  }
  .doc-tabel th,
  .doc-tabel td {
    padding-right: var(--space-2);
  }
  .doc-tabel {
    table-layout: fixed;
  }
  .doc-tabel code {
    overflow-wrap: anywhere;
  }
  .doc-letter {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  .doc-iconen,
  .doc-iconen.is-maten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .doc-vormen.is-balken,
  .doc-vormen.is-vlakken {
    grid-template-columns: minmax(0, 1fr);
  }
  .doc-vorm-ladder {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .doc-uitsnedes li {
    height: calc(var(--space-unit) * 24);
  }
  .doc-momenten,
  .doc-wel-niet {
    grid-template-columns: minmax(0, 1fr);
  }
  .doc-logos,
  .doc-logos.is-vier {
    grid-template-columns: minmax(0, 1fr);
  }
  /* specificaties: per rol een blok, Light en Dark naast elkaar eronder */
  .doc-spec thead {
    display: none;
  }
  .doc-spec tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: var(--border-width-default) solid var(--color-outline-subtle);
  }
  .doc-spec td {
    padding: var(--space-1) 0;
    border-bottom: 0;
  }
  .doc-spec td:first-child,
  .doc-spec td:last-child {
    grid-column: 1 / -1;
  }
  .doc-spec td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--type-label-m-size);
    letter-spacing: var(--type-label-m-tracking);
    line-height: var(--type-label-m-line-height);
    font-weight: var(--type-label-weight);
    color: var(--color-on-surface);
  }
  .doc-bronnen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
  }
}

/* 3D-iconen van een merk: los, op een rustige grond, in een vaste maat */
.doc-iconen.is-3d {
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-unit) * 32), 1fr));
}
.doc-iconen.is-3d img {
  width: calc(var(--space-unit) * 24);
  height: calc(var(--space-unit) * 24);
  object-fit: contain;
}
/* illustraties naast elkaar: het voorwerp past in het vlak, niet bijgesneden */
.doc-beelden.is-illustratie img {
  object-fit: contain;
  background: var(--color-surface-container-lowest);
}

/* ---------- sectiecatalogus van de studio: elke sectie één keer, te bekijken per merk en per modus ---------- */
.cat-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-3) var(--layout-gutter-desktop);
  background: var(--color-nav-global);
  color: var(--color-on-nav-global);
  border-bottom: var(--border-width-default) solid var(--color-nav-global-line);
  font-family: var(--font-family-nav, var(--font-family-text));
}
.cat-naam {
  margin: 0 auto 0 0;
  font-size: var(--type-label-m-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
}
.cat-groepen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--type-label-m-size);
  line-height: var(--type-label-m-line-height);
}
.cat-groepen a {
  color: var(--color-nav-global-muted);
  text-decoration: none;
}
.cat-groepen a[aria-current] {
  color: var(--color-on-nav-global);
  font-weight: var(--type-label-weight);
}
.cat-groepen .is-leeg {
  color: var(--color-on-surface-muted);
}
.cat-keuzes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.cat-held {
  padding-block: var(--space-16) var(--space-8);
}
.cat-held h1 {
  margin: 0;
}
.cat-held p {
  max-width: var(--layout-width-reading);
  margin: var(--space-4) 0 0;
  color: var(--color-on-surface-variant);
}
.cat-kop {
  padding-block: var(--space-24) var(--space-8);
  border-top: var(--border-width-default) solid var(--color-outline-subtle);
}
.cat-kop h2 {
  margin: 0;
}
.cat-kop > p {
  max-width: var(--layout-width-reading);
  margin: var(--space-3) 0 0;
  color: var(--color-on-surface-variant);
}
.cat-spec {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-6);
  max-width: var(--layout-width-reading);
  margin: var(--space-5) 0 0;
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-line-height);
}
.cat-spec dt {
  color: var(--color-on-surface-muted);
}
.cat-spec dd {
  margin: 0;
}
.cat-noot {
  max-width: var(--layout-width-reading);
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-container-low);
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-line-height);
}
@media (max-width: 734px) {
  .cat-top {
    padding-inline: var(--layout-gutter-mobile);
  }
}
/* een venster in de catalogus: open op de pagina, met de scrim als grond */
.cat-venster {
  padding: var(--space-12) var(--layout-gutter-desktop);
  background: var(--color-scrim-image);
}
.cat-venster .contact-modal {
  position: static;
  display: block;
  height: auto;
  overflow: visible;
}
.cat-naam a {
  color: inherit;
  text-decoration: none;
}
/* overzicht in de catalogus: elke sectie op een kwart, opgebouwd op het brede scherm */
.cat-overzicht {
  padding-bottom: var(--space-12);
}
.cat-overzicht ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-unit) * 64), 1fr));
  gap: var(--space-8) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cat-tegel {
  display: grid;
  gap: var(--space-2);
  color: var(--color-on-surface);
  text-decoration: none;
}
.cat-mini {
  --cat-schaal: 0.25;
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-container-low);
}
.cat-mini iframe {
  position: absolute;
  inset: 0 auto auto 0;
  width: calc(100% / var(--cat-schaal));
  height: calc(100% / var(--cat-schaal));
  border: 0;
  transform: scale(var(--cat-schaal));
  transform-origin: 0 0;
  pointer-events: none;
}
.cat-tegel:hover .cat-mini,
.cat-tegel:focus-visible .cat-mini {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-05);
}
.cat-tegel-naam {
  font-size: var(--type-label-m-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-m-line-height);
}

/* ---------- voorbeelden van de platformpagina's (5 nov 2026) ---------- */
.doc-voorbeeld.is-platform {
  display: block;
  padding: var(--space-8);
}
.doc-voorbeeld.is-platform > * + * {
  margin-top: var(--space-4);
}
.doc-voorbeeld.is-platform .menu-anker {
  min-height: calc(var(--space-unit) * 44);
}
.doc-voorbeeld.is-platform .menu-anker:has(.tooltip) {
  min-height: calc(var(--space-unit) * 20);
}
.doc-voorbeeld.is-platform .toast {
  margin-inline: auto;
}
.doc-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.doc-rij.is-boven {
  align-items: flex-start;
}
.doc-rij .field {
  min-width: calc(var(--space-unit) * 60);
}
.doc-stapel {
  display: grid;
  gap: var(--space-4);
}
.doc-demo-tabs .tab-panel {
  padding: var(--space-4) 0 0;
}
/* elevation: vier vlakken op de grond, elk een stap hoger */
.doc-hoogtes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-unit) * 30), 1fr));
  gap: var(--space-6);
  padding: var(--space-10) var(--space-8);
  background: var(--color-surface);
}
.doc-hoogte {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface-container-lowest);
  text-align: center;
}
.doc-hoogte code {
  color: var(--color-on-surface-variant);
}
/* e-mail: één kolom van 600 */
.doc-mail {
  display: block;
  max-width: calc(var(--space-unit) * 150);
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  background: var(--color-surface-container-lowest);
}
.doc-mail-kop {
  padding: var(--space-4) var(--space-6);
  font-weight: var(--type-label-weight);
}
.doc-mail-beeld {
  aspect-ratio: 2 / 1;
  background: var(--color-media-placeholder);
}
.doc-mail-tekst {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-6);
}
.doc-mail-tekst h3 {
  margin: 0;
}
.doc-mail-voet {
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface-container-low);
  color: var(--color-on-surface-muted);
  font-size: var(--type-label-s-size);
  line-height: var(--type-label-s-line-height);
}
/* document: een A4 in verhouding */
.doc-a4 {
  background: var(--color-surface-container-low);
}
.doc-a4-blad {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  width: min(100%, calc(var(--space-unit) * 70));
  aspect-ratio: 210 / 297;
  padding: var(--space-8) var(--space-6);
  box-sizing: border-box;
  background: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-2);
}
.doc-a4-merk {
  margin-bottom: var(--space-6);
  font-size: var(--type-label-s-size);
  line-height: var(--type-label-s-line-height);
  font-weight: var(--type-label-weight);
}
.doc-a4-blad h3 {
  margin: 0;
  font-size: var(--type-title-s-size);
  line-height: var(--type-title-s-line-height);
}
.doc-a4-intro {
  margin: 0 0 var(--space-3);
  color: var(--color-on-surface-variant);
  font-size: var(--type-label-m-size);
  line-height: var(--type-label-m-line-height);
}
.doc-a4-regel {
  height: var(--space-1);
  margin: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface-container);
}
.doc-a4-regel.is-kort {
  width: 60%;
}
.doc-a4-voet {
  position: absolute;
  inset: auto var(--space-6) var(--space-4);
  color: var(--color-on-surface-muted);
  font-size: var(--type-label-s-size);
  line-height: var(--type-label-s-line-height);
}
/* ---------- 33-intake: de vragenlijst Merkbasis ----------
   Laag 1. Het online formulier waarmee een nieuw merk begint (systeem/intake.json).
   Bouwt op de gidsopmaak (doc-vol, doc-held, doc-sectie) en de components field, chip, card, badge en progress-bar. */

.intake-zo p {
  margin: var(--space-4) 0 0;
  max-width: var(--layout-width-reading);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface);
}
/* een onderdeel met zijn vragen */
/* ruimte zoals bij Apple: weinig tussen kop en vraag, veel tussen twee vragen */
.intake-onderdeel {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-32);
}
.intake-vraag {
  gap: var(--space-3);
  max-width: var(--layout-width-reading);
}
/* zoals bij Apple: 20 px tussen de vraag en het vak of de keuzes (8 px gap plus 12 px) */
.intake-vraag > :is(label, .field-label, .hint) + :is(input, textarea, .chip-group, .config-choice-list, .intake-schuiven, .intake-genres, .intake-stalen) {
  margin-top: var(--space-2);
}
/* keuzes en het vak voor een toelichting staan iets uit elkaar, net als de keuzekaarten onderling */
.intake-vraag > textarea + :is(.chip-group, .config-choice-list),
.intake-vraag > :is(.chip-group, .config-choice-list) + .sr-only + textarea {
  margin-top: var(--space-1);
}
/* een tweede vraag onder de keuzes staat op afstand van de kaarten, met dezelfde 20 px tot het vak */
.intake-vraag > .intake-vervolg {
  margin-top: var(--space-5);
}
.intake-vraag > .intake-vervolg + :is(textarea, input, .chip-group, .intake-stalen, .config-choice-list) {
  margin-top: var(--space-2);
}
/* tekstrollen (zie 10-systeem-basis): vraag 24 sterk, met de kop zwart en de vraag grijs, zoals Apple ("Display. Kies het beste…") */
.intake-vraag > label,
.intake-vraag > .field-label {
  font-size: var(--form-vraag-size);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--type-title-s-line-height);
  color: var(--color-heading);
}
/* één tekstkleur: de kop is sterk, de vraag erna in de gewone tekstdikte */
.intake-vraag > :is(label, .field-label):has(.intake-kop) {
  font-weight: var(--font-weight-text, var(--font-weight-regular));
}
.intake-kop {
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
}
/* keuze 17 sterk: een tweede vraag boven een vak of keuzes */
.intake-vervolg {
  font-size: var(--form-keuze-size);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--type-label-l-line-height);
  color: var(--color-heading);
}
/* het voorbeeld van het voorbeeldmerk onder een vraag */
.intake-voorbeeld {
  font-style: italic;
}
.intake-vraag > .help-card {
  margin-top: var(--space-2);
}
/* "Bewaard ..." staat onderaan de vraag, onder het hulpkaartje: zo staan vak en kaartje 20 uit elkaar, zoals bij Apple */
.intake-meta {
  min-height: var(--line-height-snug);
  font-size: var(--form-klein-size);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface);
}
/* leeg neemt hij geen ruimte in; hij verschijnt alleen bij een fout of melding */
.intake-meta:empty {
  display: none;
}
.intake-meta.is-fout {
  color: var(--color-error);
}

/* kleur: ronde stalen zoals bij de kleurkeuze van een MacBook. De gekozen staal krijgt een ring met wat lucht ertussen. */
.intake-stalen {
  /* tien stalen in twee gelijke rijen van vijf, op elk scherm */
  display: grid;
  grid-template-columns: repeat(5, max-content);
  gap: var(--space-4);
  padding: var(--space-1); /* ruimte voor de ring van de gekozen staal */
}
.intake-staal {
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  /* zoals de kleurkeuze bij een MacBook: een bolletje met wat diepte, licht van boven en een zachte rand van onder */
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--color-on-image) 18%, transparent), transparent 70%), var(--staal);
  box-shadow: inset 0 calc(var(--border-width-default) * -1) var(--space-1) color-mix(in srgb, var(--color-scrim) 25%, transparent);
  cursor: pointer;
}
/* gekozen: een blauwe ring met een smalle rand van de achtergrond ertussen */
.intake-staal[aria-pressed="true"] {
  box-shadow:
    inset 0 calc(var(--border-width-default) * -1) var(--space-1) color-mix(in srgb, var(--color-scrim) 25%, transparent),
    0 0 0 calc(var(--border-width-strong) * 1.5) var(--color-surface),
    0 0 0 calc(var(--border-width-strong) * 2.5) var(--color-action);
}
.intake-staal:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-1);
}
.intake-gekozen {
  min-height: var(--line-height-snug);
  margin: var(--space-2) 0 0;
  font-size: var(--form-tekst-size);
  line-height: var(--line-height-snug);
  color: var(--color-on-surface);
}

/* karakter: vijf schuifjes met vier stappen en geen midden, zoals Tekstgrootte op de iPhone (HIG Sliders).
   Geen kleur in de lijn: het zijn twee kanten, geen meer of minder. Onder de stippen zitten gewone keuzerondjes. */
.intake-schuiven {
  display: grid;
  gap: var(--space-8);
}
.intake-schuif {
  margin: 0;
  padding: 0;
  border: 0;
}
/* de twee woorden: rol tekst (14), allebei gelijk; waar je staat zie je aan het bolletje */
.intake-schuif-polen {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  font-size: var(--form-tekst-size);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface);
}
/* de lijn loopt precies van het eerste tot het laatste woord: de raakvlakken steken aan beide kanten een half raakvlak uit */
.intake-schuif-baan {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--size-control-sm);
  margin-inline: calc(var(--size-control-sm) / -2);
}
/* de lijn: dun en doorlopend, zoals Tekstgrootte op de iPhone */
.intake-schuif-baan::before {
  content: "";
  position: absolute;
  inset-inline: calc(var(--size-control-sm) / 2);
  top: 50%;
  height: var(--border-width-strong); /* lijn en streepjes even dik */
  background: var(--color-surface-container-highest);
  transform: translateY(-50%);
}
.intake-schuif-stap {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  cursor: pointer;
}
.intake-schuif-stap input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* elke stap is een klein streepje op de lijn; de gekozen stap wordt het grote witte bolletje */
.intake-schuif-stap::after {
  content: "";
  width: var(--border-width-strong);
  height: var(--space-2);
  background: var(--color-surface-container-highest);
}
/* het bolletje: klein en rustig; de raakvlakken blijven 28 groot */
.intake-schuif-stap:has(input:checked)::after {
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-full);
  background: var(--color-on-image); /* altijd wit, zoals de knop van een schuifje bij Apple, ook in donker */
  box-shadow: var(--shadow-raised);
}
.intake-schuif-stap:has(input:focus-visible)::after {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-05);
}
@media (prefers-reduced-motion: reduce) {
  .intake-schuif-stap::after {
    transition: none;
  }
}

/* genre: zes langwerpige beeldkaarten onder elkaar, zoals de keuzekaarten, met witte tekst over een donker verloop */
.intake-genres {
  display: grid;
  gap: var(--space-3);
}
.intake-genre {
  position: relative;
  display: block;
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
}
.intake-genre input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.intake-genre-beeld,
.intake-genre-beeld img,
.intake-genre-beeld .media-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
}
.intake-genre-beeld .media-placeholder svg {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  margin-bottom: var(--space-12);
}
.intake-genre-tekst {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-12) var(--space-5) var(--space-4);
  /* verloop in de scrim-kleur (in licht en donker hetzelfde): onderin donker genoeg voor witte tekst, ook op een lichte foto */
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-scrim) 85%, transparent) 0%,
    color-mix(in srgb, var(--color-scrim) 65%, transparent) 55%,
    transparent 100%
  );
  color: var(--color-on-image);
  font-size: var(--form-klein-size);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
}
.intake-genre-tekst b {
  font-size: var(--form-keuze-size);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
}
.intake-genre:has(input:checked) {
  box-shadow: 0 0 0 var(--border-width-strong) var(--color-action);
}
.intake-genre:has(input:focus-visible) {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--border-width-strong);
}

/* herkenbare kenmerken: per gekozen kenmerk een blok met drie korte vragen en een voorbeeld */
.intake-dbas {
  display: grid;
  gap: var(--space-3);
}
.intake-dba {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-container-low);
}
.intake-dba[hidden] {
  display: none;
}
.intake-dba h4 {
  margin: 0;
  font-size: var(--form-keuze-size);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-heading);
}
.intake-rij {
  margin: 0;
  padding: 0;
  border: 0;
}
.intake-rij[hidden] {
  display: none;
}
.intake-rij legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: var(--form-tekst-size);
  color: var(--color-on-surface);
}
.intake-rij-opties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* een keuze in een rij ziet eruit als een chip */
.intake-rij-optie {
  position: relative;
}
.intake-rij-optie input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.intake-rij-optie span {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-control-sm);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-chip);
  background: var(--color-surface-container);
  font-size: var(--type-label-m-size);
  cursor: pointer;
}
.intake-rij-optie input:checked + span {
  box-shadow: inset 0 0 0 var(--border-width-strong) var(--color-action);
}
.intake-rij-optie input:focus-visible + span {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-05);
}

/* kaarten voor het aanbod */
.intake-kaarten {
  display: grid;
  gap: var(--space-5);
}
/* een aanbodkaart: titel en "Weghalen" op één regel (rol keuze en tekst), daaronder het vak */
.intake-kaart {
  gap: var(--space-3);
  max-width: var(--layout-width-reading);
  padding: var(--space-5);
  background: var(--color-surface-container-low);
}
.intake-kaart-kop {
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: baseline;
}
.intake-kaart-kop h4 {
  margin: 0;
  font-size: var(--form-keuze-size);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--type-label-l-line-height);
  color: var(--color-heading);
}
.intake-kaart-kop .button-tekst {
  min-height: 0;
}
.intake-acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
/* een tekstknop onder iets hoort erbij: de tekst staat 12 onder het vak of de kaart, niet 33 */
.intake-acties .button-tekst {
  min-height: 0;
  padding-block: var(--space-1);
}
.intake-vraag > .intake-acties {
  margin-top: calc(var(--space-1) * -1);
}
.intake-kaarten:not(:empty) ~ .intake-acties {
  margin-top: calc(var(--space-3) * -1);
}
/* nog geen kaarten: de lijst neemt geen ruimte in, en de knop staat 20 onder de vraag, zoals een vak */
.intake-kaarten:empty {
  display: none;
}
.intake-kaarten:empty ~ .intake-acties {
  margin-top: calc(var(--space-1) * -1);
}

/* materiaal: status, opmerking, bestanden */
.intake-bestanden {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.intake-bestanden:empty {
  display: none;
}
.intake-bestanden a {
  color: var(--color-link);
}
.intake-bestanden .tag {
  gap: var(--space-1);
  padding-right: var(--space-1);
}
.intake-bestand-weg {
  display: grid;
  place-items: center;
  width: var(--space-6); /* 24: het kleinste raakvlak volgens de richtlijn */
  height: var(--space-6);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-on-surface);
  cursor: pointer;
}
.intake-bestand-weg svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}
.intake-bestand-weg:hover {
  background: var(--color-surface-container-high);
}
.intake-bestand-weg:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
}
.intake-laatzien[hidden] {
  display: none;
}
.intake-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* kop en voet op dezelfde lijn als het beeld eronder */
.intake-kop > * {
  max-width: var(--layout-width-reading);
}
.doc-vol .intake-voet {
  max-width: none;
  margin-inline: 0;
}

/* in stappen met een beeld ernaast (Section / Config) */
.intake-balk {
  margin-top: var(--space-12);
}
.intake-balk .is-let-op {
  color: var(--color-warning);
}
/* ritme, van groot naar klein:
   tussen twee stappen 192 · tussen twee vragen 128 · staptitel tot eerste vraag 48 · vraag tot vak 20 · vak tot hulpkaartje 20 */
.intake-config .config-steps {
  gap: calc(var(--space-32) * 1.5);
}
.intake-config .intake-onderdeel:first-of-type {
  margin-top: var(--space-12);
}
/* materiaal: elk onderdeel is een vraag, met dezelfde 128 ertussen */
.intake-vraag[data-materiaal] + .intake-vraag[data-materiaal] {
  margin-top: calc(var(--space-32) - var(--space-5)); /* plus de 20 tussenruimte van het onderdeel */
}

/* letters: de naam van elke keuze staat in die letterstijl */
.intake-letters .config-choice-title {
  font-family: var(--letter, inherit);
  font-size: var(--form-vraag-size);
  line-height: var(--line-height-title-s);
}

/* hulp in de pagina, zoals Apple: een regel met een kleine foto onder de staptitel en onderaan elk hulpvenster */
.intake-contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font: inherit;
  font-size: var(--form-tekst-size);
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  text-align: start;
  cursor: pointer;
}
.intake-contact:hover span:last-child {
  text-decoration: underline;
}
.intake-contact:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-05);
  border-radius: var(--radius-control);
}
.intake-contact-foto {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}
.intake-contact-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info-modal-body .intake-contact {
  margin-top: var(--space-5);
}
.intake-contact-mail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.intake-contact-mail a {
  color: var(--color-link);
}

/* zoals Apple: wat nog niet kan, is zichtbaar maar gedimd (inert); de regel erboven zegt waarom */
.intake-onderdeel.is-op-slot {
  opacity: var(--opacity-disabled-content);
  transition: opacity var(--duration-fast) ease;
}
.intake-slot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-8) 0 0;
  font-size: var(--form-tekst-size);
  color: var(--color-on-surface);
}
.intake-slot[hidden] {
  display: none;
}
.intake-slot svg {
  flex: none;
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}
/* een klein vinkje achter de kop van een beantwoorde vraag */
.intake-vink {
  display: none;
  vertical-align: middle;
  margin-inline-start: var(--space-2);
  color: var(--color-action-text);
}
.intake-vink svg {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  stroke-width: var(--icon-stroke-width-strong);
}
.is-beantwoord > :is(.field-label, label) > .intake-vink {
  display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
  .intake-onderdeel.is-op-slot {
    transition: none;
  }
}

/* de globale balk van WeStayHere boven de opening */
.intake-gn .gn-in {
  max-width: none;
  padding-inline: var(--layout-margin);
}
.intake-gn .gn-lijst a {
  font-size: var(--form-klein-size);
}

/* onderaan: klaar? en Versturen */
.intake-verstuur {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  max-width: var(--layout-width-reading);
  margin: var(--space-32) 0 var(--space-16);
}
.intake-verstuur h2 {
  margin: 0;
  font-size: var(--form-stap-size);
  line-height: var(--type-title-l-line-height);
  color: var(--color-heading);
}
.intake-verstuur p {
  margin: 0;
  font-size: var(--form-keuze-size);
  color: var(--color-on-surface);
}
.intake-verstuur-status:empty {
  display: none;
}
.intake-verstuur .button {
  margin-top: var(--space-4);
}

/* bedankpagina en overzicht: één rustige kolom, zoals Apple na een bestelling */
.intake-bedankt,
.intake-overzicht {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  max-width: var(--layout-width-reading);
  margin: 0 auto;
  padding: var(--space-32) var(--layout-margin);
  outline: none;
}
.intake-bedankt[hidden],
.intake-overzicht[hidden] {
  display: none;
}
.intake-bedankt-vink {
  color: var(--color-action-text);
}
.intake-bedankt-vink svg {
  width: var(--space-16);
  height: var(--space-16);
  stroke-width: var(--icon-stroke-width);
}
.intake-bedankt h1,
.intake-overzicht h1 {
  margin: 0;
  font-size: var(--type-headline-l-size);
  line-height: var(--type-headline-l-line-height);
  color: var(--color-heading);
  text-wrap: balance;
}
.intake-bedankt > p,
.intake-overzicht > p {
  margin: 0;
  font-size: var(--form-keuze-size);
  color: var(--color-on-surface);
}
.intake-bedankt-stappen {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
  counter-reset: stap;
}
.intake-bedankt-stappen li {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--color-surface-container);
  font-size: var(--form-tekst-size);
  color: var(--color-on-surface);
}
.intake-bedankt-stappen b {
  font-size: var(--form-keuze-size);
  color: var(--color-heading);
}
.intake-bedankt > .intake-bedankt-terug {
  margin-top: var(--space-4);
}
#overzicht-lijst {
  display: grid;
  gap: var(--space-3);
  width: 100%;
}
.intake-overzicht-rij {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--color-surface-container);
}
.intake-overzicht-rij h3 {
  margin: 0;
  font-size: var(--form-klein-size);
  color: var(--color-on-surface);
}
.intake-overzicht-rij p {
  margin: 0;
  font-size: var(--form-keuze-size);
  color: var(--color-heading);
  white-space: pre-wrap;
}
.intake-overzicht-bestanden {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.intake-overzicht-bestanden a {
  display: grid;
  gap: var(--space-1);
  width: calc(var(--space-unit) * 30);
  font-size: var(--form-klein-size);
  color: var(--color-link);
}
.intake-overzicht-bestanden img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-control);
  background: var(--color-surface-container-high);
}
/* drie korte links: ook op de telefoon gewoon in de balk, zonder menuknop */
@media (max-width: 1068px) {
  .intake-gn .gn-lijst {
    display: flex;
  }
}
/* bij de bedankpagina of het overzicht gaan de vragen echt weg (deze blokken zetten zelf een display) */
.intake-welkom[hidden],
#formulier > [hidden] {
  display: none;
}

/* wie vult dit in: naam en e-mail onder elkaar, met dezelfde ruimte als tussen keuzes */
.intake-wie > input + .sr-only + input {
  margin-top: var(--space-2);
}

/* ---------- 35-site: secties voor een website ----------
   next-step, strip-hero, loop-hero, word-hero, tile-grid, en aanvullingen op components uit 20 die pas na
   de gidsopmaak mogen komen (logo-strip, contact, config, compare, power-grid, vragen, nav-dark, ...).
   Staat als laatste in de systeemlaag. */

/* next-step: Een kleinere kop (section-intro-title is-compact),
   daaronder een rij even hoge kaarten op de getinte grond, elk met een lijnicoon in de kopkleur, een korte titel
   en een of meer tekstlinks in de gewone dikte met een pijltje. Op een getinte sectie worden de kaarten wit.
   Op een telefoon onder elkaar, vanaf md drie naast elkaar */
.next-step-grid {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.next-step-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  /* 30 boven, 34 opzij, 37 onder; op mobiel 22 opzij */
  padding: calc(var(--space-unit) * 7.5) var(--space-6) calc(var(--space-unit) * 9.25);
  border-radius: var(--radius-card);
  background: var(--color-primary-container);
}
.next-step-icon {
  display: block;
  width: calc(var(--space-unit) * 14); /* icoon 56 hoog */
  height: calc(var(--space-unit) * 14);
  margin-bottom: var(--space-2);
  color: var(--color-heading);
}
.next-step-title {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-title-sm); /* typeschaal: 28 / 24 / 21 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-type-title-sm);
  color: var(--color-heading);
}
.next-step-links {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-body); /* typeschaal: 17 */
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--line-height-normal);
}
.next-step-links a {
  color: var(--color-action-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.next-step-links a:hover {
  text-decoration: underline;
}
@media (min-width: 1069px) {
  .next-step-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }
  .next-step-card {
    padding: calc(var(--space-unit) * 7.5) calc(var(--space-unit) * 8.5) calc(var(--space-unit) * 9.25);
  }
}

/* strip-hero: Op de donkere grond bovenin een rij foto's naast elkaar;
   de middelste (is-center) is groter, de buitenste lopen de rand uit. Bij het laden schuiven ze één keer van rechts binnen,
   een voor een (--i is de plek in de rij). Daaronder links een grote kop, een korte inleiding en de knoppen.
   Gebruik met section-inverse, dan staan de kleuren vanzelf goed. Bij minder beweging staat de rij meteen stil. */
.strip-hero {
  overflow: clip;
  padding-block: var(--space-12) var(--space-20);
}
.strip-hero-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.strip-hero-item {
  flex: none;
  width: min(calc(var(--space-unit) * 96), 56vw);
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface-inverse-container);
  animation: strip-hero-in var(--duration-intro) var(--ease-intro) both;
  animation-delay: calc(var(--i, 0) * var(--duration-stagger) + var(--duration-fast));
}
.strip-hero-item.is-center {
  width: min(calc(var(--space-unit) * 116), 72vw);
  animation-name: strip-hero-in-center;
}
.strip-hero-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes strip-hero-in {
  from {
    opacity: 0;
    translate: var(--space-32) 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes strip-hero-in-center {
  from {
    opacity: 0;
    translate: var(--space-32) 0;
    scale: 0.88;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}
.strip-hero-content {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
  margin-top: var(--space-12);
}
.strip-hero-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-heading, var(--line-height-tight));
  text-transform: var(--text-case-heading, none);
  text-wrap: balance;
  color: var(--color-heading);
}
.strip-hero-text {
  max-width: 40ch;
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
.strip-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.strip-hero .button-outline-action {
  color: var(--color-on-image);
  box-shadow: inset 0 0 0 var(--border-width-default) var(--color-on-image);
}
.strip-hero .button-outline-action:hover {
  background: var(--color-on-image);
  color: var(--color-surface-inverse);
}
@media (min-width: 1069px) {
  .strip-hero {
    padding-block: var(--space-16) var(--space-24);
  }
  .strip-hero-strip {
    gap: var(--space-5);
  }
  .strip-hero-content {
    margin-top: var(--space-20);
  }
  .strip-hero-title {
    font-size: var(--font-size-6xl);
  }
  .strip-hero-text {
    font-size: var(--font-size-2xl);
  }
}
@media (prefers-reduced-motion: reduce) {
  .strip-hero-item,
  .strip-hero-item.is-center {
    animation: none;
  }
}

/* loop-hero: Schermvullende foto's die om de beurt infaden en langzaam inzoomen,
   in het midden een grote kop waarin één woord meewisselt met de foto. Rechtsonder een knop: pauze, verder, opnieuw.
   Het loopt één keer door en blijft op de laatste foto en het laatste woord staan.
   Zonder script of bij minder beweging staat meteen die eindstand. Het script zet .is-looping op de hero. */
.loop-hero {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(calc(var(--space-32) * 3.5), calc(100svh - var(--space-32)), calc(var(--space-32) * 6.25));
  overflow: hidden;
  background: var(--color-surface-inverse);
  isolation: isolate;
}
.loop-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-scrim-image);
  pointer-events: none;
}
.loop-hero-image {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.loop-hero:not(.is-looping) .loop-hero-image:not(:last-of-type),
.loop-hero:not(.is-looping) .loop-hero-word:not(:last-child) {
  visibility: hidden;
}
/* tijdens het lopen: alleen de nieuwe foto faadt in, bovenop de vorige. De vorige blijft eronder staan en zoomt rustig door,
   zodat er niets terugspringt en er geen donkere dip tussen twee foto's zit. De rest staat meteen uit. */
.loop-hero.is-looping .loop-hero-image {
  opacity: 0;
  will-change: opacity, scale;
}
.loop-hero.is-looping .loop-hero-image.is-current {
  z-index: -2;
  opacity: 1;
  transition: opacity var(--duration-loop) ease;
}
.loop-hero.is-looping .loop-hero-image.is-past {
  opacity: 1;
}
.loop-hero.is-looping .loop-hero-image.is-current,
.loop-hero.is-looping .loop-hero-image.is-past {
  animation: loop-hero-zoom calc(var(--duration-loop-hold) + var(--duration-loop) * 2) var(--ease-loop) forwards;
}
.loop-hero.is-paused .loop-hero-image {
  animation-play-state: paused;
}
@keyframes loop-hero-zoom {
  from {
    scale: 1;
  }
  to {
    scale: var(--scale-loop);
  }
}
.loop-hero-title {
  max-width: calc(100% - 2 * var(--layout-margin)); /* raster: binnen de marges */
  margin: 0;
  text-align: center;
  text-wrap: balance;
  font-family: var(--font-family-display);
  font-size: var(--font-size-type-display-lg); /* typeschaal: 80 / 64 / 48, gelijk aan de media hero */
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-heading, var(--line-height-tight));
  text-transform: var(--text-case-heading, none);
  color: var(--color-on-image);
}
/* clip-path in plaats van overflow: zo blijft het woord op de grondlijn van de rest van de kop */
.loop-hero-words {
  display: inline-grid;
  clip-path: inset(0 -0.2em);
}
.loop-hero-word {
  grid-area: 1 / 1;
  min-width: 0;
  padding-block-end: 0.1em;
  text-align: left;
}
.loop-hero.is-looping .loop-hero-word {
  opacity: 0.3;
  translate: 0 100%;
  transition:
    translate var(--duration-loop) var(--ease-intro),
    opacity var(--duration-loop) ease;
}
.loop-hero.is-looping .loop-hero-word.is-current {
  opacity: 1;
  translate: 0 0;
}
.loop-hero.is-looping .loop-hero-word.is-past {
  translate: 0 -100%;
}
.loop-hero-control {
  position: absolute;
  right: var(--layout-margin); /* raster: rechts op de marge */
  bottom: var(--space-5);
  display: grid;
  place-items: center;
  width: calc(var(--space-unit) * 9);
  height: calc(var(--space-unit) * 9);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  /* zelfde rol als de pauzeknop van media-gallery, zodat alle bediening de merkkleur volgt */
  background: var(--color-control-subtle);
  color: var(--color-on-surface);
  cursor: pointer;
}
.loop-hero-control:hover {
  background: var(--color-control-subtle-hover);
}
.loop-hero-control:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-05);
}
.loop-hero-control svg {
  width: calc(var(--space-unit) * 4);
  height: calc(var(--space-unit) * 4);
}
.loop-hero-control:not([data-state="playing"]) .loop-hero-icon-pause,
.loop-hero-control:not([data-state="paused"]) .loop-hero-icon-play,
.loop-hero-control:not([data-state="replay"]) .loop-hero-icon-replay {
  display: none;
}
@media (min-width: 1069px) {
  .loop-hero-control {
    bottom: var(--space-8);
  }
}

/* tile-grid:
   Een grote kop van een paar korte regels, links uitgelijnd, met daarachter optioneel een vage foto (tile-grid-backdrop).
   Daaronder witte tegels: twee naast elkaar (tile), en een brede tegel over de volle breedte (tile is-wide) met beeld links en tekst rechts.
   In een tegel: bovenaan een illustratie (tile-media), daaronder één alinea met een vette aanloop in de kopkleur (tile-text b).
   Tekst en eventueel een link (tile-link) staan samen in tile-body. Op een telefoon alles onder elkaar.
   Variant zoals "Your everyday essentials" op dezelfde pagina: onder de kop een grote foto (tile-grid-media) en een inleiding
   (tile-grid-intro), daarna kleine tegels met het icoon links van de tekst (tile is-row).
   Op een sectie zonder tint krijgen de tegels de getinte grond, op een getinte sectie zijn ze wit. */
.tile-grid-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.tile-grid-backdrop {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  width: 100%;
  height: calc(var(--space-32) * 5);
  object-fit: cover;
  opacity: var(--opacity-backdrop);
  filter: blur(var(--blur-backdrop));
  scale: 1.2;
  -webkit-mask-image: linear-gradient(to bottom, var(--color-heading) 35%, transparent);
  mask-image: linear-gradient(to bottom, var(--color-heading) 35%, transparent);
  pointer-events: none;
}
.tile-grid-title {
  margin: 0 0 var(--space-12);
  font-family: var(--font-family-display);
  font-size: var(--font-size-type-display-md); /* typeschaal: 72 / 56 / 40 */
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-heading, var(--line-height-tight));
  text-transform: var(--text-case-heading, none);
  color: var(--color-heading);
}
.tile-grid {
  display: grid;
  gap: var(--space-5);
}
/* tegel: inhoud bovenaan, evenveel ruimte boven als onder en een kleine afstand tussen beeld en tekst.
   Is de buurtegel hoger, dan valt de extra ruimte onderin */
.tile {
  display: grid;
  align-content: start;
  gap: var(--space-6);
  padding: var(--space-12) var(--space-8);
  border-radius: var(--radius-card);
  background: var(--color-surface-container-lowest);
  overflow: hidden;
}
.tile-grid-section:not(.site-section-tinted) .tile {
  background: var(--color-primary-container);
}
.tile-grid-media {
  display: block;
  width: 100%;
  aspect-ratio: 11 / 8;
  margin: 0 0 var(--space-10);
  border-radius: var(--radius-card);
  object-fit: cover;
}
.tile-grid-intro {
  max-width: 44ch;
  margin: 0 0 var(--space-16);
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-lead-md); /* typeschaal: 21 / 21 / 19 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
.tile-grid-intro a {
  display: inline-block;
  margin-top: var(--space-4);
  color: var(--color-action-text);
  text-decoration: none;
}
.tile-grid-intro a:hover {
  text-decoration: underline;
}
.tile.is-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-6);
}
.tile.is-row .tile-media {
  justify-self: start;
  width: calc(var(--space-unit) * 14);
  height: calc(var(--space-unit) * 14);
}
.tile-media {
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: calc(var(--space-unit) * 56);
  object-fit: contain;
}
.tile-text {
  max-width: 44ch;
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-body); /* typeschaal: 17 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold)); /* halfvet grijs, het begin vet in de kopkleur */
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
.tile-text b {
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
}
/* de brede tegel: op een telefoon de foto bovenaan tot de rand, op desktop links de helft van de tegel */
.tile.is-wide {
  padding-top: 0;
}
.tile.is-wide .tile-media {
  justify-self: stretch;
  width: calc(100% + var(--space-8) * 2);
  max-width: none;
  height: auto;
  margin-inline: calc(var(--space-8) * -1);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.tile-body {
  display: grid;
  gap: var(--space-6);
}
.tile-link {
  justify-self: start;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-body); /* typeschaal: 17 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-link);
  text-decoration: none;
}
.tile-link:hover {
  text-decoration: underline;
}
@media (min-width: 1069px) {
  .tile-grid-title {
    margin-bottom: var(--space-12);
  }
  .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
  .tile {
    padding: var(--space-12) var(--space-16);
  }
  /* maten: tegel 50 bij 60 px binnenruimte, icoon 72 px, tekst 19 px; inleiding 21 px over twee derde van de breedte,
     daarna 132 px tot de tegels. Op onze ladder: space-12/space-16, space-unit * 18, font-size-lg, font-size-xl, space-32 */
  .tile.is-row {
    gap: var(--space-6);
    padding: var(--space-12) var(--space-16);
  }
  .tile.is-row .tile-media {
    width: calc(var(--space-unit) * 18);
    height: calc(var(--space-unit) * 18);
  }
  .tile-grid-media {
    margin-bottom: var(--space-10);
  }
  .tile-grid-intro {
    max-width: 66%;
    margin-bottom: var(--space-32);
  }
  .tile.is-wide {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--space-16);
    padding: 0 var(--space-16) 0 0;
  }
  .tile.is-wide .tile-media {
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
    min-height: calc(var(--space-32) * 3.5);
  }
  .tile.is-wide .tile-body {
    padding-block: var(--space-16);
  }
}

/* logo-strip: een logo kan een link zijn naar de partner; grijs in rust, bij aanwijzen in de kopkleur */
.logo-strip a.logo-grid-item {
  transition: background-color var(--duration-fast) ease;
}
.logo-strip a.logo-grid-item:hover,
.logo-strip a.logo-grid-item:focus-visible {
  background: var(--color-heading);
}
.logo-strip .logo-grid > li:not(.logo-grid-item) {
  display: flex;
}

/* contact: de kop van de contactpagina, gecentreerd zoals de closing-cta, maar als paginatitel */
.contact-hero .contact-hero-title {
  margin-top: 0;
  font-size: var(--font-size-section-title);
}
.contact-hero-mail {
  margin: var(--space-2) 0 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  color: var(--color-on-surface-variant);
}
.contact-hero-mail a {
  color: inherit;
}
.contact-card-text {
  margin: var(--space-2) 0 var(--space-4);
  font-family: var(--font-family-text);
  font-size: var(--font-size-card-text);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
}

/* resultaat: onder de cijfers een rij eerdere evenementen. Veel lucht boven de tussenkop (een nieuw onderwerp),
   weinig eronder (de kop hoort bij de rij kaarten) */
.resultaat-events-intro {
  margin-top: var(--space-section); /* een nieuw onderwerp in dezelfde sectie: de sectieafstand (144 / 120 / 112) */
}

/* config: een formulier in stappen.
   Bovenaan een kop links. Daaronder links een grote, vaste foto die wisselt met de stap waar je bent,
   rechts een smalle kolom met de stappen: een kop in twee tonen en keuzetegels met een dunne rand.
   Een gekozen tegel krijgt een rand in de actiekleur. Op een telefoon staat de foto boven elke stap. */
.config-head {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
}
.config {
  display: grid;
  gap: var(--space-10);
}
.config-gallery {
  display: none;
}
.config-stippen {
  display: none;
}
/* config-balk: vaste balk bovenaan zodra je bij de stappen bent. Links wat je invult, rechts waar je bent en of het bewaard is.
   Staat direct voor .config; bij brede schermen precies zo hoog als --config-top, zodat het beeld eronder vast blijft staan. */
.config-balk {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  align-items: center;
  justify-content: space-between;
  margin-inline: calc(-1 * var(--layout-margin));
  padding: var(--space-4) var(--layout-margin);
  border-bottom: var(--border-width-default) solid var(--color-outline-subtle);
  background: var(--color-surface);
}
.config-balk p {
  margin: 0;
}
.config-balk-titel {
  font-family: var(--font-family-text);
  font-size: calc(var(--font-size-base) * 1.5);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--type-title-s-line-height);
  color: var(--color-heading);
}
.config-balk-sub,
.config-balk-rechts {
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
.config-balk-rechts {
  display: grid;
  gap: var(--space-1);
  text-align: right;
}
.config-balk-rechts b {
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  color: var(--color-heading);
}
.config-steps {
  display: grid;
  gap: var(--space-16);
  margin: 0;
}
.config-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  scroll-margin-top: calc(var(--space-unit) * 35);
}
.config-step-media {
  margin: 0 0 var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 4 / 3;
  background: var(--color-primary-container);
}
.config-step-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.config-step-title {
  display: block;
  margin: 0 0 var(--space-5);
  padding: 0;
  font-family: var(--font-family-text);
  font-size: var(--form-stap-size); /* vast, ook op een telefoon (type-title krimpt daar) */
  font-weight: var(--font-weight-text, var(--font-weight-regular));
  line-height: var(--type-title-l-line-height);
  text-wrap: pretty; /* niet balance: dat maakt de regel smaller dan de kolom */
  color: var(--color-heading);
}
/* één tekstkleur: het eerste woord sterk, de rest in de gewone tekstdikte */
.config-step-title span {
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
}
.config-choice-list {
  display: grid;
  gap: var(--space-3);
}
.config-choice {
  position: relative;
  display: block;
  cursor: pointer;
}
.config-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.config-choice-body {
  display: grid;
  gap: var(--space-1);
  min-height: var(--space-16);
  align-content: center;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface-container); /* geen lijn: een vlak; gekozen krijgt een blauwe ring */
  transition: background var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.config-choice:hover .config-choice-body {
  background: var(--color-surface-container-high);
}
.config-choice input:checked + .config-choice-body {
  box-shadow: inset 0 0 0 var(--border-width-strong) var(--color-action);
}
.config-choice input:focus-visible + .config-choice-body {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--border-width-strong);
}
.config-choice-title {
  font-family: var(--font-family-text);
  font-size: var(--form-keuze-size);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  color: var(--color-heading);
}
.config-choice-desc {
  font-family: var(--font-family-text);
  font-size: var(--form-klein-size); /* zoals bij Apple: 12 px sterk onder een titel van 17 px */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-on-surface);
}
/* .field staat in 10-systeem-basis; hier alleen de ruimte onder een veld in een formulier op de site */
body.site .field {
  margin-bottom: var(--space-4);
}
.config-step.is-missing .config-choice-body,
.field.is-missing input {
  border-color: var(--color-action);
}
.config-step.is-missing .config-step-title::after {
  content: " Kies er één.";
  color: var(--color-action-text);
}
.config-summary {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-primary-container);
}
.config-summary-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  color: var(--color-heading);
}
.config-summary-list {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-variant);
}
.config-submit {
  width: 100%;
}
.config-note,
.config-alt {
  margin: var(--space-3) 0 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-on-surface-variant);
}
.config-alt a {
  color: var(--color-action-text);
}
@media (min-width: 1069px) {
  /* breed: geen maximale breedte, 6,25% van de breedte als marge per kant */
  .config-section .site-inner {
    max-width: none;
    padding-inline: 6.25vw;
  }
  .config-balk {
    box-sizing: border-box;
    height: var(--config-top, calc(var(--space-unit) * 27.25));
    padding-block: 0;
  }
  /* beeld vult de ruimte, de kolom met stappen is vast 328 px, 60 px ertussen (bij 1440 breed: beeld 872 px) */
  .config {
    grid-template-columns: minmax(0, 1fr) calc(var(--space-unit) * 82);
    gap: calc(var(--space-unit) * 15);
    align-items: start;
  }
  /* het beeld staat vast onder de balk bovenaan (--config-top) en vult de rest van het scherm, met 40 px lucht boven en onder */
  .config-gallery {
    display: block;
    position: sticky;
    top: var(--config-top, calc(var(--space-unit) * 27.25));
    padding-block: var(--space-10);
  }
  .config-gallery-frame {
    position: relative;
    overflow: hidden;
    height: calc(100vh - var(--config-top, calc(var(--space-unit) * 27.25)) - 2 * var(--space-10));
    border-radius: var(--radius-card);
    background: var(--color-primary-container);
  }
  .config-gallery-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--duration-intro) ease;
  }
  .config-gallery-image.is-current {
    opacity: 1;
  }
  /* voortgang: rechts aan de rand van het scherm een stip per stap, met een pil die meegroeit met het scrollen (config.js) */
  .config-stippen {
    position: fixed;
    /* in het midden van het beeld, dus van het stuk scherm onder de balk */
    top: calc(var(--config-top, calc(var(--space-unit) * 27.25)) + (100vh - var(--config-top, calc(var(--space-unit) * 27.25))) / 2);
    right: calc(var(--space-unit) * 7.5);
    z-index: var(--z-sticky);
    display: grid;
    gap: calc(var(--space-unit) * 3.5);
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity var(--duration-fast) ease;
    pointer-events: none;
  }
  .config-stippen.is-zichtbaar {
    opacity: 1;
  }
  .config-stippen i {
    display: block;
    width: var(--space-1);
    height: var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-outline-variant);
  }
  .config-stippen b {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--space-1);
    min-height: var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-on-surface);
  }
  .config-step-media {
    display: none;
  }
  .config-steps {
    gap: var(--space-20);
    /* de eerste stap begint op dezelfde hoogte als het beeld: 40 px lucht, min de 8 px die elke stap zelf boven heeft */
    padding-top: var(--space-8);
  }
  /* stappen zo hoog als hun inhoud, overal dezelfde ruimte ertussen */
  .config-step {
    padding-top: var(--space-2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .config-gallery-image,
  .config-stippen {
    transition: none;
  }
}

/* lange naam op een cover (FUTURE OF ENERGY): kleiner, zodat hij niet over het datumblokje loopt */
.event-card-cover-title.is-long {
  font-size: calc(var(--font-size-type-headline-sm) * .72);
}

/* navigatie donker (class nav-dark op body, of op een blok om de balken heen): pagina's. Beide balken in donker glas (80%), tekst licht, links iets gedempt.
   Kleur: color-nav-dark, standaard de donkere grond van het merk */
:is(body.site.nav-dark, body.site .nav-dark) .gn,
:is(body.site.nav-dark, body.site .nav-dark) .ln {
  background: color-mix(in srgb, var(--color-nav-dark) 80%, transparent);
  color: var(--color-on-image);
  border-bottom: 0;
}
:is(body.site.nav-dark, body.site .nav-dark) .gn-merk,
:is(body.site.nav-dark, body.site .nav-dark) .ln-titel {
  color: var(--color-on-image);
}
:is(body.site.nav-dark, body.site .nav-dark) .gn-lijst a,
:is(body.site.nav-dark, body.site .nav-dark) .gn-login,
:is(body.site.nav-dark, body.site .nav-dark) .ln-lijst a {
  color: var(--color-nav-dark-link, color-mix(in srgb, var(--color-on-image) 80%, transparent));
}
:is(body.site.nav-dark, body.site .nav-dark) .gn-lijst a:hover,
:is(body.site.nav-dark, body.site .nav-dark) .gn-login:hover,
:is(body.site.nav-dark, body.site .nav-dark) .ln-lijst a:hover,
:is(body.site.nav-dark, body.site .nav-dark) .ln-lijst a[aria-current] {
  color: var(--color-on-image);
}
:is(body.site.nav-dark, body.site .nav-dark) .gn-knop span {
  background: var(--color-on-image);
}
:is(body.site.nav-dark, body.site .nav-dark) .gn-actie {
  color: var(--color-nav-dark-action);
}
/* navigatie: eigen letter (font-family-nav) en 13 px (font-size-nav); hoogtes. Menu en login medium, de rode actie semibold */
body.site .gn,
body.site .gn *,
body.site .ln,
body.site .ln * {
  font-family: var(--font-family-nav);
}
body.site .gn-lijst a,
body.site .gn-login {
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-medium, 500);
}
body.site .gn-actie {
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-semibold, 600);
}
body.site .ln-lijst a {
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-medium, 500);
}

/* compare: Boosters naast elkaar. Per kolom een naam, dan dezelfde regels op dezelfde hoogte */
.compare {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: var(--space-5);
  margin: 0;
  padding: 0 0 var(--space-4);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.compare-col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-content: start;
  scroll-snap-align: start;
  padding-top: var(--space-6);
  border-top: var(--border-width-default) solid var(--color-outline-variant);
  text-align: center;
}
.compare-name {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-heading);
}
.compare-specs {
  margin: var(--space-8) 0 0;
}
.compare-specs dt {
  margin-top: var(--space-6);
  font-size: var(--font-size-meta);
  color: var(--color-on-surface-variant);
}
.compare-specs dt:first-child {
  margin-top: 0;
}
.compare-specs dd {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-snug);
  color: var(--color-heading);
}
.compare-link {
  align-self: end;
  margin-top: var(--space-8);
  color: var(--color-action-text);
  text-decoration: none;
}
.compare-link:hover {
  text-decoration: underline;
}

/* vragenpagina: titel, een rij onderwerpen, daaronder per onderwerp de vragen */
.faq-page-head {
  margin-bottom: var(--space-12);
}
.faq-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-16);
  padding: 0;
  list-style: none;
}
.faq-topic {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--color-primary-container);
  color: var(--color-heading);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  text-align: center;
  text-decoration: none;
  transition: transform var(--duration-fast) ease;
}
.faq-topic:hover {
  transform: translateY(-2px);
  color: var(--color-action-text);
}
.faq-topic-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.faq-group {
  padding-top: var(--space-12);
  scroll-margin-top: calc(var(--space-unit) * 30);
}
.faq-group-title {
  margin: 0 0 var(--space-6);
  font-family: var(--font-family-text);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-snug);
  color: var(--color-heading);
}
.faq-page-cta {
  margin: var(--space-8) 0 0;
  text-align: center;
}
@media (max-width: 1068px) {
  .faq-topics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .faq-topic {
    padding: var(--space-4) var(--space-2);
    font-size: var(--font-size-xs);
  }
  .faq-topic-icon {
    width: 40px;
    height: 40px;
  }
}
@media (min-width: 1069px) {
  .faq-topics {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

/* heroes op mobiel: de vaste regelbreuk vervalt, de kop verdeelt zichzelf over de regels (text-wrap: balance) */
@media (max-width: 734px) {
  .media-hero-title br,
  .loop-hero-title br {
    display: none;
  }
}

/* kaarttitels en kaarttekst: de eerste regel loopt zo ver mogelijk door (pretty), alleen geen los woord op de laatste regel.
   balance blijft voor koppen; op kaarten naast elkaar breekt dat elke kaart anders af */
.event-card-title,
.event-card-meta,
.feature-card-title,
.feature-card-text,
.promo-card-title,
.promo-card-text,
.reason-card-title,
.reason-card-text,
.next-step-card :is(h3, p),
.tile-text,
.media-gallery-card-text,
.stat-card-line,
.contact-card-text {
  text-wrap: pretty;
}

/* kaarttekst onder het beeld: iets ingesprongen ten opzichte van de kaart, links en rechts gelijk, zoals de kaartjes
   Even ver als de kop op de cover (space-5), zodat de tekst onder en op de kaart op één lijn staan */
.event-card-body {
  padding-inline: var(--space-5);
}

/* power-grid:
   Witte kaarten op een lichte sectie. Eerst een brede kaart over de volle breedte (beeld links, tekst rechts),
   daarna kaarten in twee kolommen met het beeld boven en de tekst eronder. Kop 40 / 32 / 28, tekst 21 / 21 / 19 */
.power-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 735px) {
  .power-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.power-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: calc(var(--space-unit) * 10); /* 40 / 30 / 20 */
  background: var(--color-surface-container-lowest);
}
.power-card-media {
  display: grid;
  place-items: center;
  height: calc(var(--space-unit) * 75); /* beeld 300 / 249 / 230 hoog */
  margin: 0;
}
.power-card-media img {
  display: block;
  width: auto;
  height: 55%;
  max-width: 80%;
  object-fit: contain;
}
.power-card-body {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: 0 calc(var(--space-unit) * 13) calc(var(--space-unit) * 13); /* 52 / 32 / 24 */
}
.power-card-label {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-caption);
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-action-text);
}
.power-card-title {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-headline-sm); /* typeschaal: 40 / 32 / 28 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-type-headline-sm);
  text-transform: none;
  color: var(--color-heading);
  text-wrap: balance;
}
.power-card-text {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-lead-md); /* typeschaal: 21 / 21 / 19 */
  line-height: var(--line-height-type-lead-md);
  color: var(--color-on-surface);
  text-wrap: pretty;
}
/* de brede kaart: over beide kolommen, beeld links en tekst rechts, verticaal in het midden */
.power-card.is-wide {
  grid-column: 1 / -1;
}
@media (min-width: 735px) {
  .power-card.is-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    align-items: center;
  }
  .power-card.is-wide .power-card-media {
    height: 100%;
    min-height: calc(var(--space-unit) * 100);
  }
  .power-card.is-wide .power-card-body {
    padding: calc(var(--space-unit) * 23) calc(var(--space-unit) * 13);
  }
}
.power-card-media.is-illustration img {
  height: 80%;
}
@media (max-width: 1068px) {
  .power-card {
    border-radius: calc(var(--space-unit) * 7.5);
  }
  .power-card-media {
    height: calc(var(--space-unit) * 62.25);
  }
  .power-card-body {
    padding: 0 var(--space-8) var(--space-8);
  }
  .power-card.is-wide .power-card-body {
    padding: var(--space-16) var(--space-8);
  }
}
@media (max-width: 734px) {
  .power-card {
    border-radius: var(--space-5);
  }
  .power-card-media {
    height: calc(var(--space-unit) * 57.5);
  }
  .power-card-body,
  .power-card.is-wide .power-card-body {
    padding: 0 var(--space-6) var(--space-6);
  }
}

/* site-inner is-narrow: een smallere inhoudskolom, zoals de secties (980 px, tablet 692 px).
   Op mobiel gewoon de normale inhoudsbreedte. Voor secties met grote kaarten die rustig moeten ogen */
:root,
[data-brand] {
  --layout-width-narrow: 980px;
  --layout-width-narrow-tablet: 692px;
}
@media (max-width: 1068px) {
  :root,
  [data-brand] {
    --layout-width-narrow: var(--layout-width-narrow-tablet);
  }
}
.site-inner.is-narrow {
  max-width: calc(var(--layout-width-narrow) + 2 * var(--layout-margin));
}
@media (max-width: 734px) {
  .site-inner.is-narrow {
    max-width: var(--layout-container);
  }
}
@media (min-width: 1069px) {
  .power-grid {
    gap: calc(var(--space-unit) * 7.5); /* 30 tussen de kaarten op desktop */
  }
}
/* uitlijning: kaarten gecentreerd; de brede kaart links (op mobiel ook gecentreerd); de sectiekop op mobiel gecentreerd */
.power-card {
  text-align: center;
}
.power-card-body {
  justify-items: center;
}
@media (min-width: 735px) {
  .power-card.is-wide {
    text-align: left;
  }
  .power-card.is-wide .power-card-body {
    justify-items: start;
  }
}
@media (max-width: 734px) {
  .site-inner.is-narrow > .section-intro {
    text-align: center;
  }
}

/* next-step: afstanden (icoon → titel 8, titel → links 24, tussen links 12); vanaf tablet drie naast elkaar */
.next-step-card {
  gap: 0;
}
.next-step-icon {
  margin-bottom: var(--space-2);
}
.next-step-title {
  margin-bottom: var(--space-6);
}
@media (min-width: 735px) {
  .next-step-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 735px) and (max-width: 1068px) {
  .next-step-card {
    padding-inline: var(--space-5);
  }
}

/* radius-tile: de ronde hoek van tegels ("card tile tile-rounded"): 28 px. Alleen voor deze kaarten:
   feature cards en de volgende-stap-kaarten. Andere kaarten houden radius-card */
:root,
[data-brand] {
  --radius-tile: var(--radius-2xl);
}
.next-step-card,
.feature-card-link {
  border-radius: var(--radius-tile);
}

/* tile-grid op tablet en mobiel: 40 px binnenruimte; vanaf tablet twee tegels naast elkaar */
@media (max-width: 1068px) {
  .tile.is-row {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-10);
  }
}
@media (min-width: 735px) and (max-width: 1068px) {
  .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tile.is-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* inleiding onder de grote foto van een tile-grid: even ver ingesprongen als de tekst onder de kaarten (space-5) */
.tile-grid-intro {
  padding-inline: var(--space-5);
  box-sizing: border-box;
}

@media (max-width: 734px) {
  .media-gallery-card-text p {
    font-size: var(--font-size-type-body); /* 17 op mobiel */
  }
}
.media-gallery-card-text b {
  font-weight: var(--font-weight-bold);
}
/* op tablet dezelfde verhouding als op desktop, anders wordt de plaat hoger dan breed */
@media (min-width: 735px) and (max-width: 1068px) {
  .media-gallery.is-card .media-gallery-item {
    aspect-ratio: 1260 / 680;
  }
}

/* stat-card kleiner, met de verhouding van feature cards (372 × 425): op desktop 407 × 465.
   Vanaf tablet drie naast elkaar in plaats van één brede kaart; cijfer uit de typeschaal (display-xl 96 / 80 / 56) */
@media (min-width: 735px) {
  .stat-card-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .stat-card-visual,
  .stat-card .stat-card-visual {
    aspect-ratio: 372 / 425;
  }
}
@media (min-width: 735px) and (max-width: 1068px) {
  .stat-card-visual {
    padding: var(--space-6);
  }
}
.stat-card-number {
  font-size: var(--font-size-type-display-xl);
}
.stat-card-caption {
  font-size: var(--font-size-type-body); /* typeschaal: 17 */
}
.stat-card-caption {
  padding-inline: var(--space-5); /* even ver ingesprongen als de tekst onder de andere kaarten */
}

/* section-intro is-centered: een sectiekop in het midden, voor secties waarvan de inhoud zelf gecentreerd is */
.section-intro.is-centered {
  text-align: center;
}
.section-intro.is-centered .section-intro-lead {
  margin-inline: auto;
}

/* stat-cards in een smalle kolom: op tablet is 692 px te smal voor drie cijferkaarten, daar gewoon de normale inhoudsbreedte */
@media (max-width: 1068px) {
  .site-inner.is-narrow:has(> .stat-card-grid) {
    max-width: var(--layout-container);
  }
}

/* promo-cards: in de smalle kolom (980 / 692), vanaf tablet twee naast elkaar. Op desktop 480 × 600 */
@media (min-width: 735px) {
  .promo-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 735px) and (max-width: 1068px) {
  .promo-card-link {
    padding: var(--space-10) var(--space-6) var(--space-16); /* gelijk aan mobiel */
  }
}
/* de regel onderin mag niet onder het plusje doorlopen: aan beide kanten evenveel ruimte als het plusje inneemt */
.promo-card-note {
  padding-inline: calc(var(--size-control-sm) + var(--space-2));
}

/* plusjes op kaarten: 36 px, 20 px van de rechter- en onderrand */
.feature-card-plus,
.promo-card-plus {
  right: var(--space-5);
  bottom: var(--space-5);
}
.promo-card-note {
  font-size: var(--font-size-type-caption); /* typeschaal: 12 */
}

/* compare: in de smalle kolom (980), vier kolommen gecentreerd.
   Bovenin per kolom de naam (24), één regel uitleg (14) en de link; daaronder dezelfde regels op precies dezelfde hoogte
   (subgrid). De eerste regel (duur) groot groot zet. Op tablet en mobiel schuift de rij */
.compare {
  grid-auto-columns: minmax(calc(var(--space-unit) * 50), 1fr);
  column-gap: var(--space-5);
  row-gap: 0;
}
.compare-col {
  grid-row: span 9;
  padding-top: 0;
  border-top: 0;
}
.compare-specs {
  display: contents;
}
.compare-name {
  font-size: var(--font-size-type-lead-lg); /* typeschaal: 24 / 21 / 19 */
}
.compare-desc {
  margin: var(--space-3) 0 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-body-sm); /* typeschaal: 14 */
  line-height: var(--line-height-type-body-sm);
  color: var(--color-on-surface-variant);
  text-wrap: balance;
}
.compare-link {
  align-self: start;
  margin-top: var(--space-4);
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-body-sm);
}
.compare-specs dt {
  margin: var(--space-8) 0 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-caption); /* typeschaal: 12 */
  line-height: var(--line-height-type-caption);
  color: var(--color-on-surface-variant);
}
.compare-specs dt:first-child {
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: var(--border-width-default) solid var(--color-outline-variant);
}
.compare-specs dd {
  margin: var(--space-1) 0 0;
  font-family: var(--font-family-text);
  font-size: var(--font-size-type-body-sm); /* typeschaal: 14 */
  line-height: var(--line-height-type-body-sm);
  color: var(--color-heading);
  text-wrap: balance;
}
.compare-specs dd.is-key {
  font-size: var(--font-size-type-title-sm); /* typeschaal: 28 / 24 / 21 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-type-title-sm);
}
/* op tablet past de vergelijking met vier kolommen niet in 692 px: daar de normale inhoudsbreedte, dan staan ze alle vier in beeld */
@media (min-width: 735px) and (max-width: 1068px) {
  .site-inner.is-narrow:has(> .compare) {
    max-width: var(--layout-container);
  }
  .compare {
    grid-auto-columns: minmax(0, 1fr);
  }
}

/* compare-panel: Een wit paneel met grote ronde hoeken (radius-tile)
   op de getinte sectie. Bovenin de kop gecentreerd; daaronder de kolommen in de smalle breedte, links uitgelijnd.
   Per kolom: beeld, naam (24 / 21 / 19), één regel uitleg (14, medium), drie korte regels (14) en een kleine knop.
   Regels staan per rij op dezelfde hoogte (subgrid). Op mobiel twee kolommen naast elkaar */
.compare-panel {
  padding: var(--space-24) var(--space-6) var(--space-20);
  border-radius: var(--radius-tile);
  background: var(--color-surface-container-lowest);
}
.compare-panel .compare {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-6);
  row-gap: var(--space-16);
  max-width: var(--layout-width-narrow);
  margin-inline: auto;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}
@media (min-width: 735px) {
  .compare-panel .compare {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-8);
  }
  .compare-panel {
    padding-inline: var(--space-8);
  }
}
@media (min-width: 1069px) {
  .compare-panel .compare {
    column-gap: var(--space-10);
  }
}
.compare-panel .compare-col {
  grid-row: span 7;
  grid-template-rows: subgrid;
  row-gap: 0;
  text-align: left;
}
.compare-media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-card);
  object-fit: cover;
}
.compare-panel .compare-name {
  font-size: var(--font-size-type-lead-lg); /* typeschaal: 24 / 21 / 19 */
  line-height: var(--line-height-type-lead-lg);
}
.compare-panel .compare-desc {
  margin: var(--space-1) 0 var(--space-5);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  text-wrap: pretty;
}
.compare-panel .compare-specs dt,
.compare-panel .compare-specs dt:first-child {
  margin: 0;
  padding: 0;
  border: 0;
}
.compare-panel .compare-specs dd {
  margin: 0 0 var(--space-3);
  color: var(--color-on-surface);
  text-wrap: pretty;
}
.compare-button {
  justify-self: start;
  align-self: start;
  margin-top: var(--space-3);
}

/* compare-panel gecentreerd, met een 3D-icoon per Booster in plaats van een foto */
.compare-panel .compare-col {
  text-align: center;
}
.compare-media.is-icon {
  justify-self: center;
  width: auto;
  height: calc(var(--space-unit) * 24); /* 96 px */
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: contain;
}
.compare-button {
  justify-self: center;
}

/* feature-card-rail is-pair: twee grote kaarten naast elkaar, zoals de kaarten
   Geen schuivende rij maar een raster van twee kolommen over de inhoudsbreedte: 620 × 680, tablet 427 × 628, mobiel onder elkaar 341 × 560.
   Kop in de kaart title-md (32 / 24 / 21), 37 px van de rand, plusje 20 px van de hoek */
.feature-card-rail.is-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  max-width: var(--layout-container);
  margin-inline: auto;
  padding: 0 var(--layout-margin);
  box-sizing: border-box;
  overflow: visible;
}
@media (min-width: 735px) {
  .feature-card-rail.is-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.feature-card-rail.is-pair .feature-card {
  width: auto;
  height: var(--size-pair-card-height-sm);
}
@media (min-width: 735px) {
  .feature-card-rail.is-pair .feature-card {
    height: var(--size-pair-card-height-tablet);
  }
}
@media (min-width: 1069px) {
  .feature-card-rail.is-pair .feature-card {
    height: var(--size-pair-card-height);
  }
}
.feature-card-rail.is-pair .feature-card-text {
  padding: calc(var(--space-unit) * 9.25);
}
.feature-card-rail.is-pair .feature-card-title {
  font-size: var(--font-size-type-title-md); /* typeschaal: 32 / 24 / 21 */
  line-height: var(--line-height-type-title-md);
}
.feature-card-rail.is-pair + .carousel-arrows {
  display: none;
}

/* next-step op tablet en mobiel: een schuivende rij kaarten (344 / 260 breed) die tot de schermrand doorloopt */
@media (max-width: 1068px) {
  .next-step-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(var(--space-unit) * 86); /* 344 */
    margin-inline: calc(var(--layout-margin) * -1);
    padding-inline: var(--layout-margin);
    scroll-padding-inline: var(--layout-margin);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .next-step-grid::-webkit-scrollbar {
    display: none;
  }
  .next-step-card {
    scroll-snap-align: start;
  }
}
@media (max-width: 734px) {
  .next-step-grid {
    grid-auto-columns: calc(var(--space-unit) * 65); /* 260 */
  }
  .next-step-card {
    padding-inline: calc(var(--space-unit) * 5.5); /* 22 */
  }
}
@media (min-width: 735px) and (max-width: 1068px) {
  .next-step-card {
    padding-inline: calc(var(--space-unit) * 7.25); /* 29 op tablet */
  }
}

/* tegels met icoon naast de tekst: tekst verticaal in het midden naast het icoon */
@media (min-width: 1069px) {
  .tile.is-row {
    align-items: center;
  }
}
/* tegels in de smalle kolom (480 breed): 52 px opzij van die breedte */
@media (min-width: 1069px) {
  .site-inner.is-narrow .tile.is-row {
    padding-inline: calc(var(--space-unit) * 13);
    gap: var(--space-5);
  }
}

/* tegels met beeld boven de tekst, in de smalle kolom: rondom dezelfde marge (icloud: 60 op 548 breed; education: 52 op 475 breed).
   Desktop 52, tablet en mobiel 40. De tekst gebruikt de volle breedte binnen die marge */
.site-inner.is-narrow .tile:not(.is-row):not(.is-wide) {
  padding: var(--space-10);
}
.site-inner.is-narrow .tile .tile-text {
  max-width: none;
}
.site-inner.is-narrow .tile.is-wide {
  padding-inline: var(--space-10);
  padding-bottom: var(--space-10);
}
.site-inner.is-narrow .tile.is-wide .tile-media {
  width: calc(100% + var(--space-10) * 2);
  margin-inline: calc(var(--space-10) * -1);
}
@media (min-width: 1069px) {
  .site-inner.is-narrow .tile:not(.is-row):not(.is-wide) {
    padding: calc(var(--space-unit) * 13);
  }
  .site-inner.is-narrow .tile.is-wide {
    padding: 0 calc(var(--space-unit) * 13) 0 0;
  }
  .site-inner.is-narrow .tile.is-wide .tile-media {
    width: 100%;
    margin-inline: 0;
  }
}
@media (min-width: 735px) and (max-width: 1068px) {
  .tile-grid .tile.is-wide {
    grid-column: 1 / -1;
  }
}

/* twee onderdelen in één sectie (kaart, daarna een nieuwe kop): ertussen de sectieafstand van het systeem (144 / 120 / 112) */
.closing-cta.is-card + .section-intro {
  margin-top: var(--space-section);
}

/* ===== thema Beeld ===== */
/* media-gallery (foto's met een bijschrift op het beeld):
   bijschrift 21 halfvet (lead-sm), het begin licht, de rest gedempt; regel met kenmerken uit de schaal (body-sm).
   Op tablet dezelfde liggende verhouding als op desktop, anders worden de foto's hoger dan breed */
.media-gallery-caption p {
  font-size: var(--font-size-type-lead-sm); /* typeschaal: 21 / 21 / 17 */
  font-weight: var(--font-weight-text-strong, var(--font-weight-semibold));
  line-height: var(--line-height-type-lead-sm);
  color: color-mix(in srgb, var(--color-on-image) 70%, transparent);
}
.media-gallery-caption b {
  color: var(--color-on-image);
}
.media-gallery-meta {
  font-size: var(--font-size-type-body-sm); /* typeschaal: 14 */
}
@media (min-width: 1069px) {
  .media-gallery-caption p {
    font-size: var(--font-size-type-lead-sm);
  }
  .media-gallery-meta {
    font-size: var(--font-size-type-body-sm);
  }
}
@media (min-width: 735px) and (max-width: 1068px) {
  .media-gallery.is-content-width {
    --slide: calc(100cqw - 2 * var(--layout-margin));
  }
  .media-gallery.is-content-width .media-gallery-item {
    aspect-ratio: 1260 / 650;
  }
}
/* in de foto-galerij op inhoudsbreedte is de regel onderin de enige tekst: die krijgt de maat van bijschrift (21 halfvet) */
.media-gallery.is-content-width .media-gallery-meta,
.media-gallery.is-content-width .media-gallery-caption p {
  font-size: var(--font-size-type-lead-sm);
  line-height: var(--line-height-type-lead-sm);
}
/* site-image (foto over de volle breedte): vanaf tablet 2 : 1, anders wordt de foto op tablet erg hoog */
@media (min-width: 735px) {
  .site-image img {
    aspect-ratio: 2 / 1;
  }
}

/* made-feature (Beeld): de oproepkaart staat op het smalle grid, de feature op de volle breedte;
   tussen die twee de vaste sectieruimte. Cijfers 48 op alle maten, bijschrift 17 semibold, kop title-sm */
.site-inner.is-narrow:has(> .closing-cta.is-card) + .site-inner {
  margin-top: var(--space-section);
}
.made-feature-heading,
.made-feature-heading b {
  font-size: var(--font-size-type-title-sm);
}
.made-stat-value {
  font-size: var(--font-size-type-stat);
  line-height: var(--line-height-none);
}
.made-stat-caption {
  max-width: none;
  font-size: var(--font-size-type-body);
  line-height: 1.47;
}
/* tablet: de drie cijfers naast elkaar onder het product, de kop er over de volle breedte boven */
@media (min-width: 735px) and (max-width: 1068px) {
  .made-feature-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-5);
    row-gap: var(--space-8);
  }
  .made-feature-heading {
    grid-column: 1 / -1;
  }
}

/* sectiekop + inleiding: de inleiding staat
   op 0,6 × de kopmaat onder de kop (48 → 29, 40 → 24, 32 → 19), en de kop krijgt regelhoogte 1,08. Voor elke sectiekop op de site */
.site-section .section-intro-title:has(+ .section-intro-lead) {
  margin-bottom: calc(0.6em - var(--space-2));
  line-height: 1.08;
}

/* closing-cta (foto + vraag): dezelfde kopruimte als elke sectiekop (0,6 × kopmaat, regelhoogte 1,08) en 32 boven de knop */
.closing-cta:not(.is-card) .closing-cta-title {
  margin-bottom: calc(0.6em - var(--space-2));
  line-height: 1.08;
}
.closing-cta:not(.is-card) .button {
  margin-top: calc(var(--space-8) - var(--space-2));
}

/* congruentie-check: de laatste letters die nog buiten de typeschaal vielen (16, 18, 20, 29) op de schaal gezet */
.intro-copy p {
  font-size: var(--font-size-type-headline-sm); /* 40 / 32 / 28 */
}
.faq-question {
  font-size: var(--font-size-type-lead-lg); /* 24 / 21 / 19 */
}
.faq-answer p,
.host-card-name,
.config-summary-title {
  font-size: var(--font-size-type-body); /* 17 */
}
.closing-cta.is-card .closing-cta-text {
  font-size: var(--font-size-type-lead-sm); /* 21 / 21 / 17 */
}
.closing-cta.is-card .button {
  font-size: var(--font-size-button); /* 17, zoals elke knop */
}
.faq-more,
.faq-more .section-intro-link {
  font-size: var(--font-size-type-body); /* 17 */
}

/* datumvakje op de kaart: iets lichter glas (30% in plaats van 50%), de blur houdt de tekst leesbaar */
.event-card-date {
  background: color-mix(in srgb, var(--color-scrim) 30%, transparent);
}

}

@layer brand {
/* ---------- 40-merken: laag 2 ----------
   Per merk alleen waarden: [data-brand="..."] voor Light, met [data-modus="dark"] en [data-modus="sand"] erbij.
   Wat een modus niet noemt, is gelijk aan Light. Nooit een selector op een component: dat is laag 1. */

/* YAM: waarden uit YesAndMore Design System, in de nieuwe namen */
[data-brand="yam"] {
  /* tekstletter is geen Inter: geen letterafstand uit de tabel van Inter */
  --type-lead-tracking: 0em;
  --type-body-l-tracking: 0em;
  --type-body-m-tracking: 0em;
  --type-body-s-tracking: 0em;
  --neutral-variant-900: #202B31;
  --neutral-variant-850: #2D383F;
  --neutral-variant-800: #354149;
  --neutral-variant-700: #47515C;
  --neutral-variant-600: #5C6874;
  --neutral-variant-350: #A6AAAD;
  --neutral-50: #FBF9F4;
  --neutral-200: #F3ECDF;
  --neutral-100: #F7F4ED;
  --neutral-150: #F5F0E7;
  --neutral-250: #EAE4D9;
  --neutral-300: #E1D7CA;
  --neutral-350: #C9C2B3;
  --neutral-400: #B8B2A2;
  --neutral-600: #6B6861;
  --neutral-700: #5A564F;
  --neutral-0: #FFFFFF;
  --primary-50: #EEF2E9;
  --primary-300: #AEB99F;
  --illustration-1: #58B97A;
  --primary-500: #548F52;
  --illustration-2: #00D959;
  --error-50: #FBF0EC;
  --error-200: #E8C7BE;
  --error-550: #B4503C;
  --warning-250: #EBA94D;
  --attention-400: #E57A5E;
  --illustration-3: #9C4E17;
  --illustration-4: #9C8BD7;

  --color-surface: var(--neutral-100);
  --color-band-alt: var(--neutral-0);
  --color-surface-inverse: var(--neutral-variant-850);
  --color-surface-brand: var(--neutral-variant-900);
  --color-surface-dim: var(--neutral-150);
  --color-surface-container-lowest: var(--neutral-0);
  --color-surface-container-low: var(--neutral-250);
  --color-surface-container: var(--neutral-300);
  --color-fill-strong: var(--neutral-variant-600);
  --color-surface-container-highest: var(--neutral-350);
  --color-media-placeholder: var(--neutral-300);
  --color-surface-inverse-container: color-mix(in srgb, var(--neutral-50) 7%, transparent);
  --color-choice: var(--neutral-0);
  --color-on-surface: var(--neutral-variant-900);
  --color-heading: var(--neutral-variant-900);
  --color-on-surface-variant: var(--neutral-variant-600);
  --color-on-surface-muted: var(--neutral-600);
  --color-on-surface-inverse: var(--neutral-200);
  --color-on-surface-inverse-variant: var(--neutral-350);
  --color-on-image: var(--neutral-0);
  --color-outline-subtle: var(--neutral-250);
  --color-outline-variant: var(--neutral-300);
  --color-outline: var(--neutral-600);
  --color-outline-inverse: var(--neutral-variant-700);
  --color-action-ghost: color-mix(in srgb, var(--neutral-variant-900) 10%, transparent);
  --color-action-ghost-inverse: color-mix(in srgb, var(--neutral-200) 16%, transparent);
  --color-selection: var(--primary-50);
  --color-selection-border: var(--primary-300);
  --color-success: var(--primary-500);
  --color-warning: var(--warning-250);
  --color-attention: var(--attention-400);
  --color-error: var(--error-550);
  --color-error-container: var(--error-50);
  --color-error-outline: var(--error-200);
  --color-progress: var(--illustration-2);
  --color-focus-ring: var(--neutral-variant-900);
  --color-shadow: var(--neutral-variant-900);
  --color-annotation: var(--illustration-1);
  --color-annotation-alt: var(--illustration-4);
  --color-data-1: var(--neutral-variant-800);
  --color-data-2: var(--primary-500);
  --color-data-3: var(--neutral-350);
  --color-data-4: var(--attention-400);

  --font-family-display: "Source Sans Pro", "Source Sans 3", system-ui, sans-serif;
  --font-family-text: "Source Sans Pro", "Source Sans 3", system-ui, sans-serif;
  --font-family-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --font-weight-display: var(--font-weight-semibold);
  --font-size-base: 16px;
  --line-height-none: 1;
  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.5;
  --line-height-loose: 1.7;
  --space-unit: 4px;
  --border-width-default: 1px;
  --border-width-strong: 2px;
  --radius-none: 0px;
  --radius-3xs: 2px;
  --radius-2xs: 4px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-card: 18px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-3xl: 40px;
  --radius-full: 999px;
  --layout-width-form: 560px;
  --layout-width-reading: 640px;
  --layout-width-content: 1260px;
  --layout-width-wide: 1520px;
  /* rollen naar Material: merkkleuren, scrim */
  --color-primary: var(--primary-500);
  --color-on-primary: var(--neutral-0);
  --color-scrim: var(--neutral-variant-900);
  --opacity-scrim-image: 0.35;
  --color-action: var(--neutral-variant-800);
  --color-on-action: var(--neutral-200);
  /* tekst in regular, labels en titels halfvet (YAM-gids, Typography) */
  --font-weight-text: var(--font-weight-regular);
  --font-weight-text-strong: var(--font-weight-semibold);
  --type-label-l-tracking: 0em;
  --type-label-m-tracking: 0em;
  --type-label-s-tracking: 0em;
  /* twee stappen inkt erbij voor Dark (5 nov 2026): 950 onder de grond, 750 tussen 800 en 700 */
  --neutral-variant-950: #172025;
  --neutral-variant-750: #3E4952;
  /* op een donkere grond: de lichte stap van het ivoor */
  --color-inverse-primary: var(--neutral-200);
  --color-action-inverse: var(--neutral-200);
  --color-on-action-inverse: var(--neutral-variant-900);
}

/* YAM donker (5 nov 2026): de inkt als grond, ivoor als tekst. Containers lopen op, elke trede een stap lichter. */
[data-brand="yam"][data-modus="dark"] {
  --color-surface: var(--neutral-variant-950);
  --color-surface-dim: var(--neutral-variant-900);
  --color-band-alt: var(--neutral-variant-900);
  --color-surface-container-lowest: var(--neutral-variant-900);
  --color-surface-container-low: var(--neutral-variant-850);
  --color-surface-container: var(--neutral-variant-800);
  --color-surface-container-high: var(--neutral-variant-750);
  --color-surface-container-highest: var(--neutral-variant-700);
  --color-media-placeholder: var(--neutral-variant-750);
  --color-choice: var(--neutral-variant-900);
  --color-surface-inverse: var(--neutral-variant-950);
  --color-surface-brand: var(--neutral-variant-950);
  --color-surface-inverse-container: var(--neutral-variant-850);
  --color-fill-strong: var(--neutral-variant-350);
  --color-on-surface: var(--neutral-200);
  --color-heading: var(--neutral-200);
  --color-on-surface-variant: var(--neutral-350);
  --color-on-surface-muted: var(--neutral-variant-350);
  --color-outline: var(--neutral-variant-350);
  --color-outline-variant: var(--neutral-variant-700);
  --color-outline-subtle: var(--neutral-variant-850);
  --color-action: var(--neutral-200);
  --color-on-action: var(--neutral-variant-900);
  --color-focus-ring: var(--neutral-200);
  --color-selection: var(--neutral-variant-800);
  --color-selection-border: var(--primary-300);
  --color-action-ghost: color-mix(in srgb, var(--neutral-200) 16%, transparent);
  --color-shadow: var(--neutral-variant-950);
  --color-success: var(--illustration-1);
  --color-error-container: var(--neutral-variant-850);
  /* fouttekst op inkt: de lichte stap van het rood (7,9:1); 550 haalde maar 3,3:1 */
  --color-error: var(--error-200);
  --color-error-outline: var(--error-200);
  --color-data-1: var(--neutral-200);
  --color-data-3: var(--neutral-variant-600);
  color-scheme: dark;
}

/* YAM sand: een warme stap dieper dan het ivoor, met witte kaarten. Wat niet hier staat is gelijk aan light. */
[data-brand="yam"][data-modus="sand"] {
  --color-surface: var(--neutral-200);
  --color-surface-dim: var(--neutral-250);
  --color-band-alt: var(--neutral-100);
  --color-surface-container-lowest: var(--neutral-0);
  --color-surface-container-low: var(--neutral-250);
  --color-surface-container: var(--neutral-300);
  --color-media-placeholder: var(--neutral-300);
  --color-outline-variant: var(--neutral-350);
}

/* WeStayHere: het moederbestand. De merkbalk staat altijd in deze waarden.
   Het startsjabloon voor een nieuwe klant (sjabloon) begint ook hier, tot de klant eigen waarden heeft. */
[data-brand="westayhere"],
[data-brand="ppp"],
[data-brand="sjabloon"],
.merkbalk {
  --success-550: #3C8D55;
  --warning-300: #E5A23A;
  --attention-400: #E9785A;
  --error-50: #FDEEEE;
  --error-150: #F5C6C6;
  --error-550: #C53030;
  --neutral-0: #FFFFFF;
  --neutral-50: #F7F7F7;
  --neutral-100: #F0F0F0;
  --neutral-200: #E5E5E5;
  --neutral-300: #D6D6D6;
  --neutral-350: #C2C2C2;
  --neutral-400: #A3A3A3;
  --neutral-500: #737373;
  /* 550 erbij (5 nov 2026): bijschrift haalt zo 5,4:1 op neutral-50; 500 haalde 4,4:1. Nog in Penpot zetten */
  --neutral-550: #666666;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #333333;
  --neutral-900: #262626;

  --color-surface: var(--neutral-50);
  --color-band-alt: var(--neutral-0);
  --color-surface-inverse: var(--neutral-800);
  --color-surface-brand: var(--neutral-900);
  --color-surface-dim: var(--neutral-100);
  --color-surface-container-lowest: var(--neutral-0);
  --color-surface-container-low: var(--neutral-100);
  --color-surface-container: var(--neutral-200);
  --color-fill-strong: var(--neutral-500);
  --color-surface-container-highest: var(--neutral-350);
  --color-media-placeholder: var(--neutral-300);
  --color-surface-inverse-container: color-mix(in srgb, var(--neutral-0) 8%, transparent);
  --color-choice: var(--neutral-0);
  --color-on-surface: var(--neutral-900);
  --color-heading: var(--neutral-900);
  --color-on-surface-variant: var(--neutral-600);
  --color-on-surface-muted: var(--neutral-550);
  --color-on-surface-inverse: var(--neutral-100);
  --color-on-surface-inverse-variant: var(--neutral-350);
  --color-on-image: var(--neutral-0);
  --color-outline-subtle: var(--neutral-200);
  --color-outline-variant: var(--neutral-300);
  --color-outline: var(--neutral-500);
  --color-outline-inverse: var(--neutral-600);
  --color-action-ghost: color-mix(in srgb, var(--neutral-900) 10%, transparent);
  --color-action-ghost-inverse: color-mix(in srgb, var(--neutral-100) 16%, transparent);
  --color-success: var(--success-550);
  --color-warning: var(--warning-300);
  --color-attention: var(--attention-400);
  --color-error: var(--error-550);
  --color-error-container: var(--error-50);
  --color-error-outline: var(--error-150);
  --color-focus-ring: var(--neutral-900);
  --color-shadow: var(--neutral-900);
  --color-annotation-alt: var(--attention-400);
  --color-data-3: var(--neutral-500);
  --color-data-4: var(--neutral-350);

  --font-family-display: "Inter", system-ui, "Segoe UI", sans-serif;
  --font-family-text: "Inter", system-ui, "Segoe UI", sans-serif;
  --font-family-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --font-size-base: 16px;
  --line-height-none: 1;
  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.5;
  --line-height-loose: 1.7;
  --space-unit: 4px;
  --border-width-default: 1px;
  --border-width-strong: 2px;
  --radius-none: 0px;
  --radius-3xs: 2px;
  --radius-2xs: 4px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-3xl: 40px;
  --radius-full: 999px;
  --layout-width-form: 560px;
  --layout-width-reading: 640px;
  --layout-width-content: 1260px;
  --layout-width-wide: 1520px;
  /* rollen naar Material: merkkleuren, scrim */
  --color-on-primary: var(--neutral-0);
  --color-scrim: var(--neutral-900);
  --opacity-scrim-image: 0.35;
  --color-action: var(--neutral-700);
  --color-on-action: var(--neutral-100);
}

/* alleen WeStayHere (en de merkbalk). Kleuren opnieuw bepaald op 5 november 2026, zie kleur-keuzes.md.
   Een filmstudio: wit, zand, warm zwart en één blauw. Wit is de grond, zand de kaarten en banden (omgedraaid op 5 nov). Het beeld brengt de kleur.
   Nummer = donkerte: (100 - L*) x 10. Vaste punten: neutral-0, 50, 150, 900, 950 en primary-350, 600. De rest is uitgerekend.
   Overschrijft het gedeelde blok hierboven; PPP houdt daar zijn eigen waarden. */
[data-brand="westayhere"],
.merkbalk {
  /* drie diktes (5 nov 2026): tekst medium (500), titels en labels halfvet (600), koppen vet (700). Penpot kent geen 450 */
  --font-weight-text: var(--font-weight-medium);
  --font-weight-display: var(--font-weight-bold);
  --icon-stroke-width: 1.5;
  --icon-stroke-width-strong: 2;
  /* de tekst op het laatste beeld van de opening staat hoger, boven het land in de lucht (6 nov 2026). Nog in Penpot zetten */
  --welcome-tekst-onder: 34svh;
  --neutral-0: #FFFFFF;
  --neutral-50: #F4F0EB;
  --neutral-100: #E9E1DA;
  --neutral-150: #DBD3CC;
  --neutral-200: #CDC5BE;
  --neutral-250: #BFB7B1;
  --neutral-300: #B2AAA3;
  --neutral-350: #A49C96;
  --neutral-400: #978F89;
  --neutral-450: #8A827C;
  --neutral-500: #7D7670;
  --neutral-550: #706963;
  --neutral-600: #645D57;
  --neutral-650: #58514C;
  --neutral-700: #4C4641;
  --neutral-750: #403A36;
  --neutral-800: #342F2C;
  --neutral-850: #292522;
  --neutral-900: #221E1B;
  --neutral-950: #0F0D0B;
  --primary-50: #E8F1FF;
  --primary-100: #D0E4FF;
  --primary-150: #B8D7FF;
  --primary-200: #9FC9FF;
  --primary-250: #87BCFF;
  --primary-300: #6AAEFF;
  --primary-350: #3D9BFF;
  --primary-400: #3692F6;
  --primary-450: #2C84E7;
  --primary-500: #2277D8;
  --primary-550: #1669C9;
  --primary-600: #0058B6;
  --primary-650: #004FAC;
  --primary-700: #00429D;
  --primary-750: #133780;
  --primary-800: #1B2C65;
  --primary-850: #19234C;
  --primary-900: #161934;
  --primary-950: #100F1D;
  --success-500: #34C759;
  --success-550: #037C2E;
  --warning-400: #FF9500;
  --warning-550: #9D5A01;
  --error-400: #FF513F;
  --error-600: #B90011;

  --color-surface: var(--neutral-0);
  --color-surface-dim: var(--neutral-150);
  --color-band-alt: var(--neutral-150);
  --color-surface-container-lowest: var(--neutral-0);
  --color-nav-global: var(--neutral-0);
  --color-surface-container-low: var(--neutral-50);
  --color-surface-container: var(--neutral-100);
  --color-surface-container-high: var(--neutral-200);
  --color-surface-container-highest: var(--neutral-250);
  --color-media-placeholder: var(--neutral-200);
  --color-choice: var(--neutral-0);
  --color-surface-inverse: var(--neutral-950);
  --color-surface-brand: var(--neutral-950);
  --color-surface-inverse-container: var(--neutral-850);
  --color-fill-strong: var(--neutral-500);

  --color-on-surface: var(--neutral-900);
  --color-heading: var(--neutral-900);
  --color-on-surface-variant: var(--neutral-700);
  --color-on-surface-muted: var(--neutral-650);
  --color-on-surface-inverse: var(--neutral-0);
  --color-on-surface-inverse-variant: var(--neutral-100);
  --color-on-image: var(--neutral-0);

  --color-outline: var(--neutral-500);
  --color-outline-variant: var(--neutral-250);
  --color-outline-subtle: var(--neutral-200);
  --color-outline-inverse: var(--neutral-800);

  --color-primary: var(--primary-600);
  --color-on-primary: var(--neutral-50);
  --color-inverse-primary: var(--primary-350);
  --color-action: var(--color-primary);
  --color-on-action: var(--color-on-primary);
  --color-action-inverse: var(--color-inverse-primary);
  --color-on-action-inverse: var(--neutral-950);
  --color-action-ghost: color-mix(in srgb, var(--neutral-900) 10%, transparent);
  --color-action-ghost-inverse: color-mix(in srgb, var(--neutral-0) 16%, transparent);
  --color-focus-ring: var(--primary-600);
  --color-selection: var(--primary-50);
  --color-selection-border: var(--primary-200);
  --color-control-subtle: var(--primary-100);
  --color-progress: var(--primary-600);
  --color-annotation: var(--primary-600);
  --color-annotation-alt: var(--neutral-650);

  /* status: een gevuld icoon draagt de kleur, de tekst blijft zwart. Alleen fouttekst bij een veld is rood */
  /* Light en Sand een stap donkerder: zo halen de iconen 3:1 op wit en op zand (5 nov 2026) */
  --color-success: var(--success-550);
  --color-warning: var(--warning-550);
  --color-attention: var(--warning-400);
  --color-error: var(--error-600);
  --color-error-container: var(--neutral-0);
  --color-error-outline: var(--error-600);

  /* datakleuren: het thema van Google Slides, accent 1 t/m 6 (één kleur tegen grijs) */
  --color-data-1: var(--primary-600);
  --color-data-2: var(--primary-350);
  --color-data-3: var(--primary-800);
  --color-data-4: var(--neutral-650);
  --color-data-5: var(--neutral-400);
  --color-data-6: var(--primary-150);

  --color-scrim: var(--neutral-950);
  --color-shadow: var(--neutral-950);
}

/* WeStayHere donker: eerste opzet (5 nov 2026), alleen om de weergaveknop in de gids te testen. Nog niet in Penpot.
   Afgeleid van de keuzes voor de donkere secties: diep zwart als grond, wit als tekst, blauw op zwart als actie.
   Het script van de gids zet data-modus op html. */
[data-brand="westayhere"][data-modus="dark"] {
  --color-success: var(--success-500);
  --color-warning: var(--warning-400);
  /* containers lopen op, elke trede een stap lichter (5 nov 2026) */
  --color-surface: var(--neutral-950);
  --color-surface-dim: var(--neutral-900);
  --color-band-alt: var(--neutral-900);
  --color-surface-container-lowest: var(--neutral-900);
  --color-surface-container-low: var(--neutral-850);
  --color-surface-container: var(--neutral-800);
  --color-surface-container-high: var(--neutral-750);
  --color-surface-container-highest: var(--neutral-700);
  --color-media-placeholder: var(--neutral-750);
  --color-choice: var(--neutral-900);
  --color-nav-global: var(--neutral-950);
  --color-surface-inverse: var(--neutral-950);
  --color-surface-brand: var(--neutral-950);
  --color-surface-inverse-container: var(--neutral-850);
  --color-fill-strong: var(--neutral-500);

  --color-on-surface: var(--neutral-0);
  --color-heading: var(--neutral-0);
  --color-on-surface-variant: var(--neutral-100);
  --color-on-surface-muted: var(--neutral-250);

  --color-outline: var(--neutral-500);
  --color-outline-variant: var(--neutral-700);
  --color-outline-subtle: var(--neutral-850);

  --color-primary: var(--primary-350);
  --color-on-primary: var(--neutral-950);
  --color-action: var(--color-primary);
  --color-on-action: var(--color-on-primary);
  --color-link: var(--color-primary);
  --color-nav-link: var(--color-primary);
  --color-focus-ring: var(--primary-350);
  --color-selection: var(--primary-900);
  --color-selection-border: var(--primary-750);
  --color-control-subtle: var(--primary-850);
  --color-action-ghost: color-mix(in srgb, var(--neutral-0) 16%, transparent);
  --color-error: var(--error-400);
  --color-error-outline: var(--error-400);
  --color-error-container: var(--neutral-850);
  /* datakleuren: een lichtere stap, zodat ze op zwart minstens 3:1 halen */
  --color-data-1: var(--primary-350);
  --color-data-2: var(--primary-150);
  --color-data-3: var(--primary-550);
  --color-data-4: var(--neutral-250);
  --color-data-5: var(--neutral-450);
  --color-data-6: var(--primary-250);

  color-scheme: dark;
}

/* WeStayHere sand: het derde thema naast light en dark, voor uitingen met zand als grond. Wat niet hier staat is gelijk aan light. */
[data-brand="westayhere"][data-modus="sand"] {
  --color-surface: var(--neutral-150);
  --color-surface-dim: var(--neutral-200);
  --color-band-alt: var(--neutral-100);
  --color-surface-container-lowest: var(--neutral-0);
  --color-surface-container-high: var(--neutral-250);
  --color-nav-global: var(--neutral-0);
  --color-outline: var(--neutral-550);
  --color-outline-variant: var(--neutral-350);
}

/* PPP: gebouwd op het moederbestand, met eigen palet, letters en koppelingen */
[data-brand="ppp"] {
  /* tekstletter is geen Inter: geen letterafstand uit de tabel van Inter */
  --type-lead-tracking: 0em;
  --type-body-l-tracking: 0em;
  --type-body-m-tracking: 0em;
  --type-body-s-tracking: 0em;
  --type-label-l-tracking: 0em;
  --type-label-m-tracking: 0em;
  --type-label-s-tracking: 0em;
  --primary-350: #FF7262;
  --primary-500: #D05041;
  --primary-550: #CA4232;
  --tertiary-400: #F84969;
  --tertiary-450: #F73558;
  --tertiary-500: #F03355;
  /* roze als tekst: een donkere stap voor op licht (5,6:1 op wit), een lichte voor op donker (5,8:1 op neutral-950). 5 nov 2026 */
  --tertiary-300: #FA6F87;
  --tertiary-600: #CE0D30;
  --primary-50: #FCF4EE;
  --primary-100: #F5E4DA;
  --primary-150: #EDD5C8;
  --secondary-150: #F9D85B;
  --neutral-950: #222222;
  --neutral-850: #2A2A2A;
  --neutral-750: #3B3B3B;
  --neutral-650: #4A4A4A;
  --neutral-550: #6C6C6C;
  --color-surface: var(--neutral-0);
  --color-band-alt: var(--neutral-50);
  --color-surface-inverse: var(--neutral-950);
  --color-surface-brand: var(--neutral-950);
  --color-on-surface: var(--neutral-950);
  --color-on-surface-variant: var(--neutral-550);
  --color-on-surface-muted: var(--neutral-550);
  --neutral-150: #EBEBEB;
  --neutral-250: #DDDDDD;
  --color-outline-subtle: var(--neutral-150);
  --color-outline-variant: var(--neutral-250);
  --color-heading: var(--neutral-950);
  --color-link: var(--tertiary-600);
  --color-action-text: var(--tertiary-600);
  --color-action-text-inverse: var(--tertiary-300);
  /* de roze knop blijft roze op donker */
  --color-action-inverse: var(--color-action);
  --color-on-action-inverse: var(--color-on-action);
  --color-progress: var(--color-primary);
  --color-annotation: var(--color-primary);
  --color-data-1: var(--color-primary);
  --color-focus-ring: var(--neutral-850);
  --font-family-display: "Rubik", system-ui, "Segoe UI", sans-serif;
  --font-family-text: "Inter Tight", system-ui, "Segoe UI", sans-serif;
  --font-family-nav: "Inter", system-ui, "Segoe UI", sans-serif;
  --text-case-heading: uppercase;
  --font-family-title: var(--font-family-text);
  --line-height-heading: var(--line-height-none);
  --font-weight-text: var(--font-weight-medium);
  --font-weight-text-strong: var(--font-weight-semibold);
  --color-nav-local: var(--primary-50);
  --color-nav-global: var(--primary-50);
  --color-on-nav-global: var(--color-on-surface);
  --color-nav-global-muted: var(--color-on-surface-variant);
  --color-nav-global-line: var(--color-outline-variant);
  --color-nav-dark-link: var(--color-on-surface-inverse-variant);
  --color-primary-container: var(--primary-50);
  --color-control-subtle: var(--primary-100);
  --color-control-strong: var(--neutral-950);
  --color-on-control-strong: var(--neutral-0);
  --color-footer: var(--color-primary-container);
  --color-cover-shadow: var(--neutral-950);
  --color-cover-title: var(--neutral-0);
  --color-ribbon: var(--neutral-0);
  --opacity-nav-local: 0.82;
  --font-weight-display: var(--font-weight-extrabold);
  --font-weight-button: var(--font-weight-medium);
  --letter-spacing-text: 0.015em;
  --line-height-tight: 1.2;
  --line-height-relaxed: 1.7;
  --font-size-4xl: calc(var(--font-size-base) * 2.5);
  --radius-button: var(--radius-full);
  /* rollen naar Material: merkkleuren, scrim */
  /* primary is het roze (5 nov 2026); koraal blijft accent */
  --color-primary: var(--tertiary-450);
  --color-on-primary: var(--neutral-0);
  --color-secondary: var(--secondary-150);
  --color-on-secondary: var(--neutral-950);
  --color-tertiary: var(--tertiary-450);
  --color-on-tertiary: var(--neutral-0);
  --color-action: var(--color-primary);
  --color-on-action: var(--color-on-primary);
  --color-cover-1: var(--color-tertiary);
  --color-cover-2: var(--primary-350);
  --color-cover-3: var(--color-secondary);
  --color-selection: var(--color-primary-container);
  --color-selection-border: var(--primary-150);
  --color-data-2: var(--primary-150);
  --color-scrim: var(--neutral-950);
  --opacity-scrim-image: 0.35;
  --opacity-scrim-hero: 0.55;
  --opacity-scrim-media: 0.15;
}
/* PPP donker (5 nov 2026): zelfde opbouw als WeStayHere, met de grijzen van PPP. Containers lopen op. */
[data-brand="ppp"][data-modus="dark"] {
  --color-surface: var(--neutral-950);
  --color-surface-dim: var(--neutral-900);
  --color-band-alt: var(--neutral-900);
  --color-surface-container-lowest: var(--neutral-900);
  --color-surface-container-low: var(--neutral-850);
  --color-surface-container: var(--neutral-800);
  --color-surface-container-high: var(--neutral-750);
  --color-surface-container-highest: var(--neutral-700);
  --color-media-placeholder: var(--neutral-750);
  --color-choice: var(--neutral-900);
  --color-primary-container: var(--neutral-850);
  --color-control-subtle: var(--neutral-800);
  --color-nav-global: var(--neutral-950);
  --color-nav-local: var(--neutral-950);
  --color-selection: var(--neutral-850);
  --color-selection-border: var(--neutral-650);
  --color-on-surface: var(--neutral-0);
  --color-heading: var(--neutral-0);
  --color-on-surface-variant: var(--neutral-350);
  --color-on-surface-muted: var(--neutral-400);
  --color-outline: var(--neutral-500);
  --color-outline-variant: var(--neutral-650);
  --color-outline-subtle: var(--neutral-850);
  --color-link: var(--tertiary-300);
  --color-action-text: var(--tertiary-300);
  --color-focus-ring: var(--neutral-0);
  --color-action-ghost: color-mix(in srgb, var(--neutral-0) 16%, transparent);
  color-scheme: dark;
}

/* PPP sand: de warme grond van de site (primary-50) met primary-100 voor banden, velden en zachte knoppen. Kaarten wit. */
[data-brand="ppp"][data-modus="sand"] {
  --color-surface: var(--primary-50);
  --color-surface-dim: var(--primary-100);
  --color-band-alt: var(--primary-100);
  --color-primary-container: var(--primary-100);
  --color-surface-container-lowest: var(--neutral-0);
  --color-surface-container-low: var(--primary-50);
  --color-surface-container: var(--primary-100);
  --color-surface-container-high: var(--primary-150);
  --color-surface-container-highest: var(--primary-150);
  --color-media-placeholder: var(--primary-100);
  --color-outline-variant: var(--primary-150);
  --color-outline-subtle: var(--primary-100);
}

/* FXR: wat FXR Merk nu heeft, vertaald naar de nieuwe namen, plus een voorstel voor de rollen die vandaag nieuw zijn.
   Wat FXR echt nog mist, staat er bewust niet: dat zie je in de gids als ontbrekend. */
[data-brand="fxr"] {
  --neutral-0: #FFFFFF;
  --neutral-50: #F4F1EC;
  --neutral-100: #EAE5DD;
  --neutral-150: #E2DDD4;
  --neutral-250: #BEBAB2;
  --neutral-400: #9A9790;
  --neutral-600: #6B6862;
  --neutral-750: #4A4742;
  --neutral-900: #2A2723;
  --neutral-950: #1F1D1A;
  --primary-450: #E4572E;
  --primary-550: #C43E18;
  --primary-50: #FCECE6;
  --primary-200: #F4BBA8;
  --success-550: #3C8D55;
  --warning-300: #E5A23A;
  --error-50: #FDEEEE;
  --error-150: #F5C6C6;
  --error-550: #C53030;

  --color-surface: var(--neutral-50);
  --color-band-alt: var(--neutral-0);
  --color-surface-inverse: var(--neutral-950);
  --color-surface-brand: var(--neutral-950);
  --color-surface-dim: var(--neutral-100);
  --color-surface-container-lowest: var(--neutral-0);
  --color-surface-container-low: var(--neutral-100);
  --color-surface-container: var(--neutral-100);
  --color-fill-strong: var(--neutral-600);
  --color-surface-inverse-container: color-mix(in srgb, var(--neutral-50) 8%, transparent);
  --color-on-surface: var(--neutral-750);
  --color-on-surface-variant: var(--neutral-600);
  --color-on-surface-muted: var(--neutral-400);
  --color-on-surface-inverse: var(--neutral-50);
  --color-on-surface-inverse-variant: var(--neutral-400);
  --color-on-image: var(--neutral-0);
  --color-outline-subtle: var(--neutral-100);
  --color-outline-variant: var(--neutral-150);
  --color-outline: var(--neutral-600);
  --color-outline-inverse: var(--neutral-750);
  --color-action-ghost: color-mix(in srgb, var(--neutral-950) 10%, transparent);
  --color-action-ghost-inverse: color-mix(in srgb, var(--neutral-50) 16%, transparent);
  --color-focus-ring: var(--primary-450);
  --color-shadow: var(--neutral-950);
  --color-annotation: var(--primary-450);
  --color-annotation-alt: var(--neutral-400);
  /* gelijkgetrokken met Penpot (FXR Merk): deze rollen ontbraken in de CSS */
  --color-heading: var(--color-on-surface);
  --color-surface-container-highest: var(--neutral-250);
  --color-choice: var(--neutral-0);
  --color-selection: var(--primary-50);
  --color-selection-border: var(--primary-200);
  --color-success: var(--success-550);
  --color-warning: var(--warning-300);
  --color-attention: var(--primary-450);
  --color-error: var(--error-550);
  --color-error-container: var(--error-50);
  --color-error-outline: var(--error-150);
  --color-progress: var(--primary-450);
  --color-data-1: var(--primary-450);
  --color-data-2: var(--neutral-750);
  --color-data-3: var(--neutral-400);
  --color-data-4: var(--neutral-150);

  --font-family-display: "Sora", system-ui, "Segoe UI", sans-serif;
  --font-family-text: "Inter", system-ui, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;
  --font-size-base: 1rem;
  --line-height-none: 1;
  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.5;
  --space-unit: 0.25rem;
  --border-width-default: 1px;
  --border-width-strong: 2px;
  --radius-xs: 0.25rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.125rem;
  --radius-full: 999px;
  --layout-width-form: 46rem;
  --layout-width-content: 78.75rem;
  /* rollen naar Material: merkkleuren, scrim */
  --color-primary: var(--primary-450);
  --color-on-primary: var(--neutral-50);
  --color-scrim: var(--neutral-950);
  --opacity-scrim-image: 0.35;
}

}

@layer toegang {
/* ---------- 45-toegang: laag 1, maar na de merken ----------
   Instellingen van het apparaat gaan voor de waarden van het merk. Daarom staat dit in een eigen laag na brand.
   Hoog contrast: tweede tekst krijgt de tekstkleur en lijnen worden de sterke rand. Minder beweging: overgangen worden kort. */
@media (prefers-contrast: more) {
  :root,
  [data-brand] {
    --color-on-surface-variant: var(--color-on-surface);
    --color-on-surface-muted: var(--color-on-surface);
    --color-on-surface-inverse-variant: var(--color-on-surface-inverse);
    --color-outline-subtle: var(--color-outline);
    --color-outline-variant: var(--color-outline);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root,
  [data-brand] {
    --duration-fast: 0.01s;
    --duration-slow: 0.01s;
    --duration-fade: 0.01s;
    --duration-intro: 0.01s;
  }
}

}