:root {
  --font-family-modern: "Figtree";
  --font-family-traditional: "PT Serif";

  --font-size-smallnote: 0.68em;
  --font-weight-smallnote: 700;
  --line-height-smallnote: 1.2;
  --letter-spacing-smallnote: 0.08em;

  --font-size-note: 0.78em;
  --font-weight-note: 700;
  --line-height-note: 1.35;
  --letter-spacing-note: 0.08em;

  --font-size-detail: 0.92em;
  --font-weight-detail: 400;
  --line-height-detail: 1.56;
  --letter-spacing-detail: 0;

  --font-size-body: 0.98em;
  --font-weight-body: 400;
  --line-height-body: 1.58;
  --letter-spacing-body: 0;

  --font-size-bodylarge: 1.02em;
  --font-weight-bodylarge: 600;
  --line-height-bodylarge: 1.45;
  --letter-spacing-bodylarge: 0;

  --font-size-reading: 1.18em;
  --font-weight-reading: 400;
  --line-height-reading: 1.48;
  --letter-spacing-reading: 0;

  --font-size-subtitle: clamp(1.05em, 3.2vw, 2em);
  --font-weight-subtitle: 600;
  --line-height-subtitle: 1.24;
  --letter-spacing-subtitle: -0.02em;

  --font-size-emphasis: clamp(1.1em, 3.4vw, 2.02em);
  --font-weight-emphasis: 500;
  --line-height-emphasis: 1.28;
  --letter-spacing-emphasis: -0.02em;

  --font-size-feature: clamp(1.28em, 2.8vw, 1.95em);
  --font-weight-feature: 500;
  --line-height-feature: 1.3;
  --letter-spacing-feature: -0.02em;

  --font-size-summary: 1.02em;
  --font-weight-summary: 600;
  --line-height-summary: 1.45;
  --letter-spacing-summary: 0;

  --font-size-closing: clamp(1.05em, 3.2vw, 1.8em);
  --font-weight-closing: 600;
  --line-height-closing: 1.3;
  --letter-spacing-closing: -0.02em;

  --font-size-title: clamp(2.4em, 9vw, 7.4em);
  --font-weight-title: 400;
  --line-height-title: 0.92;
  --letter-spacing-title: -0.02em;

  --font-size-titlemodern: clamp(3.8em, 9vw, 7.1em);
  --font-weight-titlemodern: 500;
  --line-height-titlemodern: 0.88;
  --letter-spacing-titlemodern: -0.06em;

  --font-size-extremetitle: clamp(2.6em, 10vw, 8.2em);
  --font-weight-extremetitle: 800;
  --line-height-extremetitle: 0.86;
  --letter-spacing-extremetitle: -0.07em;

  --width-subtitle: 18em;
  --width-reading: 24em;
  --width-feature: 24em;
  --width-closing: 24em;
  --width-text: 34em;
  --width-wide: 44em;
  --width-subjecttitle: 5.2em;
  --width-propositiontitle: 6.4em;

  --padding-micro: 0.08em;
  --padding-small: 0.18em;
  --padding-medium: 0.5em;
  --padding-large: 0.78em;
  --padding-xl: 1em;
  --padding-xxl: 1.15em;

  --gap-soft: 0.38em;
  --gap-small: 0.55em;
  --gap-detail: 0.7em;
  --gap-medium: 0.8em;
  --gap-large: 1em;
  --gap-xl: 1.35em;

  --padding-focuspoint-base: clamp(1.2em, 6vw, 10em);
  --padding-focuspoint-min: 1.4em;
  --padding-focuspoint-max: 8em;

  --padding-block-page-large: 3.8em;

  --size-line-thin: 1px;
  --size-line-bold: 2px;

  --radius-soft: 0.7em;
  --radius-round: 999px;

  --line-height-link: 1.4;
}

/* Technische basis: vaste wrapper voor een focusbaar inhoudsdeel binnen een slide. */
.focuspoint {
  display: flow-root;
  min-width: 0;
  padding: 0 var(--padding-focuspoint-base);
  --focus-progress: 0;
  --focus-size-adjust: 0em;
}

.focuspoint.focus_add,
.focuspoint.focus {
  font-size: calc(1em + (1em + var(--focus-size-adjust)) * var(--focus-progress));
}

.focuspoint.focus_remove {
  font-size: calc(1em + (1em + var(--focus-size-adjust)) * (1 - var(--focus-progress)));
}

/* Technische basis: vaste verticale slide-ruimte voor de inhoudsblokken binnen één slide. */
.slide-section {
  display: flow-root;
  padding-top: var(--padding-block-page-large);
  padding-bottom: var(--padding-block-page-large);
}

/* Component: openingsblok dat een onderwerp meteen neerzet. */
.com_subjectintro {
  display: grid;
  gap: var(--gap-xl);
  min-width: 0;
}

.com_subjectintro-mark {
  display: inline-block;
  justify-self: start;
  padding: calc(var(--padding-medium) - 0.04em) var(--padding-large) var(--padding-medium);
  border-radius: var(--radius-round);
  font-family: var(--font-family-modern);
  font-size: var(--font-size-smallnote);
  font-weight: var(--font-weight-smallnote);
  line-height: var(--line-height-smallnote);
  letter-spacing: var(--letter-spacing-smallnote);
  text-transform: uppercase;
}

.com_subjectintro-title {
  display: inline;
  max-width: var(--width-subjecttitle);
  font-family: var(--font-family-traditional);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-title);
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-title);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.com_subjectintro-subtitle {
  max-width: var(--width-subtitle);
  font-family: var(--font-family-modern);
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
  overflow-wrap: anywhere;
}

/* Component: blok dat één kernzin nadrukkelijk laat landen. */
.com_keymessage {
  max-width: var(--width-text);
}

.com_keymessage-text {
  display: inline;
  font-family: var(--font-family-modern);
  font-size: var(--font-size-feature);
  font-weight: var(--font-weight-feature);
  line-height: var(--line-height-feature);
  letter-spacing: var(--letter-spacing-feature);
  overflow-wrap: anywhere;
}

/* Component: blok dat een gedachte afrondt. */
.com_closingthought {
  display: grid;
  gap: var(--gap-large);
  max-width: var(--width-reading);
}

.com_closingthought-line {
  width: 3.4em;
  height: var(--size-line-bold);
}

.com_closingthought-text {
  font-family: var(--font-family-traditional);
  font-size: var(--font-size-reading);
  font-weight: var(--font-weight-reading);
  line-height: var(--line-height-reading);
  letter-spacing: var(--letter-spacing-reading);
}

/* Component: blok dat meerdere punten overzichtelijk presenteert. */
.com_pointlist {
  display: grid;
  gap: var(--gap-xl);
  max-width: var(--width-wide);
}

.com_pointlist-item {
  display: grid;
  gap: var(--gap-detail);
  min-width: 0;
}

.com_pointlist-label {
  font-family: var(--font-family-modern);
  font-size: var(--font-size-note);
  font-weight: var(--font-weight-note);
  line-height: var(--line-height-note);
  letter-spacing: var(--letter-spacing-note);
  text-transform: uppercase;
}

.com_pointlist-text {
  font-family: var(--font-family-modern);
  font-size: var(--font-size-detail);
  font-weight: var(--font-weight-detail);
  line-height: var(--line-height-detail);
  letter-spacing: var(--letter-spacing-detail);
}

/* Component: blok dat een verschuiving of vervolgstap markeert. */
.com_nextstep {
  display: grid;
  gap: var(--gap-medium);
  min-width: 0;
}

.com_nextstep-label {
  font-family: var(--font-family-modern);
  font-size: var(--font-size-note);
  font-weight: var(--font-weight-note);
  line-height: var(--line-height-note);
  letter-spacing: var(--letter-spacing-note);
  text-transform: uppercase;
}

.com_nextstep-text {
  max-width: var(--width-feature);
  font-family: var(--font-family-modern);
  font-size: var(--font-size-feature);
  font-weight: var(--font-weight-feature);
  line-height: var(--line-height-feature);
  letter-spacing: var(--letter-spacing-feature);
  overflow-wrap: anywhere;
}

.com_nextstep-body {
  max-width: var(--width-text);
  font-family: var(--font-family-modern);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
}

.com_nextstep-closing {
  font-family: var(--font-family-modern);
  font-size: var(--font-size-summary);
  font-weight: var(--font-weight-summary);
  line-height: var(--line-height-summary);
  letter-spacing: var(--letter-spacing-summary);
}

/* Component: blok dat één belangrijk punt extra nadruk geeft. */
.com_keypoint {
  display: grid;
  gap: var(--gap-small);
  min-width: 0;
  padding: calc(var(--padding-xl) + 0.05em) var(--padding-xxl) var(--padding-xxl);
  border-radius: var(--radius-soft);
}

.com_keypoint-label {
  font-family: var(--font-family-modern);
  font-size: var(--font-size-note);
  font-weight: var(--font-weight-note);
  line-height: var(--line-height-note);
  letter-spacing: var(--letter-spacing-note);
  text-transform: uppercase;
}

.com_keypoint-text {
  font-family: var(--font-family-modern);
  font-size: var(--font-size-summary);
  font-weight: var(--font-weight-summary);
  line-height: var(--line-height-summary);
  letter-spacing: var(--letter-spacing-summary);
}

/* Component: blok dat een prikkelende vraag of spanning neerzet. */
.com_corequestion {
  display: grid;
  gap: var(--gap-detail);
  min-width: 0;
}

.com_corequestion-label {
  font-family: var(--font-family-modern);
  font-size: var(--font-size-note);
  font-weight: var(--font-weight-note);
  line-height: var(--line-height-note);
  letter-spacing: var(--letter-spacing-note);
  text-transform: uppercase;
}

.com_corequestion-text {
  max-width: var(--width-feature);
  font-family: var(--font-family-modern);
  font-size: var(--font-size-feature);
  font-weight: var(--font-weight-feature);
  line-height: var(--line-height-feature);
  letter-spacing: var(--letter-spacing-feature);
  overflow-wrap: anywhere;
}

/* Component: openingsblok met meer campagne- of propositiegevoel. */
.com_propositionintro {
  display: grid;
  gap: var(--gap-xl);
  min-width: 0;
}

.com_propositionintro-mark {
  display: inline-block;
  justify-self: start;
  padding: calc(var(--padding-medium) - 0.04em) var(--padding-large) var(--padding-medium);
  border-radius: var(--radius-round);
  font-family: var(--font-family-modern);
  font-size: var(--font-size-smallnote);
  font-weight: var(--font-weight-smallnote);
  line-height: var(--line-height-smallnote);
  letter-spacing: var(--letter-spacing-smallnote);
  text-transform: uppercase;
}

.com_propositionintro-title {
  display: inline;
  max-width: var(--width-propositiontitle);
  font-family: var(--font-family-modern);
  font-size: var(--font-size-extremetitle);
  font-weight: var(--font-weight-extremetitle);
  line-height: var(--line-height-extremetitle);
  letter-spacing: var(--letter-spacing-extremetitle);
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.com_propositionintro-subtitle {
  max-width: var(--width-subtitle);
  font-family: var(--font-family-modern);
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
  overflow-wrap: anywhere;
}

/* Component: blok dat een duidelijk standpunt of perspectief uitspreekt. */
.com_viewpoint {
  display: grid;
  gap: var(--gap-detail);
  min-width: 0;
}

.com_viewpoint-label {
  font-family: var(--font-family-modern);
  font-size: var(--font-size-note);
  font-weight: var(--font-weight-note);
  line-height: var(--line-height-note);
  letter-spacing: var(--letter-spacing-note);
  text-transform: uppercase;
}

.com_viewpoint-text {
  max-width: var(--width-text);
  font-family: var(--font-family-modern);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
}

.com_viewpoint-closing {
  max-width: var(--width-closing);
  font-family: var(--font-family-modern);
  font-size: var(--font-size-closing);
  font-weight: var(--font-weight-closing);
  line-height: var(--line-height-closing);
  letter-spacing: var(--letter-spacing-closing);
  overflow-wrap: anywhere;
}

/* Component: blok dat aanbod of richtingen overzichtelijk toont. */
.com_offeroverview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-large);
  min-width: 0;
}

/* Component: blok dat één aanbodsonderdeel laat zien. */
.com_offerdetail {
  display: grid;
  gap: var(--gap-small);
  min-width: 0;
  align-content: start;
  padding: calc(var(--padding-xl) + 0.05em) var(--padding-xxl) var(--padding-xxl);
  border-radius: var(--radius-soft);
}

.com_offerdetail-label {
  font-family: var(--font-family-modern);
  font-size: var(--font-size-note);
  font-weight: var(--font-weight-note);
  line-height: var(--line-height-note);
  letter-spacing: var(--letter-spacing-note);
  text-transform: uppercase;
}

.com_offerdetail-value {
  font-family: var(--font-family-modern);
  font-size: var(--font-size-bodylarge);
  font-weight: var(--font-weight-bodylarge);
  line-height: var(--line-height-bodylarge);
  letter-spacing: var(--letter-spacing-bodylarge);
}

.com_offerdetail-note {
  font-family: var(--font-family-modern);
  font-size: var(--font-size-note);
  font-weight: var(--font-weight-body);
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-body);
}

/* Component: blok dat doorverwijst naar andere relevante onderwerpen. */
.com_relatedlinks {
  display: grid;
  gap: var(--gap-small);
  min-width: 0;
  padding: calc(var(--padding-xl) + 0.05em) var(--padding-xxl) var(--padding-xxl);
  border-radius: var(--radius-soft);
}

.com_relatedlinks-label {
  font-family: var(--font-family-modern);
  font-size: var(--font-size-note);
  font-weight: var(--font-weight-note);
  line-height: var(--line-height-note);
  letter-spacing: var(--letter-spacing-note);
  text-transform: uppercase;
}

.com_relatedlinks-link {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-family-modern);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bodylarge);
  line-height: var(--line-height-link);
  overflow-wrap: anywhere;
}

.com_relatedlinks-link::before {
  content: "→ ";
}

/* Addon: gebruikt de moderne typografische stijl. */
.add_modern {
  font-family: var(--font-family-modern);
}

/* Addon: gebruikt de traditionele typografische stijl. */
.add_traditional {
  font-family: var(--font-family-traditional);
}

/* Addon: voegt links van een inhoudsdeel een verticale lijn toe. */
.add_lineaccent {
  padding-left: var(--padding-xl);
  border-left-width: var(--size-line-bold);
  border-left-style: solid;
}

/* Addon: voegt boven een inhoudsdeel een horizontale lijn toe. */
.add_topline {
  padding-top: calc(var(--padding-xl) + 0.2em);
  border-top-width: var(--size-line-thin);
  border-top-style: solid;
}

/* Addon: geeft een inhoudsdeel een visuele highlight-achtergrond. */
.add_highlight {
  padding: calc(var(--padding-micro) - 0.06em) calc(var(--padding-small) - 0.04em) var(--padding-micro);
  background: rgba(255, 255, 255, 0.62);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Addon: laat een inhoudsdeel over de volledige beschikbare breedte lopen. */
.add_fullwidth {
  grid-column: 1 / -1;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

@media (max-width: 900px) {
  .com_subjectintro-subtitle,
  .com_keymessage,
  .com_closingthought,
  .com_pointlist,
  .com_nextstep-body,
  .com_nextstep-text,
  .com_propositionintro-subtitle,
  .com_viewpoint-text,
  .com_viewpoint-closing,
  .com_corequestion-text {
    max-width: 100%;
  }

  .com_offeroverview {
    grid-template-columns: 1fr;
  }

  .add_fullwidth {
    grid-column: auto;
  }
}