html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
@layer properties {
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-pan-x: initial; --tw-pan-y: initial; --tw-pinch-zoom: initial; --tw-scroll-snap-strictness: proximity; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-divide-x-reverse: 0; --tw-border-style: solid; --tw-divide-y-reverse: 0; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-ease: initial; --tw-content: ""; }
}
}
@layer theme {
:root, :host { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-emerald-400: oklch(76.5% .177 163.223); --color-black: #000; --color-white: #fff; --spacing: .25rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --blur-sm: 8px; --blur-md: 12px; --blur-3xl: 64px; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --color-alp-lucht: #dbe7f3; --color-alp-lucht-diep: #c5d8ec; --font-alp-schrift: "Dancing Script", "Brush Script MT", cursive; --color-ink: #0b0b0f; --color-paper: #f6f5f1; --color-accent: #ff4d1c; --color-muted: #8a8a94; --font-display: "Inter", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --radius-card: 1.25rem; --color-void: #0f0e0e; --color-mist: #d3dad9; --font-grotesk: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif; --font-metric: "Space Mono", ui-monospace, SFMono-Regular, monospace; --color-mw-nacht: #262626; --color-mw-paper: #efeeec; --color-mw-cream: #efeeec; --color-mw-inkt: #262626; --color-mw-stone: #7f7e7d; --color-mw-wash: #f4f4f4; --color-mw-wash-donker: #17171a; --color-mw-accent: #e54113; --color-mw-accent-soft: #f2643a; --color-mw-panel: #f2f2f2; --color-mw-zwart: #0a0a0b; --color-mw-lijn: #e6e6e6; --font-mw-sans: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mw-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace; --color-qs-ink: #1d1d1f; --color-qs-paper: #fff; --color-qs-panel: #f6f3f5; --color-qs-panel-diep: #efe9ed; --color-qs-line: #e7e2e6; --color-qs-accent: #ff2e57; --color-qs-accent-diep: #e01e44; --color-qs-grijs: #6b6670; --font-qs-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif; --font-qs-body: "Inter", ui-sans-serif, system-ui, sans-serif; --color-al-nacht: #050a11; --color-al-diep: #0a1523; --color-al-blauw: #0a4682; --color-al-licht: #2f86e0; --color-al-alarm: #ff3b30; --color-al-paper: #f2f5f9; --color-al-mist: #7e93ad; --color-al-lijn: #18293d; --font-al-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif; --font-al-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-al-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace; --color-fm-black: #07080a; --color-fm-coal: #0d0f12; --color-fm-graphite: #14171b; --color-fm-paper: #f4f2ec; --color-fm-paper-deep: #e9e6dd; --color-fm-ink: #121418; --color-fm-smoke: #9aa1a8; --color-fm-stone: #868d94; --color-fm-yellow: #ffd400; --font-fm-display: "Graystroke", "Archivo", Impact, sans-serif; --font-fm-display-gewicht: 400; --font-fm-sans: "eurostile-extended", "Archivo", ui-sans-serif, system-ui, sans-serif; --color-kn-nacht: #181826; --color-kn-nacht-diep: #101019; --color-kn-blauw: #3666ff; --color-kn-blauw-diep: #2450e0; --color-kn-blauw-licht: #7d9bff; --color-kn-mist: #f4f5f7; --color-kn-lucht: #e8edff; --color-kn-inkt: #181826; --color-kn-inkt-zacht: #6b6f76; --color-kn-lijn: #e2e4e8; --font-kn: "Saira", ui-sans-serif, system-ui, sans-serif; --radius-kn: 24px; --ease-kn: cubic-bezier(.25, 1, .5, 1); }
}
@layer base {
*, ::after, ::before, ::backdrop { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }
::file-selector-button { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }
html, :host { text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings,normal); font-variation-settings: var(--default-font-variation-settings,normal); -webkit-tap-highlight-color: transparent; }
hr { height: 0px; color: inherit; border-top-width: 1px; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
ol, ul, menu { list-style: none; }
img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; }
img, video { max-width: 100%; height: auto; }
button, input, select, optgroup, textarea { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }
::file-selector-button { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }
::file-selector-button { margin-inline-end: 4px; }
::placeholder { opacity: 1; }
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
::placeholder { color: currentcolor; }
@supports (color:color-mix(in lab, red, red)) {
::placeholder { color: color-mix(currentcolor, transparent); }
}
}
textarea { resize: vertical; }
button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; }
::file-selector-button { appearance: button; }
html { scroll-behavior: auto; }
body { background-color: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
[data-knook] h1, [data-knook] h2 { letter-spacing: normal; font-weight: 500; line-height: 1.1; }
[data-knook] h3, [data-knook] h4 { letter-spacing: normal; font-weight: 600; line-height: 1.1; }
[data-knook] p { line-height: 1.6; }
}
@layer components {
[data-av] { --av-n1: #f7f6f5; --av-n2: #edebe7; --av-n3: #aea38f; --av-n4: #8b7965; --av-n4t: #746353; --av-n5: #443931; --av-n6: #1d1611; --av-lijn: #8b796533; --av-lijn-2: #8b796566; --av-status: #c72a07; --av-status-dot: #ff5207; --av-fout: #c51010; --av-goed: #0b5c3e; --av-ease: cubic-bezier(0, 0, .2, 1); --av-ease-io: cubic-bezier(.4, 0, .2, 1); --av-kop-h: 56px; color: rgb(0, 0, 0); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; background: rgb(255, 255, 255); min-height: 100vh; font-family: Inter, Arial, sans-serif; font-size: 1rem; line-height: 1.25rem; }
@media (width >= 768px) {
[data-av] { --av-kop-h: 72px; }
}
:where([data-av]) *, :where([data-av]) ::before, :where([data-av]) ::after { box-sizing: border-box; }
:where([data-av]) img { max-width: 100%; display: block; }
:where([data-av]) button { font: inherit; color: inherit; cursor: pointer; background: 0px 0px; border: 0px; padding: 0px; }
:where([data-av]) a { color: inherit; text-decoration: none; }
:where([data-av]) h1, :where([data-av]) h2, :where([data-av]) h3, :where([data-av]) h4, :where([data-av]) p, :where([data-av]) figure, :where([data-av]) blockquote, :where([data-av]) ul, :where([data-av]) ol, :where([data-av]) dl, :where([data-av]) dd { margin: 0px; }
:where([data-av]) ul, :where([data-av]) ol { padding: 0px; list-style: none; }
:where([data-av]) :focus-visible { outline: 2px solid var(--av-n6); outline-offset: 2px; border-radius: 4px; }
.av-wrap { width: 100%; margin-inline: auto; padding-inline: 20px; position: relative; }
@media (width >= 640px) {
.av-wrap { max-width: 40rem; }
}
@media (width >= 768px) {
.av-wrap { max-width: 48rem; }
}
@media (width >= 1024px) {
.av-wrap { max-width: 64rem; }
}
@media (width >= 1280px) {
.av-wrap { max-width: 80rem; }
}
@media (width >= 1536px) {
.av-wrap { max-width: 1536px; }
}
.av-raster { grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 1rem; display: grid; }
@media (width >= 768px) {
.av-raster { gap: 1.25rem; }
}
.av-xs { font-size: 0.75rem; line-height: 1rem; }
.av-sm { font-size: 1rem; line-height: 1.25rem; }
.av-sm-m { font-size: 0.875rem; line-height: 1.25rem; }
.av-md { font-size: 1.25rem; line-height: 1.5rem; }
.av-lg { font-size: 1.875rem; line-height: 2.25rem; }
.av-xl { letter-spacing: -0.025em; font-size: 2.5rem; line-height: 3rem; }
.av-kop { font-size: 1.25rem; line-height: 1.5rem; }
.av-kop-sm { font-size: 1rem; line-height: 1.25rem; }
@media (width >= 768px) {
.av-kop, .av-kop-sm { font-size: 1.875rem; line-height: 2.25rem; }
}
.av-vet { font-weight: 700; }
.av-cursief { font-style: italic; }
.av-balans { text-wrap: balance; }
.av-c4, .av-c4-groot { color: var(--av-n4t); }
@media (width >= 768px) {
.av-c4-groot { color: var(--av-n4); }
}
.av-c6 { color: var(--av-n6); }
.av-status-tekst { color: var(--av-status); }
.av-cijfers { font-variant-numeric: tabular-nums; }
.av-regels-3 { -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; }
.av-sr { clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; width: 1px; height: 1px; margin: -1px; padding: 0px; overflow: hidden; position: absolute !important; }
.av-link { cursor: pointer; transition: color .3s var(--av-ease); }
.av-link:hover, .av-link[aria-current="page"] { color: var(--av-n4t); }
.av-hyperlink { text-underline-offset: 0.25em; transition: color .3s var(--av-ease), text-decoration-color .3s var(--av-ease); text-decoration: underline; }
.av-hyperlink:hover { color: var(--av-n4t); text-decoration-color: rgba(0, 0, 0, 0); }
.av-knop { --k-bg: var(--av-n6); --k-rand: var(--av-n6); --k-tekst: #fff; border: 1px solid var(--k-rand); background: var(--k-bg); color: var(--k-tekst); font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; transition: opacity .3s var(--av-ease), transform .1s var(--av-ease), background-color .3s var(--av-ease); border-radius: 4px; justify-content: center; align-items: center; gap: 0.25rem; padding: 0.75rem; display: inline-flex; position: relative; }
.av-knop > span { padding-inline: 0.25rem; }
.av-knop--groot { padding: 1rem; }
.av-knop--breed { width: 100%; }
.av-knop--secundair { --k-bg: var(--av-n2); --k-rand: var(--av-n2); --k-tekst: var(--av-n6); }
.av-knop--tertiair { --k-bg: #fff; --k-rand: var(--av-lijn); --k-tekst: var(--av-n6); }
.av-knop--transparant { --k-bg: transparent; --k-rand: transparent; --k-tekst: var(--av-n6); }
.av-knop--klein { padding: 0.5rem; }
.av-knop:not(:disabled):hover { opacity: 0.9; }
.av-knop--tertiair:not(:disabled):hover { opacity: 1; border-color: var(--av-lijn-2); }
.av-knop:not(:disabled):active { transform: scale(0.95); }
.av-knop:disabled, .av-knop[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; }
.av-knop[aria-busy="true"] { cursor: progress; }
.av-icoonknop { width: 38px; height: 38px; color: var(--av-n6); transition: border-color .3s var(--av-ease), background-color .3s var(--av-ease), transform .1s var(--av-ease); border: 1px solid rgba(0, 0, 0, 0); border-radius: 9999px; flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; position: relative; }
.av-icoonknop::after { content: ""; position: absolute; inset: -3px; }
.av-icoonknop:hover { background: var(--av-n1); }
.av-icoonknop:active { transform: scale(0.95); }
.av-icoonknop--rand { border-color: var(--av-lijn); background: rgb(255, 255, 255); }
.av-icoonknop--rand:hover { border-color: var(--av-lijn-2); background: rgb(255, 255, 255); }
.av-icoonknop:disabled { opacity: 0.4; cursor: not-allowed; }
.av-icoonknop[aria-pressed="true"] { color: var(--av-n6); }
.av-teller { background: var(--av-n6); color: rgb(255, 255, 255); text-align: center; font-variant-numeric: tabular-nums; border-radius: 9999px; min-width: 16px; height: 16px; padding-inline: 4px; font-size: 10px; line-height: 16px; position: absolute; top: 2px; right: 0px; }
.av-icoon { flex-shrink: 0; width: 20px; height: 20px; display: block; }
.av-icoon--16 { width: 16px; height: 16px; }
.av-pil { border: 1px solid var(--av-lijn); color: var(--av-n6); white-space: nowrap; background: rgb(255, 255, 255); border-radius: 9999px; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; display: inline-flex; }
@media (width >= 768px) {
.av-pil { padding: 0.5rem 0.75rem; }
}
.av-pil--knop { transition: border-color .3s var(--av-ease); }
.av-pil--knop:hover { border-color: var(--av-lijn-2); }
.av-stip { background: var(--av-status-dot); border-radius: 9999px; flex-shrink: 0; width: 8px; height: 8px; }
.av-stip--rustig { background: var(--av-n3); }
.av-chip { background: var(--av-n1); color: var(--av-n6); border-radius: 4px; align-items: center; gap: 0.125rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; line-height: 1rem; display: inline-flex; }
.av-concept { border: 1px dashed var(--av-n3); color: var(--av-n5); background: repeating-linear-gradient(-45deg, #fff, #fff 6px, var(--av-n1) 6px, var(--av-n1) 12px); border-radius: 4px; padding: 0.5rem 0.75rem; font-size: 0.75rem; line-height: 1rem; display: block; }
.av-concept b { font-weight: 700; }
.av-lijn { background: var(--av-lijn); border: 0px; width: 100%; height: 1px; }
.av-streep { background-image: linear-gradient(to right, var(--av-lijn-2) 50%, transparent 50%); background-repeat: repeat-x; background-size: 8px 1px; border: 0px; width: 100%; height: 1px; }
.av-verdeeld > * + * { border-top: 1px solid var(--av-lijn); }
.av-veldgroep { flex-direction: column; row-gap: 0.5rem; width: 100%; display: flex; }
.av-label { color: var(--av-n6); font-size: 0.75rem; line-height: 1rem; }
.av-label .av-optioneel { color: var(--av-n4t); }
.av-veld { border: 1px solid var(--av-lijn); width: 100%; color: var(--av-n6); transition: border-color .3s var(--av-ease); background: rgb(255, 255, 255); border-radius: 4px; align-items: center; gap: 0.5rem; padding-inline: 0.75rem; display: flex; }
.av-veld:hover { border-color: var(--av-lijn-2); }
.av-veld:focus-within { border-color: var(--av-n6); }
.av-veld input, .av-veld select, .av-veld textarea { font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-variant-position: inherit; font-variant-emoji: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; width: 100%; min-width: 0px; color: inherit; font-variant-numeric: tabular-nums; appearance: none; background: 0px 0px; border: 0px; outline: none; flex: 1 1 0%; padding-block: 0.75rem; }
.av-veld textarea { resize: vertical; min-height: 7.5rem; }
.av-veld ::placeholder { color: var(--av-n4t); opacity: 1; }
.av-veld[data-fout="true"] { border-color: var(--av-fout); }
.av-veld:has(:focus-visible) { outline: 2px solid var(--av-n6); outline-offset: 2px; }
.av-veld input:focus-visible, .av-veld select:focus-visible, .av-veld textarea:focus-visible { outline: none; }
.av-foutmelding { color: var(--av-fout); font-size: 0.75rem; line-height: 1rem; }
.av-notitie { color: var(--av-n4t); font-size: 0.75rem; line-height: 1rem; }
.av-inlineselect { border-radius: 4px; align-items: center; padding-left: 0.25rem; padding-right: 1.5rem; display: inline-flex; position: relative; }
.av-inlineselect select { appearance: none; font: inherit; color: var(--av-n6); text-align: right; cursor: pointer; background: 0px 0px; border: 0px; }
.av-inlineselect select:focus-visible { outline: none; }
.av-inlineselect:focus-within { outline: 2px solid var(--av-n6); outline-offset: 2px; }
.av-inlineselect .av-icoon { pointer-events: none; position: absolute; top: 50%; right: 0px; transform: translateY(-50%); }
.av-vink { cursor: pointer; align-items: flex-start; gap: 0.75rem; padding-block: 2px; display: flex; }
.av-vink input { opacity: 0; cursor: pointer; width: 20px; height: 20px; margin: 0px; position: absolute; }
.av-vink-vak { border: 1px solid var(--av-lijn-2); color: rgb(255, 255, 255); width: 20px; height: 20px; transition: background-color .3s var(--av-ease), border-color .3s var(--av-ease); background: rgb(255, 255, 255); border-radius: 4px; flex-shrink: 0; place-items: center; display: grid; position: relative; }
.av-vink-vak svg { opacity: 0; transition: transform .2s var(--av-ease), opacity .2s var(--av-ease); transform: scale(0); }
.av-vink input:checked + .av-vink-vak { background: var(--av-n6); border-color: var(--av-n6); }
.av-vink input:checked + .av-vink-vak svg { opacity: 1; transform: scale(1); }
.av-vink input:focus-visible + .av-vink-vak { outline: 2px solid var(--av-n6); outline-offset: 2px; }
.av-vink:hover .av-vink-vak { border-color: var(--av-n4); }
.av-keuze { border: 1px solid var(--av-lijn); cursor: pointer; transition: border-color .3s var(--av-ease); border-radius: 4px; align-items: center; gap: 0.75rem; padding: 0.75rem; display: flex; }
.av-keuze:hover { border-color: var(--av-lijn-2); }
.av-keuze:has(input:checked) { border-color: var(--av-n6); }
.av-keuze:has(input:focus-visible) { outline: 2px solid var(--av-n6); outline-offset: 2px; }
.av-keuze input { accent-color: var(--av-n6); width: 18px; height: 18px; margin: 0px; }
.av-header { z-index: 90; border-bottom: 1px solid var(--av-lijn); background: rgb(255, 255, 255); position: fixed; inset: 0px 0px auto; }
.av-header-balk { height: var(--av-kop-h); justify-content: center; align-items: center; display: flex; position: relative; }
.av-woordmerk { height: var(--av-kop-h); letter-spacing: 0.2em; text-transform: uppercase; text-align: center; white-space: nowrap; color: rgb(0, 0, 0); flex-direction: column; justify-content: center; align-items: center; font-size: 0.8125rem; line-height: 1.15; display: flex; }
.av-woordmerk > span { padding-left: 0.2em; display: block; }
@media (width >= 768px) {
.av-woordmerk { font-size: 0.9375rem; }
}
@media (width >= 1280px) {
.av-woordmerk { font-size: 1rem; }
}
.av-header-links { align-items: center; gap: 1rem; display: flex; position: absolute; left: 0px; }
.av-header-rechts { align-items: center; gap: 0.125rem; display: flex; position: absolute; right: 0px; }
.av-hoofdmenu { gap: 1rem; display: none; }
@media (width >= 1280px) {
.av-hoofdmenu { display: flex; }
}
.av-rechtsmenu { gap: 1rem; margin-right: 0.75rem; display: none; }
@media (width >= 1280px) {
.av-rechtsmenu { display: flex; }
}
.av-alleen-mobiel { display: inline-flex; }
@media (width >= 1280px) {
.av-alleen-mobiel { display: none; }
}
.av-pagina { padding-top: var(--av-kop-h); }
.av-overslaan { z-index: 200; background: var(--av-n6); color: rgb(255, 255, 255); border-radius: 4px; padding: 0.75rem 1rem; position: absolute; top: -60px; left: 20px; }
.av-overslaan:focus { top: 8px; }
.av-scherm { z-index: 100; opacity: 0; transition: opacity .5s var(--av-ease-io); background: rgba(29, 22, 17, 0.4); position: fixed; inset: 0px; }
.av-scherm[data-open="true"] { opacity: 1; }
.av-menu { z-index: 110; overscroll-behavior: contain; background: rgb(255, 255, 255); position: fixed; inset: 0px; overflow-y: auto; }
.av-menu-kop { height: var(--av-kop-h); justify-content: space-between; align-items: center; display: flex; }
.av-lade { z-index: 110; width: 100%; transition: transform .5s var(--av-ease-io); background: rgb(255, 255, 255); flex-direction: column; display: flex; position: fixed; top: 0px; bottom: 0px; right: 0px; overflow: hidden; transform: translate(100%); }
@media (width >= 768px) {
.av-lade { width: 50%; }
}
.av-lade[data-open="true"] { transform: translate(0px); }
.av-lade-kop { height: var(--av-kop-h); z-index: 2; justify-content: flex-end; align-items: center; padding-inline: 20px; display: flex; position: absolute; top: 0px; left: 0px; right: 0px; }
.av-lade-inhoud { overscroll-behavior: contain; padding: var(--av-kop-h) 20px 0; flex: 1 1 0%; overflow-y: auto; }
.av-lade-sectie { width: 100%; max-width: 24rem; margin-inline: auto; padding-block: 2.25rem; }
@media (width >= 768px) {
.av-lade-sectie { padding-block: 3rem; }
}
.av-lade-voet { background: rgb(255, 255, 255); margin-top: 3rem; padding-bottom: 1.5rem; position: sticky; bottom: 0px; }
.av-zoek { z-index: 110; overscroll-behavior: contain; border-bottom: 1px solid var(--av-lijn); opacity: 0; max-height: 100vh; transition: opacity .2s var(--av-ease), transform .2s var(--av-ease); background: rgb(255, 255, 255); position: fixed; inset: 0px 0px auto; overflow-y: auto; transform: translateY(-8px); }
.av-zoek[data-open="true"] { opacity: 1; transform: none; }
.av-zoekresultaat { border-radius: 4px; align-items: center; gap: 0.75rem; padding: 0.5rem; display: flex; }
.av-zoekresultaat:hover, .av-zoekresultaat[data-actief="true"] { background: var(--av-n1); }
.av-zoekresultaat-beeld { background: var(--av-n1); border-radius: 4px; flex-shrink: 0; place-items: center; width: 48px; height: 48px; display: grid; overflow: hidden; }
.av-zoekresultaat-beeld img { object-fit: contain; max-width: 80%; max-height: 80%; }
.av-melding { z-index: 95; top: calc(var(--av-kop-h) + 12px); border: 1px solid var(--av-lijn); opacity: 0; pointer-events: none; max-width: 24rem; transition: opacity .2s var(--av-ease), transform .2s var(--av-ease); background: rgb(255, 255, 255); border-radius: 4px; margin-left: auto; padding: 1rem; position: fixed; left: 20px; right: 20px; transform: translateY(-8px); box-shadow: rgba(29, 22, 17, 0.08) 0px 8px 24px; }
.av-melding[data-open="true"] { opacity: 1; pointer-events: auto; transform: none; }
.av-beeldvak { background: var(--av-n1); border-radius: 4px; position: relative; overflow: hidden; }
.av-werkbeeld { justify-content: center; align-items: center; display: flex; position: absolute; inset: 12%; }
.av-werkbeeld img { object-fit: contain; width: auto; max-width: 100%; height: auto; max-height: 100%; transition: transform .3s var(--av-ease); box-shadow: rgba(29, 22, 17, 0.12) 0px 1px 2px, rgba(29, 22, 17, 0.06) 0px 4px 12px; }
.av-vul { object-fit: cover; width: 100%; height: 100%; transition: transform .3s var(--av-ease); position: absolute; inset: 0px; }
.av-zoom:hover .av-werkbeeld img, .av-zoom:hover .av-vul { transform: scale(1.05); }
.av-beeldkaart { background: var(--av-n6); color: rgb(255, 255, 255); isolation: isolate; border-radius: 4px; width: 100%; height: 100%; display: block; position: relative; overflow: hidden; }
.av-beeldkaart-waas { background: rgba(29, 22, 17, 0.4); position: absolute; inset: 0px; mask-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%); }
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
.av-beeldkaart-waas { backdrop-filter: blur(64px); background: rgba(29, 22, 17, 0.2); mask-image: linear-gradient(rgba(0, 0, 0, 0) 67%, rgb(0, 0, 0) 90%); }
}
.av-beeldkaart-tekst { flex-direction: column; justify-content: flex-end; height: 100%; padding: 1rem; display: flex; position: relative; }
@media (width >= 768px) {
.av-beeldkaart-tekst { padding: 1.5rem; }
}
.av-kaart { flex-direction: column; gap: 0.75rem; display: flex; position: relative; }
.av-kaart-beeld { aspect-ratio: 3 / 4; }
.av-kaart-labels { z-index: 10; pointer-events: none; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem; display: flex; position: absolute; inset: 0px 0px auto; }
.av-kaart-labels > * { pointer-events: auto; }
.av-kaart-link::after { content: ""; z-index: 5; position: absolute; inset: 0px; }
.av-kaart-link:focus-visible { outline: none; }
.av-kaart:has(.av-kaart-link:focus-visible) .av-kaart-beeld { outline: 2px solid var(--av-n6); outline-offset: 2px; }
.av-kaart-fav { z-index: 11; position: absolute; bottom: 0.5rem; right: 0.5rem; }
@media (width >= 768px) {
.av-kaart-fav { bottom: 0.75rem; right: 0.75rem; }
}
.av-kaart-fav .av-icoonknop { border-color: var(--av-lijn); background: rgba(255, 255, 255, 0.9); width: 34px; height: 34px; }
.av-tabbalk { top: var(--av-kop-h); z-index: 40; border-bottom: 1px solid var(--av-lijn); background: rgb(255, 255, 255); position: sticky; }
.av-tabs { scrollbar-width: none; align-items: center; display: flex; overflow-x: auto; }
.av-tabs::-webkit-scrollbar { display: none; }
.av-tab { white-space: nowrap; transition: color .3s var(--av-ease); border-radius: 4px; margin-block: 0.5rem; padding: 0.5rem; position: relative; }
.av-tab:hover { color: var(--av-n4t); }
.av-tab[aria-current="page"]::after, .av-tab[aria-selected="true"]::after { content: ""; background: var(--av-n6); height: 2px; position: absolute; bottom: -0.5rem; left: 0px; right: 0px; }
.av-acc-knop { text-align: left; align-items: flex-start; gap: 0.5rem; width: 100%; padding-block: 1rem; display: flex; }
.av-acc-nr { background: var(--av-n6); color: rgb(255, 255, 255); border-radius: 4px; flex-shrink: 0; justify-content: center; align-items: center; width: 24px; height: 24px; font-size: 0.75rem; line-height: 1rem; display: flex; }
.av-acc-titel { width: 100%; padding-block: 2px; font-weight: 700; }
.av-acc-pijl { padding-block: 2px; transition: transform 0.3s ease-in-out; }
.av-acc-knop[aria-expanded="true"] .av-acc-pijl { transform: rotate(90deg); }
.av-acc-paneel { transition: grid-template-rows .3s var(--av-ease); grid-template-rows: 0fr; display: grid; }
.av-acc-paneel[data-open="true"] { grid-template-rows: 1fr; }
.av-acc-paneel > div { overflow: hidden; }
.av-proza { color: rgb(43, 32, 17); width: 100%; max-width: 32rem; margin-inline: auto; }
.av-proza p + p { margin-top: 1.25em; }
.av-proza h2 { color: rgb(0, 0, 0); margin: 0px 0px 0.75rem; font-size: 1.25rem; font-weight: 700; line-height: 1.5rem; }
.av-proza a { text-underline-offset: 0.25em; text-decoration: underline; }
.av-koopkolom { top: calc(var(--av-kop-h) + 48px); position: sticky; }
.av-vak { border: 1px solid var(--av-lijn); background: rgb(255, 255, 255); border-radius: 4px; }
.av-maatknop { border: 1px solid var(--av-lijn); font-variant-numeric: tabular-nums; transition: border-color .3s var(--av-ease), background-color .3s var(--av-ease); border-radius: 4px; padding: 0.5rem 0.625rem; font-size: 0.875rem; line-height: 1.25rem; }
.av-maatknop:hover { border-color: var(--av-n4); }
.av-maatknop[aria-checked="true"] { border-color: var(--av-n6); box-shadow: inset 0 0 0 1px var(--av-n6); }
.av-maatknop:disabled { color: var(--av-n3); cursor: not-allowed; text-decoration: line-through; }
.av-koopbalk { z-index: 80; left: 0px; right: 0px; top: var(--av-kop-h); border-bottom: 1px solid var(--av-lijn); transition: transform .3s var(--av-ease); background: rgb(255, 255, 255); position: fixed; transform: translateY(-110%); }
.av-koopbalk[data-open="true"] { transform: none; }
.av-koopbalk-mini { background: var(--av-n1); border-radius: 4px; flex-shrink: 0; place-items: center; width: 40px; height: 40px; display: grid; overflow: hidden; }
.av-koopbalk-mini img { object-fit: contain; max-width: 80%; max-height: 80%; }
.av-aantal { border: 1px solid var(--av-lijn); border-radius: 4px; align-items: center; min-height: 2.75rem; padding-inline: 0.25rem; display: inline-flex; }
.av-aantal output { text-align: center; font-variant-numeric: tabular-nums; min-width: 1.25rem; }
.av-lightbox { z-index: 150; color: rgb(255, 255, 255); opacity: 0; transition: opacity .3s var(--av-ease); touch-action: none; background: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center; display: flex; position: fixed; inset: 0px; }
.av-lightbox[data-open="true"] { opacity: 1; }
.av-lightbox-teller { font-variant-numeric: tabular-nums; padding: 1rem; font-size: 0.875rem; position: absolute; top: 0px; left: 0px; }
.av-lightbox-knoppen { display: flex; position: absolute; top: 0px; right: 0px; }
.av-lightbox-knop { color: rgb(255, 255, 255); opacity: 0.85; width: 44px; height: 44px; transition: opacity .2s var(--av-ease); place-items: center; display: grid; }
.av-lightbox-knop:hover { opacity: 1; }
.av-lightbox-knop:focus-visible { outline-color: rgb(255, 255, 255); }
.av-lightbox-pijl { color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.3); place-items: center; width: 44px; height: 44px; display: grid; position: absolute; top: 50%; transform: translateY(-50%); }
.av-lightbox-pijl:focus-visible { outline-color: rgb(255, 255, 255); }
.av-lightbox-beeld { object-fit: contain; cursor: zoom-in; max-width: calc(-112px + 100vw); max-height: calc(-96px + 100vh); transition: transform .3s var(--av-ease); user-select: none; -webkit-user-drag: none; }
.av-lightbox-beeld[data-zoom="true"] { cursor: grab; transition: none; }
@media (width <= 767px) {
.av-lightbox-beeld { max-width: 100vw; }
}
.av-footer { border-top: 1px solid var(--av-lijn); margin-top: 3rem; padding-block: 3rem 2rem; }
@media (prefers-reduced-motion: reduce) {
[data-av] *, [data-av] ::before, [data-av] ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
.av-zoom:hover .av-werkbeeld img, .av-zoom:hover .av-vul { transform: none; }
}
.av-kaart:hover .av-werkbeeld img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
.av-kaart:hover .av-werkbeeld img { transform: none; }
}
[data-av] { --av-hero: 3 / 4; }
@media (width >= 768px) {
[data-av] { --av-hero: 3 / 2; }
}
@media (width >= 1024px) {
[data-av] { --av-hero: 9 / 4; }
}
.av-telling { font-size: 0.75rem; line-height: 1rem; }
@media (width >= 768px) {
.av-telling { font-size: 1rem; line-height: 1.25rem; }
}
[data-av] { --av-banner: 4 / 3; }
@media (width >= 768px) {
[data-av] { --av-banner: 8 / 3; }
}
}
@layer utilities {
.pointer-events-none { pointer-events: none; }
.absolute { position: absolute; }
.relative { position: relative; }
.\!inset-\[8\%\] { inset: 8% !important; }
.inset-0 { inset: 0px; }
.right-3 { right: calc(var(--spacing) * 3); }
.bottom-3 { bottom: calc(var(--spacing) * 3); }
.z-10 { z-index: 10; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-12 { grid-column: span 12 / span 12; }
.\!mx-0 { margin-inline: 0px !important; }
.mx-auto { margin-inline: auto; }
.my-6 { margin-block: calc(var(--spacing) * 6); }
.-mt-12 { margin-top: calc(var(--spacing) * -12); }
.-mt-px { margin-top: -1px; }
.mt-1 { margin-top: var(--spacing); }
.mt-2 { margin-top: calc(var(--spacing) * 2); }
.mt-3 { margin-top: calc(var(--spacing) * 3); }
.mt-4 { margin-top: calc(var(--spacing) * 4); }
.mt-5 { margin-top: calc(var(--spacing) * 5); }
.mt-6 { margin-top: calc(var(--spacing) * 6); }
.mt-8 { margin-top: calc(var(--spacing) * 8); }
.mt-10 { margin-top: calc(var(--spacing) * 10); }
.mt-12 { margin-top: calc(var(--spacing) * 12); }
.mt-16 { margin-top: calc(var(--spacing) * 16); }
.mb-0 { margin-bottom: 0px; }
.mb-5 { margin-bottom: calc(var(--spacing) * 5); }
.mb-6 { margin-bottom: calc(var(--spacing) * 6); }
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.h-9 { height: calc(var(--spacing) * 9); }
.h-24 { height: calc(var(--spacing) * 24); }
.h-40 { height: calc(var(--spacing) * 40); }
.h-auto { height: auto; }
.max-h-\[62\%\] { max-height: 62%; }
.min-h-\[60vh\] { min-height: 60vh; }
.min-h-full { min-height: 100%; }
.w-9 { width: calc(var(--spacing) * 9); }
.w-24 { width: calc(var(--spacing) * 24); }
.w-40 { width: calc(var(--spacing) * 40); }
.w-\[42\%\] { width: 42%; }
.w-full { width: 100%; }
.max-w-2xl { max-width: var(--container-2xl); }
.max-w-3xl { max-width: var(--container-3xl); }
.max-w-4xl { max-width: var(--container-4xl); }
.max-w-\[18rem\] { max-width: 18rem; }
.max-w-\[32rem\] { max-width: 32rem; }
.max-w-lg { max-width: var(--container-lg); }
.max-w-md { max-width: var(--container-md); }
.max-w-sm { max-width: var(--container-sm); }
.max-w-xl { max-width: var(--container-xl); }
.min-w-0 { min-width: 0px; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.list-disc { list-style-type: disc; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0px, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0px, 1fr)); }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-stretch { align-items: stretch; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--spacing); }
.gap-2 { gap: calc(var(--spacing) * 2); }
.gap-3 { gap: calc(var(--spacing) * 3); }
.gap-4 { gap: calc(var(--spacing) * 4); }
.gap-5 { gap: calc(var(--spacing) * 5); }
.gap-6 { gap: calc(var(--spacing) * 6); }
.gap-8 { gap: calc(var(--spacing) * 8); }
.gap-10 { gap: calc(var(--spacing) * 10); }
.gap-12 { gap: calc(var(--spacing) * 12); }
.gap-16 { gap: calc(var(--spacing) * 16); }
.gap-\[6\%\] { gap: 6%; }
:where(.space-y-6 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); }
.gap-x-5 { column-gap: calc(var(--spacing) * 5); }
.gap-y-3 { row-gap: calc(var(--spacing) * 3); }
.gap-y-6 { row-gap: calc(var(--spacing) * 6); }
.gap-y-8 { row-gap: calc(var(--spacing) * 8); }
.gap-y-9 { row-gap: calc(var(--spacing) * 9); }
.gap-y-10 { row-gap: calc(var(--spacing) * 10); }
.gap-y-12 { row-gap: calc(var(--spacing) * 12); }
.self-start { align-self: flex-start; }
.truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.overflow-hidden { overflow: hidden; }
.rounded-\[4px\] { border-radius: 4px; }
.border { border-style: var(--tw-border-style); border-width: 1px; }
.border-2 { border-style: var(--tw-border-style); border-width: 2px; }
.border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; }
.border-\[var\(--av-lijn\)\] { border-color: var(--av-lijn); }
.border-white { border-color: var(--color-white); }
.bg-\[var\(--av-n1\)\] { background-color: var(--av-n1); }
.bg-\[var\(--av-n2\)\] { background-color: var(--av-n2); }
.bg-white { background-color: var(--color-white); }
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.p-3 { padding: calc(var(--spacing) * 3); }
.p-4 { padding: calc(var(--spacing) * 4); }
.p-6 { padding: calc(var(--spacing) * 6); }
.px-1 { padding-inline: var(--spacing); }
.px-5 { padding-inline: calc(var(--spacing) * 5); }
.px-\[8\%\] { padding-inline: 8%; }
.py-1 { padding-block: var(--spacing); }
.py-3 { padding-block: calc(var(--spacing) * 3); }
.py-4 { padding-block: calc(var(--spacing) * 4); }
.py-6 { padding-block: calc(var(--spacing) * 6); }
.py-12 { padding-block: calc(var(--spacing) * 12); }
.py-16 { padding-block: calc(var(--spacing) * 16); }
.py-24 { padding-block: calc(var(--spacing) * 24); }
.pt-0 { padding-top: 0px; }
.pt-6 { padding-top: calc(var(--spacing) * 6); }
.pt-8 { padding-top: calc(var(--spacing) * 8); }
.pt-10 { padding-top: calc(var(--spacing) * 10); }
.pt-12 { padding-top: calc(var(--spacing) * 12); }
.pb-4 { padding-bottom: calc(var(--spacing) * 4); }
.pb-8 { padding-bottom: calc(var(--spacing) * 8); }
.pl-4 { padding-left: calc(var(--spacing) * 4); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-sm { font-size: var(--text-sm); line-height: var(--tw-leading,var(--text-sm--line-height)); }
.opacity-40 { opacity: 0.4; }
.blur-\[18px\] { --tw-blur: blur(18px); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); }
.first\:pt-0:first-child { padding-top: 0px; }
@media not all and (width >= 48rem) {
.max-md\:hidden { display: none; }
.max-md\:flex-col { flex-direction: column; }
.max-md\:px-0 { padding-inline: 0px; }
.max-md\:py-3 { padding-block: calc(var(--spacing) * 3); }
.first\:max-md\:block:first-child { display: block; }
}
@media not all and (width >= 40rem) {
.max-sm\:hidden { display: none; }
}
@media (width >= 40rem) {
.sm\:col-span-5 { grid-column: span 5 / span 5; }
.sm\:col-span-6 { grid-column: span 6 / span 6; }
.sm\:col-span-7 { grid-column: span 7 / span 7; }
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.sm\:flex-row { flex-direction: row; }
.sm\:items-center { align-items: center; }
.sm\:justify-end { justify-content: flex-end; }
}
@media (width >= 48rem) {
.md\:absolute { position: absolute; }
.md\:right-8 { right: calc(var(--spacing) * 8); }
.md\:bottom-8 { bottom: calc(var(--spacing) * 8); }
.md\:col-span-2 { grid-column: span 2 / span 2; }
.md\:col-span-3 { grid-column: span 3 / span 3; }
.md\:col-span-4 { grid-column: span 4 / span 4; }
.md\:col-span-5 { grid-column: span 5 / span 5; }
.md\:col-span-6 { grid-column: span 6 / span 6; }
.md\:col-span-7 { grid-column: span 7 / span 7; }
.md\:col-start-7 { grid-column-start: 7; }
.md\:col-start-9 { grid-column-start: 9; }
.md\:my-8 { margin-block: calc(var(--spacing) * 8); }
.md\:mt-12 { margin-top: calc(var(--spacing) * 12); }
.md\:mt-16 { margin-top: calc(var(--spacing) * 16); }
.md\:mt-24 { margin-top: calc(var(--spacing) * 24); }
.md\:mb-6 { margin-bottom: calc(var(--spacing) * 6); }
.md\:flex { display: flex; }
.md\:aspect-\[3\/2\] { aspect-ratio: 3 / 2; }
.md\:aspect-\[3\/4\] { aspect-ratio: 3 / 4; }
.md\:w-auto { width: auto; }
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.md\:items-center { align-items: center; }
.md\:items-start { align-items: flex-start; }
.md\:gap-3 { gap: calc(var(--spacing) * 3); }
.md\:gap-5 { gap: calc(var(--spacing) * 5); }
.md\:gap-12 { gap: calc(var(--spacing) * 12); }
.md\:gap-16 { gap: calc(var(--spacing) * 16); }
.md\:gap-24 { gap: calc(var(--spacing) * 24); }
.md\:gap-y-8 { row-gap: calc(var(--spacing) * 8); }
.md\:p-3 { padding: calc(var(--spacing) * 3); }
.md\:p-6 { padding: calc(var(--spacing) * 6); }
.md\:py-8 { padding-block: calc(var(--spacing) * 8); }
.md\:py-16 { padding-block: calc(var(--spacing) * 16); }
.md\:pt-6 { padding-top: calc(var(--spacing) * 6); }
.md\:pt-8 { padding-top: calc(var(--spacing) * 8); }
.md\:pt-12 { padding-top: calc(var(--spacing) * 12); }
.md\:pt-16 { padding-top: calc(var(--spacing) * 16); }
.md\:pb-4 { padding-bottom: calc(var(--spacing) * 4); }
}
@media (width >= 64rem) {
.lg\:col-span-3 { grid-column: span 3 / span 3; }
.lg\:aspect-auto { aspect-ratio: auto; }
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.lg\:flex-col { flex-direction: column; }
}
@media (width >= 80rem) {
.xl\:flex-row { flex-direction: row; }
}
@media (width >= 48rem) {
.md\:\[\&\>\*\+\*\]\:border-t-0 > * + * { border-top-style: var(--tw-border-style); border-top-width: 0px; }
}
}
@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-rotate-x { syntax: "*"; inherits: false; }
@property --tw-rotate-y { syntax: "*"; inherits: false; }
@property --tw-rotate-z { syntax: "*"; inherits: false; }
@property --tw-skew-x { syntax: "*"; inherits: false; }
@property --tw-skew-y { syntax: "*"; inherits: false; }
@property --tw-pan-x { syntax: "*"; inherits: false; }
@property --tw-pan-y { syntax: "*"; inherits: false; }
@property --tw-pinch-zoom { syntax: "*"; inherits: false; }
@property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; }
@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-divide-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-gradient-position { syntax: "*"; inherits: false; }
@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-stops { syntax: "*"; inherits: false; }
@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }
@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
@property --tw-leading { syntax: "*"; inherits: false; }
@property --tw-font-weight { syntax: "*"; inherits: false; }
@property --tw-tracking { syntax: "*"; inherits: false; }
@property --tw-ordinal { syntax: "*"; inherits: false; }
@property --tw-slashed-zero { syntax: "*"; inherits: false; }
@property --tw-numeric-figure { syntax: "*"; inherits: false; }
@property --tw-numeric-spacing { syntax: "*"; inherits: false; }
@property --tw-numeric-fraction { syntax: "*"; inherits: false; }
@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-shadow-color { syntax: "*"; inherits: false; }
@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-ring-color { syntax: "*"; inherits: false; }
@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-ring-color { syntax: "*"; inherits: false; }
@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-ring-inset { syntax: "*"; inherits: false; }
@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-blur { syntax: "*"; inherits: false; }
@property --tw-brightness { syntax: "*"; inherits: false; }
@property --tw-contrast { syntax: "*"; inherits: false; }
@property --tw-grayscale { syntax: "*"; inherits: false; }
@property --tw-hue-rotate { syntax: "*"; inherits: false; }
@property --tw-invert { syntax: "*"; inherits: false; }
@property --tw-opacity { syntax: "*"; inherits: false; }
@property --tw-saturate { syntax: "*"; inherits: false; }
@property --tw-sepia { syntax: "*"; inherits: false; }
@property --tw-drop-shadow { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
@property --tw-backdrop-blur { syntax: "*"; inherits: false; }
@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }
@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }
@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }
@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }
@property --tw-backdrop-invert { syntax: "*"; inherits: false; }
@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }
@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }
@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }
@property --tw-duration { syntax: "*"; inherits: false; }
@property --tw-ease { syntax: "*"; inherits: false; }
@property --tw-content { syntax: "*"; inherits: false; initial-value: ""; }

/* ---- aanvulling (aanvul-css.js): utilities die op de WP-site voorkomen ---- */
@layer components { .mw-knop:hover svg, .group:hover .mw-knop svg { transform: translate(4px); } }
@layer components { .mw-underline:hover::after, .mw-underline:focus-visible::after, .group:hover .mw-underline::after { transform-origin: 0px center; transform: scaleX(1); } }
@layer components { .group:hover .mw-zoom img { transform: scale(1.04); } }
@layer components { .qs-pijl:hover::after, .group:hover .qs-pijl::after { transform-origin: 0px center; transform: scaleX(1); } }
@layer components { .fm-knop:hover svg, .group:hover .fm-knop svg { transform: translate(4px); } }
@layer components { .group:hover .fm-zoom img, .group:hover .fm-zoom .fm-vulling { transform: scale(1.045); } }
@layer components { .fm-streep:hover::after, .fm-streep:focus-visible::after, .group:hover .fm-streep::after { transform-origin: 0px center; transform: scaleX(1); } }
@layer utilities { @media (width >= 48rem) { .md\:w-\[min\(28rem\,45\%\)\] { width: min(28rem, 45%); } } }
@layer utilities { .py-8 { padding-block: calc(var(--spacing) * 8); } }
@layer utilities { .pb-16 { padding-bottom: calc(var(--spacing) * 16); } }
@layer utilities { .mb-3 { margin-bottom: calc(var(--spacing) * 3); } }
@layer utilities { :where(.space-y-9 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 9) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 9) * calc(1 - var(--tw-space-y-reverse))); } }
@layer utilities { @media (width >= 48rem) { :where(.md\:space-y-12 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse))); } } }
@layer utilities { .mb-2 { margin-bottom: calc(var(--spacing) * 2); } }
@layer utilities { .mb-2\.5 { margin-bottom: calc(var(--spacing) * 2.5); } }
@layer utilities { .grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); } }

/* ---- aanvulling (aanvul-css.js): utilities die op de WP-site voorkomen ---- */
@layer utilities { @media (width >= 64rem) { .lg\:col-span-7 { grid-column: span 7 / span 7; } } }
@layer utilities { .py-5 { padding-block: calc(var(--spacing) * 5); } }
@layer utilities { .mt-auto { margin-top: auto; } }
@layer utilities { .pt-2 { padding-top: calc(var(--spacing) * 2); } }
@layer utilities { .pt-2\.5 { padding-top: calc(var(--spacing) * 2.5); } }
@layer utilities { @media (width >= 64rem) { .lg\:col-span-4 { grid-column: span 4 / span 4; } } }
@layer utilities { @media (width >= 64rem) { .lg\:col-start-9 { grid-column-start: 9; } } }
@layer utilities { .text-right { text-align: right; } }
@layer utilities { .my-1 { margin-block: var(--spacing); } }
@layer utilities { .my-1\.5 { margin-block: calc(var(--spacing) * 1.5); } }
@layer utilities { .self-center { align-self: center; } }
@layer utilities { .selection\:bg-al-licht\/30 ::selection { background-color: rgba(47, 134, 224, 0.3); } }
@layer utilities { @supports (color:color-mix(in lab, red, red)) { .selection\:bg-al-licht\/30 ::selection { background-color: color-mix(in oklab, var(--color-al-licht) 30%, transparent); } } }
@layer utilities { .selection\:bg-al-licht\/30::selection { background-color: rgba(47, 134, 224, 0.3); } }
@layer utilities { @supports (color:color-mix(in lab, red, red)) { .selection\:bg-al-licht\/30::selection { background-color: color-mix(in oklab, var(--color-al-licht) 30%, transparent); } } }
@layer utilities { .pl-8 { padding-left: calc(var(--spacing) * 8); } }