@font-face {
font-family: 'Fraunces Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(//fabriek59.nl/wp-content/themes/fabriek59/assets/fonts/fraunces-latin-standard-normal.woff2) format('woff2-variations');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} @font-face {
font-family: 'Fraunces Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(//fabriek59.nl/wp-content/themes/fabriek59/assets/fonts/fraunces-latin-ext-standard-normal.woff2) format('woff2-variations');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
} @font-face {
font-family: 'Fraunces Variable';
font-style: italic;
font-display: swap;
font-weight: 100 900;
src: url(//fabriek59.nl/wp-content/themes/fabriek59/assets/fonts/fraunces-latin-standard-italic.woff2) format('woff2-variations');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} @font-face {
font-family: 'Inter Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(//fabriek59.nl/wp-content/themes/fabriek59/assets/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(//fabriek59.nl/wp-content/themes/fabriek59/assets/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}  @font-face {
font-family: 'Videopac';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(//fabriek59.nl/wp-content/themes/fabriek59/assets/fonts/videopac-cijfers.woff2) format('woff2');
unicode-range: U+0030-0039;
}:root { --color-black: #12100e; --color-white: #f5f2ed; --color-shadow: #1a1614; --color-deep: #0a0908; --color-cream: #e5e1da;  --color-luik: #241f1a;
--color-gray: #a3a3a3;  --color-lamp: #ffc478; --color-stap-hover: #efeae1;
--color-red: #b22222; --color-red-hover: #8b0000;  --color-error: #dc2626;
--color-success: #16a34a; --color-error-on-dark: #ff8a80;  --text-on-dark: var(--color-white);
--text-on-dark-muted: rgba(245, 242, 237, 0.75);
--text-on-dark-faint: rgba(245, 242, 237, 0.55);
--text-on-light: var(--color-black);
--text-on-light-muted: rgba(18, 16, 14, 0.75); --overlay-hero: rgba(0, 0, 0, 0.50);
--overlay-cta: rgba(0, 0, 0, 0.70); --scrim-onder: rgba(10, 9, 8, 0.55);
--overlay-header: rgba(18, 16, 14, 0.90);
--overlay-header-blur: 12px;
--border-light: rgba(255, 255, 255, 0.05); --border-dark: rgba(18, 16, 14, 0.05);  --wash-red: rgba(178, 34, 34, 0.10);
--wash-red-soft: rgba(178, 34, 34, 0.08); --font-serif: 'Fraunces Variable', Georgia, 'Times New Roman', serif;
--font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--font-stencil: 'Videopac', var(--font-serif);  --text-hero: clamp(3rem, 1rem + 6.75vw, 8rem); --text-h1: clamp(2.25rem, 1rem + 3.4375vw, 3.75rem); --text-h2-large: clamp(2.25rem, 1rem + 3.4375vw, 3.75rem); --text-h2: clamp(1.875rem, 0.8rem + 2.75vw, 3rem);  --text-h2-label: clamp(1.875rem, 1.5625rem + 0.651vw, 2.34375rem); --text-h3: clamp(1.5rem, 1.25rem + 0.5208vw, 1.875rem); --text-body-lg: 1.125rem; --text-body: 1rem; --text-body-sm: 0.875rem; --text-quote: clamp(1.25rem, 1.0417rem + 0.434vw, 1.5625rem); --text-button: 0.75rem; --text-label: 0.875rem; --text-badge: 0.625rem;  --text-mobile-menu: clamp(2rem, 1.6rem + 1.65vw, 2.25rem);   --tracking-tighter: -0.04em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-widest: 0.1em;   --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.15; --leading-normal: 1.3; --leading-relaxed: 1.5; --leading-loose: 1.7; --leading-loosest: 1.8;  --weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-black: 900;  --section-xl-max: 12rem;
--section-lg-max: 8rem;
--section-md-max: 6rem;
--section-sm-max: 5rem; --section-xl: clamp(6rem, 3rem + 11.25vw, var(--section-xl-max));
--section-lg: clamp(4rem, 2rem + 7.5vw, var(--section-lg-max));
--section-md: clamp(3rem, 1.5rem + 5.625vw, var(--section-md-max));
--section-sm: clamp(2.5rem, 1.25rem + 4.688vw, var(--section-sm-max));
--gap-xl: clamp(3rem, 1.5rem + 5.625vw, 6rem);
--gap-lg: clamp(2rem, 1.5rem + 1.875vw, 3rem);
--gap-md: clamp(1.5rem, 1rem + 1.875vw, 2.5rem);
--gap-sm: 2rem;
--gap-xs: 0.5rem;
--card-padding: 2rem; --halte-beeld-max: 50rem; --rondgang-kaart-max: 56rem;
--button-py: 1rem; --button-px: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); --container: 1280px;
--container-narrow: 48rem; --container-text: 40rem;  --container-px: clamp(1.25rem, 1rem + 1.5vw, 3rem); --storytelling-offset: clamp(0rem, -5.3rem + 21.625vw, 12rem); --bp-md: 768px;
--bp-lg: 1024px; --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-pill: 999px;  --shadow-card: 0 4px 20px rgba(18, 16, 14, 0.08);
--shadow-card-hover: 0 12px 40px rgba(18, 16, 14, 0.12);
--shadow-button: 0 4px 20px rgba(178, 34, 34, 0.25);
--shadow-button-hover: 0 8px 30px rgba(178, 34, 34, 0.35);
--shadow-frame-dark: 0 20px 60px rgba(0, 0, 0, 0.50);
--shadow-frame-light: 0 20px 60px rgba(0, 0, 0, 0.15);  --duration-base: 0.3s; --duration-chrome: 0.4s; --duration-button: 0.5s; --duration-reveal: 0.8s; --duration-image: 1s;  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --hero-overscan: 1.05; --image-zoom: 1.1; --knop-zoom: 1.08;  --pattern-weave: repeating-linear-gradient(
45deg,
transparent,
transparent 35px,
rgba(255, 255, 255, 0.1) 35px,
rgba(255, 255, 255, 0.1) 70px
);
--pattern-weave-opacity: 0.03; --texture-brick-warm: url(//fabriek59.nl/wp-content/themes/fabriek59/assets/img/textuur-baksteen-warm.webp);
--texture-brick-light: url(//fabriek59.nl/wp-content/themes/fabriek59/assets/img/textuur-baksteen-licht.webp);
--texture-steel: url(//fabriek59.nl/wp-content/themes/fabriek59/assets/img/textuur-metaal.webp); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
--gradient-dark: linear-gradient(135deg, #12100e 0%, #1a1614 100%);  --header-hoogte: 104px;
--z-base: 1;
--z-overlay: 10;
--z-header: 100;
--z-menu-toggle: 110; --z-consent: 115;
--z-menu: 120; --z-menu-sluit: 130;
--z-skiplink: 200; --touch-min: 48px; --touch-lg: 5rem; --focus-width: 3px;
--focus-offset: 3px; --zwevend-knop: 64px;
--zwevend-vrij: calc( var( --zwevend-knop ) + var( --container-px ) * 2 ); --focus-color: var(--color-red);
}  @media (min-width: 768px) and (max-height: 950px) {
:root {
--section-xl-max: 9.5rem;
--section-lg-max: 5.75rem;
--section-md-max: 5rem;
--section-sm-max: 4rem;
}
}  @media (min-width: 56.25em) {
:root {
--header-hoogte: 112px;
}
} @media (max-height: 520px) and (orientation: landscape) {
:root {
--header-hoogte: 72px;
}
}
@media (max-height: 520px) and (orientation: landscape) and (min-width: 56.25em) {
:root {
--header-hoogte: 80px;
}
} @media (max-height: 700px) and (orientation: portrait) {
:root {
--header-hoogte: 112px;
}
}*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth; scroll-padding-top: calc( var(--header-hoogte) + var(--gap-sm) );
}
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
margin: 0;
}
ul[class],
ol[class] {
padding: 0;
list-style: none;
} img,
picture,
video,
canvas,
svg,
iframe {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
background: none;
border: 0;
padding: 0;
cursor: pointer;
} body {
background-color: var(--color-black);
color: var(--text-on-dark);
font-family: var(--font-sans);
font-size: var(--text-body);
font-weight: var(--weight-regular);
line-height: var(--leading-loosest);
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; overflow-wrap: anywhere;
} ::selection {
background-color: var(--color-red);
color: #ffffff;
} .section-dark,
.section-shadow,
.section-deep,
.section-light {
background-image: var(--grain);
background-blend-mode: soft-light;
} h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tighter);
text-wrap: balance; hyphens: auto;
hyphenate-limit-chars: 12 6 4;
}
h1 {
font-size: var(--text-h1);
line-height: var(--leading-tight);
}
h2 {
font-size: var(--text-h2);
line-height: var(--leading-snug);
}
h3 {
font-size: var(--text-h3);
line-height: var(--leading-normal);
letter-spacing: var(--tracking-normal);
}
h4, h5, h6 {
font-size: var(--text-body-lg);
line-height: var(--leading-normal);
letter-spacing: var(--tracking-normal);
}
p {
text-wrap: pretty;
} th,
td {
overflow-wrap: break-word;
}
strong, b {
font-weight: var(--weight-semibold);
} em, i, cite, blockquote {
font-family: var(--font-serif);
font-style: italic;
} address {
font-style: normal;
}
a {
color: inherit;
text-decoration-color: var(--color-red);
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
transition: color var(--duration-base) var(--ease-in-out);
}
hr {
border: 0;
border-top: 1px solid var(--border-light);
margin: 0;
} .section-dark {
background-color: var(--color-black);
color: var(--text-on-dark);
}
.section-shadow {
background-color: var(--color-shadow);
color: var(--text-on-dark);
}
.section-deep {
background-color: var(--color-deep);
color: var(--text-on-dark);
}
.section-light {
background-color: var(--color-white);
color: var(--text-on-light);
} .section-dark,
.section-shadow,
.section-deep, .site-header,
.skip-link,
.menu-toggle,
.nav-mobile,
.visit-cta {
--focus-color: var(--color-white);
} .container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--container-px);
}
.container-narrow {
max-width: var(--container-narrow);
}
.container-text {
max-width: var(--container-text);
}  :focus-visible {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: var(--focus-offset);
}
.skip-link {
position: absolute;
top: -100%;
left: var(--container-px);
z-index: var(--z-skiplink);
background-color: var(--color-red);
color: #ffffff;
font-size: var(--text-button);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
text-decoration: none;
padding: 1rem 1.5rem;
transition: top var(--duration-base) var(--ease-out);
}
.skip-link:focus {
top: 1rem;
} .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.screen-reader-text:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip-path: none;
white-space: normal;
} @media (scripting: enabled) {
.reveal {
opacity: 0;
transform: translateY(30px);
transition:
opacity var(--duration-reveal) var(--ease-out),
transform var(--duration-reveal) var(--ease-out);
}
.reveal.is-revealed {
opacity: 1;
transform: none;
} .spat {
opacity: 0;
transform:
translate( var(--spat-x, 0px), var(--spat-y, 0px) )
scale(0.86);
transition:
opacity var(--duration-reveal) var(--ease-out),
transform var(--duration-reveal) var(--ease-out);
}
.spatlijst.is-revealed .spat {
opacity: 1;
transform: translate(0, 0) scale(1);
} .luik {
position: relative;
}
.luik::after {
content: '';
position: absolute;
inset: 0;
z-index: var(--z-base);
background-color: var(--luik-grond, var(--color-luik));
border-left: 2px solid var(--color-red);
transform: scaleX(1);
transform-origin: right;
transition: transform var(--duration-reveal) var(--ease-out);
pointer-events: none;
}
.luik.is-revealed::after {
transform: scaleX(0);
}
} @media print {
.reveal,
.spat {
opacity: 1 !important;
transform: none !important;
}
.luik::after {
display: none !important;
}
} @media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important; animation-delay: 0s !important;
transition-delay: 0s !important;
} .luik::after {
display: none !important;
}
.reveal,
.spat {
opacity: 1;
transform: none;
} .hero__wordmark,
.hero__tagline,
.hero__intro,
.hero__actions {
opacity: 1 !important;
transform: none !important;
}
}.section {
padding-block: var(--section-lg);
position: relative;
}
.section--xl { padding-block: var(--section-xl); }
.section--md { padding-block: var(--section-md); }
.section--sm { padding-block: var(--section-sm); } .section--flush-bottom { padding-bottom: 0; }
.section--flush-top { padding-top: 0; } .site-main > .section:first-child:not(.hero),
.site-main > .error-404 {
padding-top: calc(var(--header-hoogte) + var(--section-md));
} .site-main > .error-404 {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100svh - var(--header-hoogte));
padding-bottom: var(--section-md);
} .section-dark + .section-dark,
.section-shadow + .section-shadow,
.section-light + .section-light {
border-top: 1px solid var(--border-light);
}  .section-brick-warm,
.section-brick-light,
.section-steel {
position: relative;
isolation: isolate;
}
.section-brick-warm::before,
.section-brick-light::before,
.section-steel::before,
.section-brick-warm::after,
.section-brick-light::after,
.section-steel::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
}
.section-brick-warm::before,
.section-brick-light::before,
.section-steel::before {
z-index: -2;
background-size: cover;
background-position: center;
}
.section-brick-warm::after,
.section-brick-light::after,
.section-steel::after {
z-index: -1;
} .section-brick-warm {
background-color: #241c17;
color: var(--text-on-dark);
}
.section-brick-warm::before {
background-image: var(--texture-brick-warm);
filter: brightness(0.42) contrast(1.2) saturate(0.9);
}
.section-brick-warm::after {
background:
radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--color-lamp) 10%, transparent), transparent 60%),
linear-gradient(to bottom, color-mix(in srgb, var(--color-deep) 55%, transparent), color-mix(in srgb, var(--color-deep) 80%, transparent));
} .section-brick-light {
background-color: var(--color-cream);
color: var(--text-on-light);
}
.section-brick-light::before {
background-image: var(--texture-brick-light);
filter: contrast(0.45) brightness(1.3) saturate(0.25);
opacity: 0.5;
} .section-brick-light::after {
background: linear-gradient(to bottom, color-mix(in srgb, var(--color-cream) 80%, transparent), color-mix(in srgb, var(--color-cream) 70%, transparent));
} .section-steel {
background-color: var(--color-black);
color: var(--text-on-dark);
}
.section-steel::before {
background-image: var(--texture-steel);
filter: brightness(0.42) contrast(0.9) saturate(0.4);
opacity: 0.42;
} .section-steel::after {
background: linear-gradient(to bottom, color-mix(in srgb, var(--color-black) 72%, transparent), color-mix(in srgb, var(--color-black) 90%, transparent));
} .section-brick-warm + .section-brick-warm,
.section-steel + .section-steel {
border-top: 1px solid var(--border-light);
}
.section-brick-light + .section-brick-light {
border-top: 1px solid var(--border-dark);
}
.section-light + .section-light {
border-top-color: var(--border-dark);
} .section-head {
display: flex;
flex-direction: column;
gap: var(--gap-xs);
margin-bottom: var(--gap-lg);
} @media (min-width: 768px) {
.section-head--split {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: var(--gap-md);
}
} .storytelling-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-lg);
}
@media (min-width: 768px) {
.storytelling-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--gap-xl);
align-items: start;
}
.storytelling-grid > *:nth-child(2) {
margin-top: var(--storytelling-offset);
} .storytelling-grid--flip > *:nth-child(1) {
margin-top: var(--storytelling-offset);
}
.storytelling-grid--flip > *:nth-child(2) {
margin-top: 0;
} .storytelling-grid--gelijk > *:nth-child(2) {
margin-top: 0;
}
}  .doors {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1px;
border: 1px solid color-mix(in srgb, var(--color-white) 12%, transparent);
}
@media (min-width: 900px) {
.doors {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
} .band {
position: relative;
} .section:has(.band) {
container-type: inline-size;
}
.band::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 100cqw;
transform: translateX(-50%);
border-bottom: 1px solid var(--border-light);
pointer-events: none;
}
.section-light .band::after {
border-bottom-color: var(--border-dark);
}
.band__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 78%; gap: 1px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
padding-bottom: var(--gap-md); margin-inline: calc(var(--container-px) * -1);
padding-inline: var(--container-px); scroll-padding-inline: var(--container-px); scrollbar-width: none;
-ms-overflow-style: none; contain: paint; padding-top: 4.5rem;
margin-top: -4.5rem;
} .band__track::-webkit-scrollbar { display: none; } [data-band-nav] {
position: relative;
z-index: var(--z-base);
}
.band__track > * {
scroll-snap-align: start; box-shadow: 1px 0 0 color-mix(in srgb, var(--color-white) 12%, transparent);
}
@media (min-width: 640px) {
.band__track { grid-auto-columns: 46%; }
}
@media (min-width: 1024px) {
.band__track { grid-auto-columns: 30%; }
} .band--grid .band__track {
grid-auto-flow: row;
grid-auto-columns: auto;
grid-template-columns: minmax(0, 1fr);
overflow-x: visible;
margin-inline: 0;
padding-inline: 0;
gap: var(--gap-lg);
}
@media (min-width: 640px) {
.band--grid .band__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.band--grid .band__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
} .info-row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.info-row > * {
padding-block: var(--gap-md);
border-top: 1px solid var(--border-light);
}
.section-light .info-row > * {
border-top-color: var(--border-dark);
}
.info-row > *:last-child {
border-bottom: 1px solid var(--border-light);
}
.section-light .info-row > *:last-child {
border-bottom-color: var(--border-dark);
}
@media (min-width: 768px) {
.info-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--gap-lg);
}
.info-row > *:last-child {
border-bottom: 0;
}
} .facilities {
display: grid;
grid-template-columns: minmax(0, 1fr);
column-gap: var(--gap-xl);
list-style: none;
margin: 0;
padding: 0;
counter-reset: facility;
} @media (min-width: 768px) {
.facilities {
--facility-rows: 7;
grid-auto-flow: column;
grid-template-rows: repeat(var(--facility-rows), auto);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
} .form-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-lg);
}
@media (min-width: 900px) {
.form-layout {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: var(--gap-xl);
align-items: start;
} .form-layout__naast { --naast-lijn: color-mix(in srgb, var(--color-white) 25%, transparent);
align-self: stretch;
padding-left: var(--gap-md);
border-left: 1px solid var(--naast-lijn);
}
.section-light .form-layout__naast { --naast-lijn: color-mix(in srgb, var(--color-black) 25%, transparent); }
}  .stack {
display: flex;
flex-direction: column;
gap: var(--gap-sm);
}
.stack--tight { gap: var(--gap-xs); }
.stack--loose { gap: var(--gap-lg); }
.row {
display: flex;
flex-wrap: wrap;
gap: var(--gap-sm);
align-items: center;
} .measure { max-width: var(--container-text); }
.measure--wide { max-width: var(--container-narrow); } .route-cta {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-lg);
align-items: center;
}
@media (min-width: 768px) {
.route-cta {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: var(--gap-xl);
}
} .luchtfoto {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-lg);
align-items: center;
}
@media (min-width: 768px) {
.luchtfoto {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: var(--gap-xl);
}
}.wordmark {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tighter);
line-height: 1;
text-transform: uppercase;
margin: 0;
}
.wordmark a {
display: inline-block;
text-decoration: none; transition: opacity var(--duration-base) var(--ease-out);
}
.wordmark a:focus-visible {
opacity: 0.7;
}
@media (hover: hover) {
.wordmark a:hover {
opacity: 0.7;
}
} .wordmark--logo {
display: flex;
line-height: 0;
}
.wordmark__logo {
display: block;
width: auto;
height: 40px;
transition: height var(--duration-chrome) var(--ease-out);
} @media (min-width: 56.25em) {
.wordmark__logo { height: 48px; }
} .site-header.is-scrolled .wordmark__logo { height: 36px; }
@media (min-width: 56.25em) {
.site-header.is-scrolled .wordmark__logo { height: 40px; }
} .section-light .wordmark em,
.wordmark--red em {
color: var(--color-red);
font-family: inherit;
font-style: normal;
} .label {
display: inline-block;
font-family: var(--font-sans);
font-size: var(--text-button);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
line-height: 1.2;
text-transform: uppercase;
}
.label--lg {
font-size: var(--text-label);
letter-spacing: var(--tracking-wide);
}
.label--red { color: var(--color-red); } .card .label--red {
display: block;
color: var(--text-on-dark-muted);
}
.card .label--red::before {
content: '';
display: block;
width: 3.5rem;
margin-bottom: 0.75rem;
border-top: 2px solid var(--color-red);
}
.section-light .card .label--red {
color: var(--text-on-light-muted);
} .section-dark .label--red,
.section-shadow .label--red,
.section-deep .label--red {
color: var(--color-cream);
}  .eyebrow {
display: flex;
align-items: center;
gap: 0.875rem;
margin: 0 0 var(--gap-sm);
font-family: var(--font-sans);
font-size: var(--text-label);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--text-on-dark-muted);
}
.eyebrow::after {
content: '';
height: 2px;
width: 3.5rem;
background-color: var(--color-red);
}
.section-light .eyebrow,
.section-brick-light .eyebrow {
color: var(--text-on-light-muted);
} .section-title {
font-family: var(--font-serif);
font-size: var(--text-h2-large);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tighter);
line-height: var(--leading-tight);
text-transform: uppercase;
margin: 0;
}
.section-statement {
font-family: var(--font-serif);
font-size: var(--text-h2);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-tighter);
line-height: var(--leading-snug);
margin: 0;
} .section-label {
font-family: var(--font-serif);
font-size: var(--text-h2-label);
font-style: italic;
font-weight: var(--weight-semibold);
text-transform: uppercase;
line-height: var(--leading-snug);
border-left: 2px solid var(--color-red);
padding-left: 1.5rem;
margin: 0;
} .divider {
width: 60px;
height: 3px;
background-color: var(--color-red);
border: 0;
margin-block: var(--gap-sm);
}
.divider--center { margin-inline: auto; } .prose {
max-width: var(--container-text);
}
.prose > * + * { margin-top: 1.25em; }
.prose p {
line-height: var(--leading-loosest);
}
.lead {
font-size: var(--text-body-lg);
line-height: var(--leading-loose);
}
.muted { color: var(--text-on-dark-muted); }
.section-light .muted { color: var(--text-on-light-muted); } .quote {
font-family: var(--font-serif);
font-style: italic;
font-size: var(--text-h2);
font-weight: var(--weight-semibold);
line-height: var(--leading-relaxed);
letter-spacing: var(--tracking-tighter);
margin: 0;
} .quote__source {
display: inline-flex;
align-items: center;
gap: var(--gap-sm);
margin-top: var(--gap-md);
font-family: var(--font-sans);
font-size: clamp(1rem, 1.6vw, 1.25rem);
font-style: normal;
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-on-light);
}
.quote__source::before,
.quote__source::after {
content: '';
flex: 0 0 auto;
width: clamp(1.5rem, 5vw, 4rem);
height: 1px;
background-color: var(--color-red);
}
.section-dark .quote__source,
.section-shadow .quote__source,
.section-deep .quote__source {
color: var(--text-on-dark);
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--gap-xs);
min-height: var(--touch-min);
padding: var(--button-py) var(--button-px);
border: 0;
border-radius: var(--radius-none);
font-family: var(--font-sans);
font-size: var(--text-button);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
line-height: var(--leading-none);
text-transform: uppercase;
text-align: center;
text-decoration: none;
cursor: pointer; max-width: 100%;
overflow-wrap: break-word;
transition:
background-color var(--duration-button) var(--ease-out),
box-shadow var(--duration-button) var(--ease-out),
transform var(--duration-base) var(--ease-out);
} .btn--primary {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: var(--color-red);
color: #ffffff;
box-shadow: var(--shadow-button);
}
.btn--primary::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--color-red-hover);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--duration-button) var(--ease-out);
}
.btn--primary:focus-visible::before {
transform: scaleX(1);
}
@media (hover: hover) {
.btn--primary:hover::before {
transform: scaleX(1);
}
}
.btn--primary:focus-visible {
box-shadow: var(--shadow-button-hover);
}
@media (hover: hover) {
.btn--primary:hover {
box-shadow: var(--shadow-button-hover);
}
}
.btn--primary .btn__arrow {
transition: transform var(--duration-base) var(--ease-out);
}
.btn--primary:focus-visible .btn__arrow {
transform: translateX(6px);
}
@media (hover: hover) {
.btn--primary:hover .btn__arrow {
transform: translateX(6px);
}
}
.btn:active { transform: scale(0.98); } .btn--ghost {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: transparent;
color: var(--color-white);
border: 1px solid color-mix(in srgb, var(--color-white) 35%, transparent);
transition:
color var(--duration-button) var(--ease-out),
border-color var(--duration-button) var(--ease-out),
transform var(--duration-base) var(--ease-out);
} .btn--ghost::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--color-white);
transform: scaleY(0);
transform-origin: center bottom;
transition: transform var(--duration-button) var(--ease-out);
}
.btn--ghost:focus-visible::before {
transform: scaleY(1);
}
@media (hover: hover) {
.btn--ghost:hover::before {
transform: scaleY(1);
}
}
.btn--ghost:focus-visible {
color: var(--color-black);
border-color: var(--color-white);
}
@media (hover: hover) {
.btn--ghost:hover {
color: var(--color-black);
border-color: var(--color-white);
}
} .btn--text {
min-height: auto;
padding: 0.25rem 0;
background: none;
color: inherit;
border-bottom: 2px solid var(--color-red);
letter-spacing: var(--tracking-wide);
}
.btn--text .btn__arrow {
transition: transform var(--duration-base) var(--ease-out);
}
.btn--text:focus-visible .btn__arrow {
transform: translateX(4px);
}
@media (hover: hover) {
.btn--text:hover .btn__arrow {
transform: translateX(4px);
}
}  .frame {
position: relative;
overflow: hidden;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-frame-dark);
aspect-ratio: 4 / 3;
}
.section-light .frame { box-shadow: var(--shadow-frame-light); }
.frame img {
width: 100%;
height: 100%;
object-fit: cover;
}
.frame::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 40%;
background: linear-gradient(to top, color-mix(in srgb, var(--color-deep) 55%, transparent), transparent);
pointer-events: none;
}
.frame--tall { aspect-ratio: 3 / 4; }
.frame--wide { aspect-ratio: 16 / 9; } .weave {
position: relative;
isolation: isolate;
}
.weave::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--pattern-weave);
opacity: var(--pattern-weave-opacity);
pointer-events: none;
} .glow {
position: relative;
isolation: isolate;
overflow: hidden;
}
.glow::before {
content: '';
position: absolute;
top: -12rem;
right: -10rem;
z-index: -1;
width: 31.25rem;
height: 31.25rem;
border-radius: var(--radius-pill);
background: radial-gradient(circle, var(--wash-red-soft), transparent 70%);
pointer-events: none;
}
.gradient-dark { background: var(--gradient-dark); }  .hero {
position: relative;
display: flex;
align-items: flex-end;
overflow: hidden;
isolation: isolate;
padding-top: var(--header-hoogte);
}
.hero--home {
min-height: 100vh;
min-height: 100dvh;
} .hero--page {
min-height: 100vh;
min-height: 100dvh;
}
.hero__media {
position: absolute;
inset: 0;
z-index: -2;
}
.hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(var(--hero-overscan));
} .hero--boven .hero__media img {
object-position: 50% 20%;
transform-origin: 50% 20%;
}  .hero__overlay {
position: absolute;
inset: 0;
z-index: -1; --scrim-rand: max(calc(50% + 3rem), 43rem);
background-image: linear-gradient(
to right,
color-mix(in srgb, var(--color-deep) 84%, transparent) 0,
color-mix(in srgb, var(--color-deep) 78%, transparent) calc(var(--scrim-rand) - 18rem),
color-mix(in srgb, var(--color-deep) 64%, transparent) var(--scrim-rand),
color-mix(in srgb, var(--color-deep) 10%, transparent) calc(var(--scrim-rand) + 12rem),
color-mix(in srgb, var(--color-deep) 0%, transparent) calc(var(--scrim-rand) + 20rem)
);
} .hero__overlay::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 11rem;
background-image: linear-gradient(
to bottom,
color-mix(in srgb, var(--color-deep) 84%, transparent) 0,
color-mix(in srgb, var(--color-deep) 84%, transparent) 4.5rem,
color-mix(in srgb, var(--color-deep) 0%, transparent) 100%
);
}
@media (max-width: 899px) {
.hero__overlay::before {
display: none;
}
} .hero--home .hero__overlay {
--scrim-rand: max(calc(50% + 9rem), 49rem);
}
@media (max-width: 767px) { .hero__overlay {
background-image: linear-gradient(
to top,
color-mix(in srgb, var(--color-deep) 84%, transparent) 0%,
color-mix(in srgb, var(--color-deep) 76%, transparent) 50%,
color-mix(in srgb, var(--color-deep) 64%, transparent) 80%,
color-mix(in srgb, var(--color-deep) 40%, transparent) 100%
);
}
}
.hero--cta .hero__overlay {
background-image: linear-gradient(
to top,
color-mix(in srgb, var(--color-deep) 86%, transparent) 0%,
color-mix(in srgb, var(--color-deep) 72%, transparent) 50%,
color-mix(in srgb, var(--color-deep) 58%, transparent) 100%
);
}
.hero__content {
position: relative;
width: 100%;
padding-block: var(--section-md);
} .hero__content > .container > * {
max-width: 40rem;
} .hero__tagline {
font-family: var(--font-serif);
font-size: min(var(--text-hero), 12vh);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tighter);
line-height: var(--leading-none);
text-wrap: balance;
margin: 0;
}
.hero__wordmark {
font-family: var(--font-sans);
font-size: var(--text-label);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
margin: 0 0 var(--gap-sm);
color: var(--color-cream);
}
.hero__intro {
max-width: 34rem;
margin-top: var(--gap-sm);
font-size: var(--text-body-lg);
line-height: var(--leading-loose);
}
.hero__actions {
margin-top: var(--gap-md);
} @media (max-height: 900px) {
.hero--home .hero__content,
.hero--page .hero__content {
padding-block: 2.5rem 3rem;
} .hero--home .hero__intro,
.hero--page .hero__intro {
margin-top: var(--gap-xs);
}
.hero--home .hero__actions,
.hero--page .hero__actions {
margin-top: var(--gap-sm);
}
} @media (max-width: 1119px) {
.hero--home .hero__content,
.hero--page .hero__content {
padding-bottom: var(--zwevend-vrij);
}
} @media (max-height: 520px) and (orientation: landscape) {
.hero--home .hero__content,
.hero--page .hero__content {
padding-block: 1rem 1.5rem;
}
.hero__wordmark {
margin-bottom: var(--gap-xs);
} .hero--home .hero__intro,
.hero--page .hero__intro {
font-size: var(--text-body);
}
.hero--home .hero__actions,
.hero--page .hero__actions {
margin-top: 1rem;
}
} @media (max-height: 420px) and (orientation: landscape) {
.hero--home .hero__content,
.hero--page .hero__content {
padding-block: 0.5rem;
} .hero__wordmark {
line-height: var(--leading-none);
}
.hero--home .hero__intro,
.hero--page .hero__intro {
margin-top: 0.25rem;
}
.hero--home .hero__actions,
.hero--page .hero__actions {
margin-top: 0.5rem;
}
} @media (scripting: enabled) {
.hero__wordmark,
.hero__tagline,
.hero__intro,
.hero__actions {
opacity: 0;
}
.hero.is-ready .hero__wordmark,
.hero.is-ready .hero__tagline {
animation: f59-hero-in 1.2s var(--ease-out) forwards;
}
.hero.is-ready .hero__intro {
animation: f59-hero-up 1s var(--ease-out) 0.5s forwards;
}
.hero.is-ready .hero__actions {
animation: f59-hero-fade 1s var(--ease-out) 1s forwards;
}
}
@keyframes f59-hero-in {
from { opacity: 0; transform: scale(0.94); }
to   { opacity: 1; transform: none; }
}
@keyframes f59-hero-up {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: none; }
}
@keyframes f59-hero-fade {
from { opacity: 0; }
to   { opacity: 1; }
} .door {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 15rem;
padding: var(--card-padding);
overflow: hidden;
isolation: isolate;
color: var(--color-white);
text-decoration: none;
background-color: var(--color-shadow);
}
.door__media {
position: absolute;
inset: 0;
z-index: -2;
}
.door__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-image) var(--ease-out);
} .door::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
to top,
color-mix(in srgb, var(--color-deep) 92%, transparent) 0%,
color-mix(in srgb, var(--color-deep) 84%, transparent) 45%,
color-mix(in srgb, var(--color-deep) 68%, transparent) 75%,
color-mix(in srgb, var(--color-deep) 58%, transparent) 100%
);
transition: background var(--duration-base) var(--ease-out);
} .door__title {
font-family: var(--font-serif);
font-size: var(--text-h3);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tighter);
line-height: var(--leading-normal);
margin: 0;
} .door__text {
margin-top: var(--gap-xs);
max-width: 26rem;
color: var(--text-on-dark-muted);
}
.door__action {
margin-top: var(--gap-sm);
display: inline-flex;
align-items: center;
gap: var(--gap-xs);
font-family: var(--font-sans);
font-size: var(--text-button);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
}
.door__arrow {
transition: transform var(--duration-base) var(--ease-out);
}  a.door:focus-visible .door__media img {
transform: scale(var(--image-zoom));
}
@media (hover: hover) {
a.door:hover .door__media img {
transform: scale(var(--image-zoom));
}
}
a.door:focus-visible::before {
background: linear-gradient(to top, color-mix(in srgb, var(--color-deep) 92%, transparent) 0%, color-mix(in srgb, var(--color-deep) 50%, transparent) 60%, color-mix(in srgb, var(--color-deep) 25%, transparent) 100%);
}
@media (hover: hover) {
a.door:hover::before {
background: linear-gradient(to top, color-mix(in srgb, var(--color-deep) 92%, transparent) 0%, color-mix(in srgb, var(--color-deep) 50%, transparent) 60%, color-mix(in srgb, var(--color-deep) 25%, transparent) 100%);
}
}
a.door:focus-visible .door__arrow {
transform: translateX(6px);
}
@media (hover: hover) {
a.door:hover .door__arrow {
transform: translateX(6px);
}
} .card {
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--color-shadow);
border: 1px solid var(--border-light);
text-decoration: none;
color: inherit;
transition:
transform var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out);
}
.section-light .card {
background-color: #ffffff;
border-color: var(--border-dark);
box-shadow: var(--shadow-card);
} .card:focus-visible {
transform: translateY(-10px);
border-color: color-mix(in srgb, var(--color-white) 18%, transparent);
box-shadow: 0 0 3.75rem color-mix(in srgb, var(--color-lamp) 12%, transparent);
}
@media (hover: hover) {
.card:hover {
transform: translateY(-10px);
border-color: color-mix(in srgb, var(--color-white) 18%, transparent);
box-shadow: 0 0 3.75rem color-mix(in srgb, var(--color-lamp) 12%, transparent);
}
}
.section-light .card:focus-visible {
box-shadow: var(--shadow-card-hover);
}
@media (hover: hover) {
.section-light .card:hover {
box-shadow: var(--shadow-card-hover);
}
} .card__media {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 2;
background-color: var(--color-black);
}
.card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-image) var(--ease-out);
}
.card:focus-visible .card__media img {
transform: scale(var(--image-zoom));
}
@media (hover: hover) {
.card:hover .card__media img {
transform: scale(var(--image-zoom));
}
} .card__media--empty {
display: grid;
place-items: center;
background-color: var(--color-black);
background-image: var(--pattern-weave);
background-blend-mode: overlay;
} .card__initial {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 9vw, 4rem);
font-weight: var(--weight-bold);
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px color-mix(in srgb, var(--color-white) 28%, transparent);
letter-spacing: var(--tracking-tighter);
transition: -webkit-text-stroke-color var(--duration-base) var(--ease-out);
}
.section-light .card__initial {
-webkit-text-stroke-color: color-mix(in srgb, var(--color-black) 22%, transparent);
}
.card:focus-visible .card__initial {
-webkit-text-stroke-color: color-mix(in srgb, var(--color-lamp) 55%, transparent);
}
@media (hover: hover) {
.card:hover .card__initial {
-webkit-text-stroke-color: color-mix(in srgb, var(--color-lamp) 55%, transparent);
}
}
.card__body {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: var(--gap-xs);
padding: 1.5rem;
}
.card__title {
font-family: var(--font-serif);
font-size: var(--text-h3);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-normal);
line-height: var(--leading-normal);
margin: 0;
} .card__text {
flex-grow: 1;
margin: 0;
color: var(--text-on-dark-muted);
}
.section-light .card__text { color: var(--text-on-light-muted); }
.card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap-xs);
padding-top: var(--gap-xs);
border-top: 1px solid var(--border-light);
}
.section-light .card__foot { border-top-color: var(--border-dark); } .card__hoek {
position: absolute;
right: 1rem;
bottom: 1rem;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: var(--radius-pill);
background-color: color-mix(in srgb, var(--color-black) 55%, transparent);
color: var(--color-white);
backdrop-filter: blur(4px);
transition:
background-color var(--duration-base) var(--ease-out),
color var(--duration-base) var(--ease-out);
}
.card:focus-visible .card__hoek {
background-color: var(--color-red);
}
@media (hover: hover) {
.card:hover .card__hoek {
background-color: var(--color-red);
}
}
.card__arrow { transition: transform var(--duration-base) var(--ease-out); }
.card:focus-visible .card__arrow { transform: translateX(6px); }
@media (hover: hover) {
.card:hover .card__arrow { transform: translateX(6px); }
} .section-head--split {
display: flex;
gap: var(--gap-sm);
} @media (min-width: 768px) {
.section-head--split {
align-items: flex-end;
justify-content: space-between;
}
} .band__nav {
display: none;
flex-shrink: 0;
gap: 4px;
}
@media (min-width: 768px) {
.band__nav { display: flex; }
} .band__nav[hidden] { display: none; }
.band__arrow {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
padding: 0;
border: 1px solid var(--border-light);
border-radius: var(--radius-pill);
background-color: var(--color-white);
color: var(--color-black);
cursor: pointer;
transition:
background-color var(--duration-base) var(--ease-out),
color var(--duration-base) var(--ease-out),
opacity var(--duration-base) var(--ease-out);
}
.band__arrow:focus-visible {
background-color: var(--color-red);
color: var(--color-white);
}
@media (hover: hover) {
.band__arrow:hover {
background-color: var(--color-red);
color: var(--color-white);
}
}
.band__arrow[disabled] {
background-color: transparent;
border-color: var(--border-light);
color: var(--text-on-dark-muted);
opacity: 0.4;
cursor: default;
}
.section-light .band__arrow {
background-color: var(--color-black);
color: var(--color-white);
border-color: var(--border-dark);
}
.section-light .band__arrow[disabled] {
background-color: transparent;
color: var(--text-on-light-muted);
} .band__arrow--terug .band__arrow-glyph {
transform: scaleX(-1);
} .band__track.is-sleepbaar {
cursor: grab;
}
.band__track.is-gegrepen {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
} .station {
position: relative;
padding: var(--gap-md) var(--gap-sm) var(--gap-md) 0;
border-top: 1px solid var(--border-light);
}
.station__year {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: var(--weight-black);
letter-spacing: var(--tracking-tighter);
line-height: 1;
margin: 0;
color: var(--color-cream);
}
.station__place {
display: block;
margin-top: var(--gap-xs);
color: var(--text-on-dark-muted);
} .station__media {
margin: var(--gap-sm) 0 0;
aspect-ratio: 16 / 9;
overflow: hidden;
border: 1px solid var(--border-light);
}
.station__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} .station__media--leeg {
display: none;
border: 0;
}
@media (min-width: 900px) {
.station__media--leeg { display: block; }
}
.station__title {
margin-top: var(--gap-sm);
font-family: var(--font-serif);
font-size: var(--text-h3);
font-weight: var(--weight-semibold);
line-height: var(--leading-normal);
}
.station__text {
margin-top: var(--gap-xs);
color: var(--text-on-dark-muted);
}
@media (min-width: 900px) {
.station {
padding-right: var(--gap-lg);
} .station::before {
content: '';
position: absolute;
top: -0.3125rem;
left: 0;
width: 0.625rem;
height: 0.625rem;
background-color: var(--color-red);
}
} .facility {
display: flex;
align-items: baseline;
gap: var(--gap-sm);
padding-block: 1rem;
border-top: 1px solid var(--border-light);
counter-increment: facility;
}
.facility::before {
content: counter(facility, decimal-leading-zero);
flex: 0 0 auto;
font-family: var(--font-sans);
font-size: var(--text-button);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
color: var(--color-red);
}   .channels {
--channel-lijn: color-mix(in srgb, var(--color-white) 25%, transparent);
display: grid;
grid-template-columns: minmax(0, 1fr);
border-top: 1px solid var(--channel-lijn); container-type: inline-size;
}
.section-light .channels {
--channel-lijn: color-mix(in srgb, var(--color-black) 25%, transparent);
}
@media (min-width: 768px) {
.channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.channel {
display: flex;
flex-direction: column;
gap: var(--gap-xs);
min-height: var(--touch-min);
padding: var(--gap-sm) var(--gap-sm) var(--gap-sm) 0;
border-bottom: 1px solid var(--channel-lijn);
text-decoration: none;
color: inherit;
}
@media (min-width: 768px) {
.channel + .channel {
padding-left: var(--gap-sm);
border-left: 1px solid var(--channel-lijn);
}
} .channel .label {
color: var(--text-on-dark-muted);
}
.section-light .channel .label {
color: var(--text-on-light-muted);
}
.channel__value {
position: relative;
display: inline-block;
font-family: var(--font-serif);
font-size: var(--text-h3);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-normal);
} .channel__value::after,
.channel .muted::after {
content: '';
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 2px;
background-color: var(--color-red);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-base) var(--ease-out);
}
.channel:focus-visible .channel__value::after,
.channel:focus-visible .muted::after {
transform: scaleX(1);
}
@media (hover: hover) {
.channel:hover .channel__value::after,
.channel:hover .muted::after {
transform: scaleX(1);
}
} .paneel {
padding: var(--card-padding);
background-color: var(--color-shadow);
border: 1px solid var(--border-light);
}
.section-light .paneel {
background-color: #ffffff;
border-color: var(--border-dark);
box-shadow: var(--shadow-card);
}   .form {
--form-maat: 46rem;
--veld-gap: 1rem;
--label-grond: var(--color-black);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--veld-gap);
align-items: start;
max-width: var(--form-maat);
}
.form.paneel {
--label-grond: var(--color-shadow);
max-width: calc(var(--form-maat) + 2 * var(--card-padding));
}
.section-light .form { --label-grond: var(--color-white); }
.section-light .form.paneel { --label-grond: #ffffff; } .form > button { justify-self: start; }
@media (min-width: 640px) {
.form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form__meldingen,
.form > button {
grid-column: 1 / -1;
} .form--tekstvak-rechts .field--tekstvak {
grid-column: 2;
grid-row: span 2;
}
} .field {
position: relative;
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0;
} .field__label {
--label-lucht: 0.35rem;
position: absolute;
left: calc(1rem - var(--label-lucht));
top: 1.75rem;
transform: translateY(-50%);
padding: 0 var(--label-lucht);
background-color: var(--label-grond);
color: var(--text-on-dark-muted);
font-family: var(--font-sans);
font-size: var(--text-button);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
line-height: 1;
text-transform: uppercase; max-width: calc(100% - 2 * (1rem - var(--label-lucht))); overflow-wrap: break-word; pointer-events: none;
transition:
transform var(--duration-base) var(--ease-out),
color var(--duration-base) var(--ease-out);
}
.section-light .field__label { color: var(--text-on-light-muted); } .field__label .muted {
font-weight: var(--weight-regular);
letter-spacing: 0;
text-transform: none;
} .field__control:focus + .field__label,
.field__control:not(:placeholder-shown) + .field__label {
transform: translateY(-1.75rem);
color: var(--color-cream);
} .section-light .field__control:focus + .field__label,
.section-light .field__control:not(:placeholder-shown) + .field__label {
color: var(--color-red);
} .field--tekstvak .field__label { top: 1.5rem; }
.field--tekstvak .field__control:focus + .field__label,
.field--tekstvak .field__control:not(:placeholder-shown) + .field__label {
transform: translateY(-1.5rem);
} .field--tekstvak::before {
content: "";
position: absolute;
top: 1px;
left: 1px;
right: 1px;
height: 1rem;
background-color: var(--label-grond);
pointer-events: none;
z-index: 1;
} .field--tekstvak .field__label { z-index: 2; } .field__control {
display: block;
width: 100%;
height: 3.5rem;
padding: 0 1rem;
background-color: transparent; border: 1px solid color-mix(in srgb, var(--color-white) 38%, transparent);
border-radius: var(--radius-none);
color: inherit;
font-family: var(--font-sans); font-size: var(--text-body);
transition: border-color var(--duration-base) var(--ease-out);
} .section-light .field__control {
border-color: color-mix(in srgb, var(--color-black) 48%, transparent);
} @media (hover: hover) {
.field__control:hover:not(:focus) {
border-color: color-mix(in srgb, var(--color-white) 58%, transparent);
}
.section-light .field__control:hover:not(:focus) {
border-color: color-mix(in srgb, var(--color-black) 70%, transparent);
}
}
.field__control:focus {
outline: none;
border-color: var(--color-red);
} .field__control::placeholder { color: transparent; }
.field__control:focus::placeholder { color: var(--text-on-dark-faint); } .section-light .field__control:focus::placeholder {
color: color-mix(in srgb, var(--color-black) 58%, transparent);
} .field__control:focus-visible {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: var(--focus-offset);
}
textarea.field__control {
height: 9.5rem;
padding: 1rem;
line-height: 1.55;
resize: vertical;
}
.field--checkbox {
flex-direction: row;
align-items: flex-start;
gap: 0.75rem; flex-wrap: wrap;
} .field--checkbox input {
width: 1.25rem;
height: 1.25rem;
margin-top: 0.2rem;
accent-color: var(--color-red);
flex: 0 0 auto;
} .field--checkbox > label {
flex: 1 1 0; min-height: var(--touch-min);
min-width: 0;
font-size: var(--text-body-sm);
line-height: 1.5;
}
.field--error .field__control { border-color: var(--color-error); } .field--error input[type="checkbox"] {
outline: var(--focus-width) solid var(--color-error);
outline-offset: 2px;
}
.section-dark .field--error input[type="checkbox"],
.section-shadow .field--error input[type="checkbox"],
.section-deep .field--error input[type="checkbox"] {
outline-color: var(--color-error-on-dark);
}
.field__error {
font-size: var(--text-body-sm);
color: var(--color-error);
}
.field--checkbox .field__error { flex: 0 0 100%; }
.section-dark .field__error,
.section-shadow .field__error,
.section-deep .field__error { color: var(--color-error-on-dark);
} .form__meldingen:empty { display: none; }
.form__status {
margin-bottom: var(--gap-sm);
padding: var(--gap-sm);
border-left: 3px solid var(--color-red);
background-color: var(--wash-red);
}
.form__status--ok { border-left-color: var(--color-success); } .btn[disabled] {
opacity: 0.6;
cursor: wait;
} .form-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
} .tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap-xs);
} @media (max-width: 767px) {
.tiles {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tiles .tile:nth-child(n+4) {
display: none;
}
}
@media (min-width: 640px) {
.tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
} @media (min-width: 768px) {
.tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.tile {
aspect-ratio: 1;
background-color: var(--color-black);
background-image: var(--pattern-weave);
display: grid;
place-items: center;
color: var(--text-on-dark-faint);
font-size: var(--text-button);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
} .site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: var(--z-header);
padding-block: var(--gap-sm);
transition:
background-color var(--duration-chrome) var(--ease-out),
backdrop-filter var(--duration-chrome) var(--ease-out),
padding var(--duration-chrome) var(--ease-out),
transform var(--duration-chrome) var(--ease-out);
} @media (max-height: 520px) and (orientation: landscape) {
.site-header {
padding-block: 1rem;
}
}
.site-header.is-scrolled {
padding-block: 0.75rem;
background-color: var(--overlay-header);
backdrop-filter: blur(var(--overlay-header-blur));
}
.site-header.is-hidden {
transform: translateY(-100%);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap-sm);
}
.nav-primary { display: none; } @media (min-width: 56.25em) {
.nav-primary { display: block; } .nav-primary__list {
display: flex;
align-items: center;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
} .nav-primary__list a {
position: relative;
isolation: isolate;
display: inline-block;
padding: 0.5rem 0.75rem;
font-family: var(--font-sans);
font-size: clamp(0.6875rem, 0.78vw, var(--text-button));
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: color var(--duration-base) var(--ease-out);
} .nav-primary__list a::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: color-mix(in srgb, var(--color-white) 12%, transparent);
opacity: 0;
transform: scaleY(0.6);
transition:
opacity var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
}
.nav-primary__list a:focus-visible::before {
opacity: 1;
transform: none;
}
@media (hover: hover) {
.nav-primary__list a:hover::before {
opacity: 1;
transform: none;
}
}
@media (hover: hover) {
.nav-primary__list a:hover { color: var(--color-cream); }
}
.nav-primary__list .current-menu-item > a {
box-shadow: inset 0 -2px 0 var(--color-red);
}
} .header-cta { display: none; }
@media (min-width: 70em) { .header-cta {
display: inline-flex;
flex: 0 0 auto;
white-space: nowrap;
}
} .menu-toggle {
position: fixed;
right: var(--container-px);
bottom: var(--container-px);
z-index: var(--z-menu-toggle);
display: grid;
place-items: center;
width: var(--zwevend-knop);
height: var(--zwevend-knop);
border-radius: var(--radius-pill);
background-color: var(--color-red);
border: 4px solid var(--color-deep);
color: #ffffff;
transition:
background-color var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
.menu-toggle:hover { background-color: var(--color-red-hover); }
}
.menu-toggle:active { transform: scale(0.95); }
@media (min-width: 56.25em) {
.menu-toggle { display: none; }
} body.has-menu-open .menu-toggle {
z-index: var(--z-menu-sluit);
} .visit-cta {
position: fixed;
left: var(--container-px);
bottom: var(--container-px);
z-index: var(--z-menu-toggle);
max-width: calc(100vw - var(--zwevend-knop) - var(--container-px) * 3);
border-radius: var(--radius-pill); padding: 16px 24px;
} @media (min-width: 70em) {
.visit-cta { display: none; }
} @media (max-height: 520px) and (orientation: landscape) {
.visit-cta { display: none; }
.header-cta {
display: inline-flex;
flex: 0 0 auto;
white-space: nowrap;
}
} @media (max-height: 700px) and (orientation: portrait) {
.visit-cta { display: none; }
.header-cta {
display: inline-flex;
flex: 0 0 auto;
white-space: nowrap;
}
} .nav-mobile {
position: fixed;
inset: 0;
z-index: var(--z-menu);
display: flex;
flex-direction: column;
justify-content: center; justify-content: safe center;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--section-md) var(--container-px);
background-color: var(--color-deep);
opacity: 0;
visibility: hidden;
transform: translateY(1rem);
transition:
opacity var(--duration-chrome) var(--ease-out),
transform var(--duration-chrome) var(--ease-out),
visibility var(--duration-chrome);
}
.nav-mobile.is-open {
opacity: 1;
visibility: visible;
transform: none;
}
.nav-mobile__list {
list-style: none;
margin: 0;
padding: 0;
}
.nav-mobile__list a {
display: block;
padding: 0.5rem 0;
font-family: var(--font-serif);
font-size: var(--text-mobile-menu);
font-style: italic;
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-tighter);
text-decoration: none;
transition: color var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
.nav-mobile__list a:hover { color: var(--color-cream); }
}
@media (min-width: 56.25em) {
.nav-mobile { display: none; }
} @media (max-height: 520px) and (orientation: landscape) {
.nav-mobile {
--text-mobile-menu: var(--text-h3);
padding-block: var(--gap-md);
}
.nav-mobile__list a {
line-height: var(--leading-relaxed);
}
} @media (max-height: 700px) and (orientation: portrait) {
.nav-mobile {
padding-block: var(--gap-md);
}
} body.has-menu-open { overflow: hidden; } .site-footer {
position: relative; padding-block: var(--section-md) 0;
overflow: hidden;
} .site-footer::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--pattern-weave);
opacity: 0.05;
pointer-events: none;
} .site-footer > * {
position: relative;
}
.site-footer__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-lg);
}
@media (min-width: 768px) { .site-footer__inner {
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
gap: var(--gap-lg);
}
}
.site-footer__address {
font-style: normal;
line-height: var(--leading-loose); color: var(--text-on-dark-faint);
}
.site-footer__address a { text-decoration: none; }
@media (hover: hover) {
.site-footer__address a:hover { color: var(--color-white); }
} .site-footer__tijden {
border-left: 2px solid var(--color-red);
padding-left: var(--gap-sm);
}
.site-footer__uren {
font-size: var(--text-body);
line-height: var(--leading-loose);
color: var(--text-on-dark);
margin: 0;
}
.site-footer__door {
margin: 0.75rem 0 0;
font-size: var(--text-body-sm);
}
.site-footer__door a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
color: var(--text-on-dark-faint);
transition: color var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
.site-footer__door a:hover { color: var(--color-white); }
}
.site-footer__pijl {
transition: transform var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
.site-footer__door a:hover .site-footer__pijl {
transform: translateX(4px);
}
}
.nav-footer__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.nav-footer__list a {
font-size: var(--text-body-sm);
text-decoration: none;
color: var(--text-on-dark-faint);
transition: color var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
.nav-footer__list a:hover { color: var(--color-white); }
}
.footer-heading {
font-family: var(--font-sans);
font-size: var(--text-button);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
margin-bottom: var(--gap-xs);
} .site-footer :is( nav, ul ) + .footer-heading {
margin-top: var(--gap-sm);
} .site-footer__slot {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem var(--gap-sm);
margin-top: var(--gap-lg);
padding-top: var(--gap-sm);
border-top: 1px solid var(--border-light);
}
.site-footer__wat,
.site-footer__credit {
margin: 0;
font-size: var(--text-body-sm);
color: var(--text-on-dark-faint);
} .site-footer__merk {
margin-top: var(--gap-lg);
user-select: none;
pointer-events: none;
}
.site-footer__merk span {
display: block;
font-family: var(--font-serif);
font-weight: var(--weight-bold); font-size: calc( ( min( var(--container), 100vw ) - var(--container-px) * 2 ) / 4.91 );
line-height: 0.78;
letter-spacing: -0.055em;
white-space: nowrap;
color: color-mix(in srgb, var(--color-white) 14%, transparent);
margin-bottom: -0.14em; margin-left: -0.02em;
}  @media (max-width: 1119px) {
.site-footer__merk {
padding-bottom: var(--zwevend-vrij);
}
}
@media (max-width: 699px) { .site-footer__merk span {
font-size: calc( ( 100vw - var(--container-px) * 2 ) / 5.3 );
}
} @media (max-width: 767px) {
.hero__content {
padding-block: var(--gap-lg);
}
.hero__intro {
margin-top: var(--gap-xs);
}
.hero__actions {
margin-top: var(--gap-sm);
} }  .bedrijf__kop {
padding-block: 9rem var(--gap-lg);
} @media (min-width: 768px) {
.bedrijf__kop .container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: var(--gap-xl);
}
.bedrijf__kop .container > * {
grid-column: 1;
}
.bedrijf__grid > *:nth-child(2) {
margin-top: calc(-1 * (var(--section-lg) + 37.5%));
}
}
.kruimel {
margin-bottom: var(--gap-md);
}
.kruimel__terug {
display: inline-flex;
align-items: center;
gap: var(--gap-xs); padding-block: 0.125rem;
margin-block: -0.125rem;
min-height: 1.625rem;
font-family: var(--font-sans);
font-size: var(--text-button);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
text-decoration: none;
color: var(--text-on-dark-muted);
transition: color var(--duration-base) var(--ease-out);
}
.kruimel__terug:focus-visible {
color: var(--text-on-dark);
}
@media (hover: hover) {
.kruimel__terug:hover {
color: var(--text-on-dark);
}
} .kruimel__pijl {
transform: scaleX(-1);
transition: transform var(--duration-base) var(--ease-out);
}
.kruimel__terug:focus-visible .kruimel__pijl {
transform: scaleX(-1) translateX(6px);
}
@media (hover: hover) {
.kruimel__terug:hover .kruimel__pijl {
transform: scaleX(-1) translateX(6px);
}
} .bedrijf__categorie {
margin: 0 0 var(--gap-sm);
letter-spacing: 0.18em;
}
.bedrijf__naam {
margin: 0;
} .bedrijf__tagline {
max-width: 34rem;
margin: var(--gap-sm) 0 0;
font-family: var(--font-serif);
font-size: clamp(1.125rem, 2.5vw, 1.875rem);
font-style: italic;
font-weight: var(--weight-semibold);
line-height: var(--leading-normal);
color: var(--text-on-dark-muted);
}
.bedrijf__actie {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--gap-sm);
margin-top: var(--gap-md);
} .bedrijf__actie-noot {
font-size: var(--text-body-sm);
color: var(--text-on-dark-muted);
}
.section-light .bedrijf__actie-noot { color: var(--text-on-light-muted); } .gegevens {
margin: var(--gap-md) 0 0;
padding: 0; container-type: inline-size;
}
.gegevens__rij {
display: grid;
gap: 0.25rem;
padding-block: 1rem;
border-top: 1px solid var(--border-light);
}
@container (min-width: 27rem) {
.gegevens__rij {
grid-template-columns: 11rem minmax(0, 1fr);
gap: var(--gap-sm);
align-items: baseline;
}
}
.section-light .gegevens__rij { border-top-color: var(--border-dark); }
.gegevens__rij dt {
color: var(--text-on-dark-muted);
}
.section-light .gegevens__rij dt { color: var(--text-on-light-muted); }
.gegevens__waarde {
margin: 0;
}  .frame--leeg {
display: grid;
place-items: center;
background-color: var(--color-black);
background-image: var(--pattern-weave);
background-blend-mode: overlay;
box-shadow: none;
border: 1px solid var(--border-light);
} .frame__initial {
font-size: clamp(5.5rem, 10vw, 9rem);
}
.bedrijf__zijkant {
display: grid;
gap: var(--gap-md);
align-content: start;
} .bedrijf__zijkant > .gegevens { margin-top: 0; }
@media (min-width: 900px) { .bedrijf__zijkant {
position: sticky;
top: calc(var(--header-hoogte) + var(--gap-sm));
}
}
.bezoekblok {
padding: var(--gap-md);
background-color: var(--color-black);
border: 1px solid var(--border-light);
}
.section-light .bezoekblok {
background-color: var(--color-white);
border-color: var(--border-dark);
}
.bezoekblok > * + * { margin-top: var(--gap-sm); }
.bezoekblok > :first-child { margin-top: 0; }
.bezoekblok__adres {
font-family: var(--font-serif);
font-size: var(--text-h3);
line-height: var(--leading-normal);
margin: 0;
}  .evenement__kop,
.artikel__kop {
padding-block: 9rem var(--gap-lg);
} .evenement__datum,
.artikel__datum {
margin: 0 0 var(--gap-sm);
letter-spacing: 0.18em;
}
.evenement__titel,
.artikel__titel {
margin: 0;
} .evenement__geweest {
max-width: 34rem;
margin: var(--gap-sm) 0 0;
padding-top: var(--gap-sm);
border-top: 2px solid var(--color-red);
font-size: var(--text-body-lg);
line-height: var(--leading-loose);
color: var(--text-on-dark-muted);
}
.section-light .evenement__geweest { color: var(--text-on-light-muted); } .evenement__actie {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--gap-sm);
margin-top: var(--gap-md);
} .evenement__beeld {
margin-bottom: var(--gap-md);
} .artikel__figuur {
margin: 0 0 var(--gap-lg);
} .artikel__beeld {
aspect-ratio: 3 / 2;
}  .artikel__afsluiter {
margin-top: var(--gap-lg);
}
.artikel__bijschrift {
margin: var(--gap-xs) 0 0;
font-size: var(--text-body-sm);
line-height: var(--leading-loose);
color: var(--text-on-dark-muted);
}
.section-light .artikel__bijschrift { color: var(--text-on-light-muted); } .artikel__tekst {
max-width: none;
font-size: var(--text-body-lg);
}
.artikel__tekst p {
line-height: var(--leading-loose);
} .artikel__tekst h2,
.artikel__tekst h3 {
font-family: var(--font-serif);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
margin-top: var(--gap-lg);
}
.artikel__tekst h2 { font-size: var(--text-h3); }
.artikel__tekst h3 { font-size: var(--text-body-lg); } .ruimtes {
width: 100%;
border-collapse: collapse;
margin-top: var(--gap-md);
font-variant-numeric: tabular-nums;
} .ruimtes__unit { width: 1%; }
.ruimtes__oppervlak { width: 1%; padding-right: var(--gap-md); }
.ruimtes th,
.ruimtes td {
padding-block: 1rem;
text-align: left;
vertical-align: baseline;
border-bottom: 1px solid var(--border-light);
}
.section-light .ruimtes th,
.section-light .ruimtes td { border-bottom-color: var(--border-dark); }
.ruimtes thead th {
font-family: var(--font-sans);
font-size: var(--text-button);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--text-on-dark-muted);
padding-bottom: 0.75rem;
}
.section-light .ruimtes thead th { color: var(--text-on-light-muted); }
.ruimtes__unit {
font-family: var(--font-serif);
font-size: var(--text-h3);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tighter);
white-space: nowrap;
}
.ruimtes__oppervlak {
color: var(--text-on-dark-muted);
white-space: nowrap;
}
.section-light .ruimtes__oppervlak { color: var(--text-on-light-muted); } .ruimtes td.ruimtes__status,
.ruimtes thead th:last-child { text-align: right; } @media (max-width: 479px) {
.ruimtes thead {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
border: 0;
white-space: nowrap;
}
.ruimtes tbody tr {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
column-gap: var(--gap-sm);
padding-block: 1rem;
border-bottom: 1px solid var(--border-light);
}
.section-light .ruimtes tbody tr { border-bottom-color: var(--border-dark); } .ruimtes tbody th,
.ruimtes tbody td {
padding-block: 0;
border-bottom: 0;
}
.ruimtes tbody .ruimtes__unit {
grid-column: 1;
grid-row: 1;
}
.ruimtes tbody .ruimtes__status {
grid-column: 2;
grid-row: 1;
}
.ruimtes td.ruimtes__oppervlak {
grid-column: 1;
grid-row: 2; padding-right: 0.75rem;
margin-top: 0.25rem;
} .ruimtes tbody tr.ruimtes__rij--vrij > *,
.ruimtes tbody tr.ruimtes__rij--aanvraag > * {
border: 0;
background-color: transparent;
}
.ruimtes tbody tr.ruimtes__rij--vrij {
border: 2px solid var(--color-red);
background-color: var(--wash-red);
}
.ruimtes tbody tr.ruimtes__rij--aanvraag {
border: 1px solid var(--border-light);
background-color: color-mix(in srgb, var(--color-white) 4%, transparent);
}
.section-light .ruimtes tbody tr.ruimtes__rij--aanvraag {
border-color: var(--border-dark);
background-color: color-mix(in srgb, var(--color-black) 4%, transparent);
}
} .status {
display: inline-block;
font-family: var(--font-sans);
font-size: var(--text-button);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
line-height: 1.2;
text-transform: uppercase;
white-space: nowrap;
}
.status--vrij {
padding: 0.375rem 0.75rem;
background-color: var(--color-red);
color: var(--color-white);
}
.status--aanvraag {
padding: 0.3125rem 0.6875rem;
border: 1px solid var(--border-light);
color: var(--text-on-dark-muted);
}
.section-light .status--aanvraag {
border-color: var(--border-dark);
color: var(--text-on-light-muted);
}
.status--bezet { color: var(--text-on-dark-faint); }
.section-light .status--bezet { color: var(--text-on-light-muted); }  .ruimtes tr.ruimtes__rij--vrij > * {
border-top: 2px solid var(--color-red);
border-bottom: 2px solid var(--color-red);
background-color: var(--wash-red);
}
.ruimtes tr.ruimtes__rij--vrij > *:first-child { border-left: 2px solid var(--color-red); }
.ruimtes tr.ruimtes__rij--vrij > *:last-child { border-right: 2px solid var(--color-red); }
.ruimtes tr.ruimtes__rij--aanvraag > * {
border-top: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
background-color: color-mix(in srgb, var(--color-white) 4%, transparent);
}
.ruimtes tr.ruimtes__rij--aanvraag > *:first-child { border-left: 1px solid var(--border-light); }
.ruimtes tr.ruimtes__rij--aanvraag > *:last-child { border-right: 1px solid var(--border-light); }
.section-light .ruimtes tr.ruimtes__rij--aanvraag > * {
border-top-color: var(--border-dark);
border-bottom-color: var(--border-dark);
background-color: color-mix(in srgb, var(--color-black) 4%, transparent);
}
.section-light .ruimtes tr.ruimtes__rij--aanvraag > *:first-child { border-left-color: var(--border-dark); }
.section-light .ruimtes tr.ruimtes__rij--aanvraag > *:last-child { border-right-color: var(--border-dark); } .ruimtes {
margin-inline: -0.75rem;
width: calc( 100% + 1.5rem );
}
.ruimtes th,
.ruimtes td {
padding-inline: 0.75rem;
} .ruimtes td.ruimtes__oppervlak {
padding-right: var(--gap-md);
} .ruimtes__telling {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--gap-xs) 0.75rem;
margin: var(--gap-sm) 0 0;
}
.ruimtes__noot {
margin-top: var(--gap-sm);
font-size: var(--text-body-sm);
color: var(--text-on-dark-faint);
}
.section-light .ruimtes__noot { color: var(--text-on-light-muted); }
@media (max-width: 479px) {
.ruimtes__unit { font-size: var(--text-body-lg); }
.ruimtes th,
.ruimtes td { padding-block: 0.875rem; }
} .ruimtes-grid {
display: grid;
gap: var(--gap-lg);
align-items: start;
}
@media (min-width: 900px) {
.ruimtes-grid {
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: var(--gap-xl);
} .ruimtes-zij {
position: sticky;
top: calc(var(--header-hoogte) + var(--gap-sm));
}
}
.ruimtes-zij > * + * { margin-top: var(--gap-sm); }
.ruimtes-zij > :first-child { margin-top: 0; } .stencil {
font-family: var(--font-serif);
font-weight: var(--weight-bold);
letter-spacing: -0.06em;
line-height: 0.8;
color: transparent;
-webkit-text-stroke: 1px color-mix(in srgb, var(--color-white) 20%, transparent);
user-select: none;
pointer-events: none;
}
.section-light .stencil,
.section-brick-light .stencil {
-webkit-text-stroke-color: color-mix(in srgb, var(--color-black) 18%, transparent);
}
.stencil--groot {
-webkit-text-stroke-width: 2px;
} .stencil--display {
font-family: var(--font-stencil);
font-weight: 400;
letter-spacing: -0.019em;
line-height: 0.75;
}  .quote-blok {
max-width: 60rem;
margin-inline: auto;
margin-bottom: var(--gap-xl);
text-align: center;
}
.quote-blok__teken {
display: block;
font-family: var(--font-serif);
font-size: clamp(6rem, 14vw, 12rem);
line-height: 0.6;
color: var(--color-red);
opacity: 0.55;
margin-bottom: var(--gap-sm);
}
.quote--groot {
font-size: clamp(2rem, 5.2vw, 4rem);
line-height: var(--leading-tight);
font-weight: var(--weight-regular);
text-wrap: balance;
}
.section-brick-warm .quote--groot {
text-shadow:
0 1px 0 rgba(255, 235, 205, 0.16),
0 -1px 0 rgba(0, 0, 0, 0.55);
} .section-brick-warm .frame img {
filter: sepia(0.35) saturate(0.8) contrast(1.05) brightness(0.95);
}   .hero--home {
align-items: center;
padding-bottom: 4rem;
}
.hero--home .hero__content {
padding-block: 0;
}
.hero--home .hero__tagline {
max-width: 46rem;
font-size: clamp(2.5rem, min(7.5vw, 10.5svh), 7.5rem);
text-shadow: 0 2px 2.5rem color-mix(in srgb, var(--color-deep) 85%, transparent);
} .hero--home .hero__intro {
max-width: 38rem;
line-height: var(--leading-loosest);
text-shadow: 0 1px 1.5rem color-mix(in srgb, var(--color-deep) 90%, transparent);
} @media (max-height: 700px) and (orientation: portrait) {
.hero--home {
padding-bottom: var(--gap-md);
} .hero--home .hero__tagline {
font-size: clamp(2rem, min(7.5vw, 10.5svh), 7.5rem);
} .hero--page .hero__content {
padding-block: 1.5rem 2.5rem;
}
.hero__wordmark {
line-height: var(--leading-none);
}
.hero--home .hero__intro,
.hero--page .hero__intro {
margin-top: var(--gap-xs);
font-size: var(--text-body);
}
.hero--home .hero__actions,
.hero--page .hero__actions {
margin-top: var(--gap-md);
}
}  .route-lijn svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
} @media (max-width: 767px) {
.route-lijn {
max-width: 18rem;
margin-inline: auto;
}
}
.route-lijn__spoor {
fill: none;
stroke: color-mix(in srgb, var(--color-white) 28%, transparent);
stroke-width: 2;
stroke-dasharray: 4 8;
stroke-linecap: round;
}
.route-lijn__getekend {
fill: none;
stroke: var(--color-red);
stroke-width: 3;
stroke-linecap: round;
}
.route-lijn__halte {
fill: var(--color-black);
stroke: color-mix(in srgb, var(--color-white) 50%, transparent);
stroke-width: 2;
}
.section-light .route-lijn__spoor {
stroke: color-mix(in srgb, var(--color-black) 28%, transparent);
}
.section-light .route-lijn__halte {
fill: var(--color-white);
stroke: color-mix(in srgb, var(--color-black) 50%, transparent);
}   .hero__cijfer {
position: absolute;
right: calc(-2vw - 0.083em);
bottom: calc(-4vh + 0.014em);
z-index: var(--z-base);
font-size: clamp(14.96rem, 36.33vw, 36.33rem);
-webkit-text-stroke-color: color-mix(in srgb, var(--color-white) 40%, transparent);
}  @media (max-width: 768px) { .hero__cijfer {
display: none;
}
} .door__nummer {
position: absolute;
top: 1.75rem;
right: 2rem;
z-index: var(--z-base);
font-size: 5rem;
} .door__streep {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-base);
height: 3px;
background-color: var(--color-red);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-chrome) var(--ease-out);
pointer-events: none;
}
.door:focus-visible .door__streep {
transform: scaleX(1);
}
@media (hover: hover) {
.door:hover .door__streep {
transform: scaleX(1);
}
} .outro-acties {
display: flex;
flex-wrap: wrap;
gap: var(--gap-sm);
margin-top: var(--gap-lg);
} .btn--outline-dark {
position: relative;
isolation: isolate;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-black) 35%, transparent);
color: var(--color-black);
background-color: transparent;
transition: color var(--duration-button) var(--ease-out);
}
.btn--outline-dark::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--color-black);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-button) var(--ease-out);
}
.btn--outline-dark:focus-visible {
color: var(--color-white);
}
@media (hover: hover) {
.btn--outline-dark:hover {
color: var(--color-white);
}
}
.btn--outline-dark:focus-visible::before {
transform: scaleX(1);
}
@media (hover: hover) {
.btn--outline-dark:hover::before {
transform: scaleX(1);
}
} .tile {
position: relative;
isolation: isolate;
overflow: hidden;
} .quote-body {
max-width: var(--container-text);
margin-inline: auto;
} .quote-body--beeld {
max-width: none;
}
@media (min-width: 768px) {
.quote-body--beeld {
align-items: center;
}
.quote-body--beeld > *:nth-child(2) {
margin-top: 0;
}
} .card__media--empty {
background-color: transparent; background-image: none;
} .card--leeg {
justify-content: space-between;
min-height: 20rem;
padding: var(--gap-sm);
} .card--leeg .card__media--empty {
place-items: start;
overflow: visible;
aspect-ratio: auto;
} .card--leeg .card__initial {
font-size: 6.5rem;
-webkit-text-stroke: 1px color-mix(in srgb, var(--color-white) 20%, transparent);
}
.section-light .card--leeg .card__initial {
-webkit-text-stroke-color: color-mix(in srgb, var(--color-black) 18%, transparent);
} .card--leeg .card__body {
flex-grow: 0;
padding: 0;
} .card__pijl {
display: inline-block;
margin-top: var(--gap-xs);
color: var(--text-on-dark-muted);
transition: transform var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.section-light .card__pijl {
color: var(--text-on-light-muted);
}
.card:focus-visible .card__pijl {
transform: translateX(6px);
color: var(--color-white);
}
@media (hover: hover) {
.card:hover .card__pijl {
transform: translateX(6px);
color: var(--color-white);
}
} .section-light .card:focus-visible .card__pijl {
color: var(--color-black);
}
@media (hover: hover) {
.section-light .card:hover .card__pijl {
color: var(--color-black);
}
} .section-statement--smal {
max-width: 22ch;
} .section-statement--onderkop {
font-size: var(--text-h3);
font-weight: var(--weight-medium);
color: var(--text-on-light-muted);
}
.section-dark .section-statement--onderkop,
.section-shadow .section-statement--onderkop,
.section-deep .section-statement--onderkop {
color: var(--text-on-dark-muted);
}  .section-title--zoals-geschreven {
text-transform: none;
} .route-sectie {
position: relative;
isolation: isolate;
}
.route-sectie__media {
position: absolute;
inset: 0;
z-index: -2;
}
.route-sectie__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.7) sepia(0.3) brightness(0.4) contrast(1.15);
}
.route-sectie__waas {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to right, color-mix(in srgb, var(--color-deep) 95%, transparent) 0%, color-mix(in srgb, var(--color-deep) 88%, transparent) 40%, color-mix(in srgb, var(--color-deep) 55%, transparent) 100%);
} .route-lijn__merk {
font-family: var(--font-sans);
font-size: 11px;
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
fill: var(--text-on-dark-muted);
} .tile {
background-image: none;
font-family: var(--font-serif);
font-size: 2.5rem;
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tighter);
color: color-mix(in srgb, var(--color-white) 18%, transparent);
} .tile--post {
display: block;
background-image: none;
transition: box-shadow var(--duration-image) var(--ease-out);
}
.tile--post img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-image) var(--ease-out);
}
.tile--post:focus-visible {
box-shadow: 0 0 3.75rem color-mix(in srgb, var(--color-lamp) 12%, transparent);
}
.tile--post:focus-visible img {
transform: scale(var(--image-zoom));
}
@media (hover: hover) {
.tile--post:hover {
box-shadow: 0 0 3.75rem color-mix(in srgb, var(--color-lamp) 12%, transparent);
}
.tile--post:hover img {
transform: scale(var(--image-zoom));
}
} .outro-kop {
max-width: 18ch;
} .channel .muted { position: relative;
margin-top: calc(var(--gap-xs) * -1);
font-family: var(--font-serif);
font-size: var(--text-h3);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-normal);
color: inherit;
} @media (min-width: 768px) {
.channel__value,
.channel .muted {
font-size: min(var(--text-h3), 3cqw);
}
}  .hero--page .section-title {
font-size: clamp(2.25rem, min(6.5vw, 9svh), 5rem);
line-height: 0.98;
} @media (max-height: 420px) and (orientation: landscape) {
.hero--page .section-title {
font-size: clamp(1.75rem, min(6.5vw, 9svh), 5rem);
}
} @media (max-height: 700px) and (orientation: portrait) {
.hero--page .section-title {
font-size: clamp(1.75rem, min(7vw, 9svh), 5rem);
}
} .route-intro__kop {
font-family: var(--font-serif);
font-size: var(--text-h2-large);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tighter);
line-height: var(--leading-tight);
margin: 0.35rem 0 0;
max-width: 16ch;
}
.route-intro__subkop {
font-family: var(--font-serif);
font-size: clamp(1.375rem, 2.2vw, 1.875rem);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tighter);
line-height: var(--leading-tight);
margin: 0;
}
.route-intro__blok {
display: grid;
gap: var(--gap-md) var(--gap-xl, 4rem);
margin-top: var(--gap-xl, 3rem);
align-items: start;
}
@media (min-width: 900px) {
.route-intro__blok { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr); }
}
.route-intro__tekst p { margin: 0; }
.route-intro__tekst p + p { margin-top: 1rem; }
@media (min-width: 1100px) { .route-intro__tekst { column-count: 2; column-gap: 3rem; }
.route-intro__tekst p { break-inside: avoid; }
}   .rondgang__band .band__track {
grid-auto-columns: min(86%, clamp(24rem, 19.6rem + 6.4vw, 26rem));
}  .card--halte {
display: grid;
grid-template-columns: minmax(0, 1fr) 7rem;
gap: var(--gap-sm);
align-items: stretch;
padding: 1.5rem;
}
.card--halte .card__body {
padding: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
}
.card__media--halte {
aspect-ratio: auto;
align-self: stretch;
border: 1px solid var(--border-light);
}
@media (max-width: 479px) {
.card--halte {
grid-template-columns: minmax(0, 1fr);
}
.card__media--halte {
aspect-ratio: 3 / 2;
align-self: auto;
}
}
.card--halte .card__initial { font-size: clamp(2.5rem, 4vw, 3.5rem); } .filter {
display: flex;
flex-wrap: wrap;
gap: var(--gap-xs);
margin-bottom: var(--gap-md); position: relative;
z-index: var(--z-base);
}
.filter__knop {
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 0.75rem;
min-height: var(--touch-min);
padding: 0 1.25rem; border: 1px solid color-mix(in srgb, var(--color-white) 40%, transparent);
border-radius: var(--radius-none);
background-color: transparent;
color: var(--color-white);
font-family: var(--font-sans);
font-size: var(--text-button);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
line-height: 1.2;
text-transform: uppercase;
text-decoration: none;
transition:
color var(--duration-button) var(--ease-out),
background-color var(--duration-button) var(--ease-out),
border-color var(--duration-button) var(--ease-out);
} .filter__knop::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--color-white);
transform: scaleY(0);
transform-origin: center bottom;
transition: transform var(--duration-button) var(--ease-out);
}
.filter__knop:focus-visible::before { transform: scaleY(1); }
.filter__knop:focus-visible {
color: var(--color-black);
border-color: var(--color-white);
}
@media (hover: hover) {
.filter__knop:hover::before { transform: scaleY(1); }
.filter__knop:hover {
color: var(--color-black);
border-color: var(--color-white);
}
} .filter__aantal {
font-size: var(--text-badge);
letter-spacing: var(--tracking-wide);
color: var(--text-on-dark-muted);
transition: color var(--duration-button) var(--ease-out);
}
.filter__knop:focus-visible .filter__aantal { color: var(--text-on-light-muted); }
@media (hover: hover) {
.filter__knop:hover .filter__aantal { color: var(--text-on-light-muted); }
} .filter__knop.is-actief,
.filter__knop.is-actief:hover,
.filter__knop.is-actief:focus-visible {
background-color: var(--color-red);
border-color: var(--color-white);
color: var(--color-white);
} .filter__knop.is-actief::before,
.filter__knop.is-actief:hover::before,
.filter__knop.is-actief:focus-visible::before { transform: scaleY(0); } .filter__knop.is-actief .filter__aantal,
.filter__knop.is-actief:hover .filter__aantal,
.filter__knop.is-actief:focus-visible .filter__aantal {
color: var(--color-white);
} .rondgang__plattegrond {
display: none;
}
@media (min-width: 768px) {
.rondgang__band,
.rondgang .band__nav {
display: none;
}
.rondgang__plattegrond {
display: grid;
gap: var(--gap-md);
margin-top: var(--gap-md);
}
} .rondgang__kaart {
justify-self: center;
width: min(100%, var(--rondgang-kaart-max));
}
@media (min-width: 1100px) {
.rondgang__plattegrond {
grid-template-columns: minmax(0, var(--rondgang-kaart-max)) minmax(18rem, 1fr);
align-items: start;
}
.rondgang__kaart {
width: 100%;
}
}
.rondgang__kaart {
position: relative;
margin: 0;
overflow: hidden;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-frame-dark);
}
.rondgang__kaart img {
display: block;
width: 100%;
height: auto;
} .kaartpunten {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.kaartpunt {
pointer-events: auto;
cursor: pointer;
} .kaartpunt--los {
cursor: default;
} .kaartpunt__vorm {
transform-box: view-box;
transform-origin: 0 0;
transition: transform var(--duration-base) var(--ease-out);
}
.kaartpunt__vlak {
fill: var(--color-red);
stroke: var(--color-white);
stroke-width: 3;
stroke-linejoin: round;
}
.kaartpunt__nr {
fill: var(--color-white);
font-family: var(--font-sans);
font-size: 19px;
font-weight: var(--weight-bold);
letter-spacing: -0.02em;
} .kaartpunt__naam {
fill: var(--color-white);
stroke: var(--color-black);
stroke-width: 6px;
stroke-linejoin: round;
paint-order: stroke;
font-family: var(--font-sans);
font-size: 26px;
font-weight: var(--weight-bold);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-base) var(--ease-out);
}
.kaartpunt.is-licht .kaartpunt__vorm,
.kaartpunt:focus-visible .kaartpunt__vorm {
transform: scale(1.3);
}
.kaartpunt.is-licht .kaartpunt__naam,
.kaartpunt:focus-visible .kaartpunt__naam {
opacity: 1;
}
@media (hover: hover) {
.kaartpunt:hover .kaartpunt__vorm {
transform: scale(1.3);
}
.kaartpunt:hover .kaartpunt__naam {
opacity: 1;
}
} .kaartpunt[hidden],
.rondgang__lijst > li[hidden] {
display: none;
}
.rondgang__lijst {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gap-xs);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 1100px) {
.rondgang__lijst {
grid-template-columns: minmax(0, 1fr);
}
} .card--kaartlijst {
flex-direction: row;
align-items: center;
gap: var(--gap-xs);
height: auto;
padding: var(--gap-xs) 0.75rem;
}
.card--kaartlijst .card__pijl {
flex: none;
margin-top: 0;
} .card--kaartlijst {
position: relative;
}
.card--kaartlijst::after {
content: "";
position: absolute;
inset: 0 0 -10px;
} .kaartlijst__nr {
flex: none;
display: block;
min-width: 3.5rem;
height: 2.5rem;
transform-origin: 50% 100%;
transition: transform var(--duration-base) var(--ease-out);
}
.kaartlijst__nr svg {
display: block;
width: auto;
height: 100%;
overflow: visible;
} @media (max-width: 899.98px) {
.card--kaartlijst {
flex-wrap: wrap;
align-items: flex-end;
row-gap: 0.5rem;
} .card--kaartlijst .kaartlijst__tekst {
flex: 1 1 calc(100% - 3rem);
}
}
.kaartlijst__tekst {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.kaartlijst__naam {
margin: 0;
font-family: var(--font-serif);
font-size: var(--text-body);
font-weight: var(--weight-bold);
line-height: 1.2;
color: var(--text-on-dark);
}
.kaartlijst__categorie {
font-family: var(--font-sans);
font-size: var(--text-body-sm);
color: var(--text-on-dark-muted);
} .card--kaartlijst.is-licht {
transform: translateY(-10px);
border-color: color-mix(in srgb, var(--color-white) 18%, transparent);
box-shadow: 0 0 3.75rem color-mix(in srgb, var(--color-lamp) 12%, transparent);
}
.card--kaartlijst.is-licht .card__pijl {
transform: translateX(6px);
color: var(--color-white);
}
.card--kaartlijst.is-licht .kaartlijst__nr,
.card--kaartlijst:focus-visible .kaartlijst__nr {
transform: scale(1.12);
}
@media (hover: hover) {
.card--kaartlijst:hover .kaartlijst__nr {
transform: scale(1.12);
}
} .is-erbij {
animation: rondgang-erbij var(--duration-base) var(--ease-out);
}
@keyframes rondgang-erbij {
from {
opacity: 0;
translate: 0 0.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
.is-erbij {
animation: none;
}
} .praktisch__kop {
display: grid;
gap: var(--gap-md) var(--gap-lg);
align-items: end;
margin-bottom: var(--gap-lg);
}
@media (min-width: 768px) {
.praktisch__kop { grid-template-columns: minmax(0, 1fr) auto; }
}
.praktisch__titel {
font-family: var(--font-serif);
font-size: var(--text-h2);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tighter);
line-height: var(--leading-tight);
margin: 0.5rem 0 0;
}
.praktisch__actie { margin: 0; }
.praktisch__lijst {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--border-dark);
}
.praktisch__rij {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: 0.5rem var(--gap-lg);
padding-block: var(--gap-md);
border-bottom: 1px solid var(--border-dark);
}
@media (min-width: 768px) {
.praktisch__rij { grid-template-columns: 14rem minmax(0, 1fr); }
}
.praktisch__label {
font-family: var(--font-sans);
font-size: var(--text-label);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
margin: 0;
display: flex;
align-items: baseline;
gap: 0.75rem;
} .praktisch__label::before {
content: "";
width: 1.25rem;
height: 2px;
background: var(--color-red);
flex: none;
transform: translateY(-0.3em);
}
.praktisch__waarde { margin: 0; }
.praktisch__waarde p { margin: 0; }
.praktisch__waarde p + p { margin-top: 1rem; }     .tijdlijn {
position: relative;
padding-left: 4.5rem;
}
.tijdlijn__lijn {
position: absolute;
left: 0;
top: 0.75rem;
bottom: 0;
width: 2rem;
}
.tijdlijn__lijn svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
} .tijdlijn__spoor {
fill: none;
stroke: color-mix(in srgb, var(--color-white) 28%, transparent);
stroke-width: 2;
stroke-dasharray: 4 8;
stroke-linecap: round;
}
.tijdlijn__getekend {
fill: none;
stroke: var(--color-red);
stroke-width: 3;
stroke-linecap: round;
}
.halte {
position: relative;
padding-block: var(--gap-lg);
}
.halte:first-of-type { padding-top: 0; }
.halte:last-of-type { padding-bottom: 0; } .halte__merk {
position: absolute;
left: -4.5rem;
top: var(--gap-lg);
width: 2rem;
display: flex;
justify-content: center;
}
.halte:first-of-type .halte__merk { top: 0; }
.halte__bol {
display: block;
margin-top: 0.75rem;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: var(--color-black);
border: 2px solid color-mix(in srgb, var(--color-white) 50%, transparent);
transition:
background-color var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
} .halte.is-actief .halte__bol {
background: var(--color-red);
border-color: var(--color-red);
transform: scale(1.35);
} .halte__inhoud {
max-width: none;
} .halte__jaar {
display: block;
font-family: var(--font-serif);
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: var(--weight-bold);
line-height: 1;
letter-spacing: var(--tracking-tighter);
color: transparent;
-webkit-text-stroke: 1px color-mix(in srgb, var(--color-white) 45%, transparent);
margin-bottom: var(--gap-xs);
transition: -webkit-text-stroke-color var(--duration-base) var(--ease-out);
}
.halte.is-actief .halte__jaar {
-webkit-text-stroke-color: var(--color-white);
}
.halte__plek {
display: block;
font-family: var(--font-sans);
font-size: var(--text-body-sm);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-on-dark-muted);
margin-bottom: var(--gap-sm);
}
.halte__titel {
font-family: var(--font-serif);
font-size: var(--text-h2-large);
font-weight: var(--weight-bold);
line-height: var(--leading-tight, 1.1);
letter-spacing: var(--tracking-tighter);
margin: 0 0 var(--gap-sm);
max-width: 24ch;
} .halte__beeld {
position: relative;
margin: 0 0 var(--gap-sm);
max-width: min(100%, var(--halte-beeld-max));
}
@media (max-width: 899px) {
.halte__beeld { max-width: 100%; }
}
.halte__beeld img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-sm);
} .halte__tekst {
max-width: var(--container-text);
}
.halte__tekst p { margin: 0 0 1.25rem; }
.halte__tekst p:last-child { margin-bottom: 0; } .halte--zonder-beeld .halte__tekst { max-width: var(--container-text); }
@media (max-width: 768px) {
.tijdlijn { padding-left: 2.5rem; }
.tijdlijn__lijn { width: 1.25rem; }
.halte { padding-block: var(--gap-md); }
.halte__merk { left: -2.5rem; width: 1.25rem; top: var(--gap-md); }
.halte__bol { width: 0.75rem; height: 0.75rem; }
} .proces-grid > *:nth-child(2) {
margin-top: 0;
}
.proces-grid {
margin-bottom: var(--gap-xl);
} .stappen {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
gap: 1px;
background: color-mix(in srgb, var(--color-black) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--color-black) 12%, transparent);
margin: 0;
padding: 0;
list-style: none;
} @media (min-width: 780px) and (max-width: 1027px) {
.stappen {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.stap {
position: relative;
display: flex;
flex-direction: column;
gap: var(--gap-xs);
padding: var(--gap-sm) 1.5rem 1.5rem;
background: var(--color-white);
transition: background-color var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
.stap:hover { background: var(--color-stap-hover); }
} .stap__nr {
font-family: var(--font-serif);
font-size: 2rem;
font-weight: var(--weight-bold);
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px color-mix(in srgb, var(--color-black) 30%, transparent);
transition: -webkit-text-stroke-color var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
.stap:hover .stap__nr { -webkit-text-stroke-color: var(--color-red); }
}
.stap__label {
font-family: var(--font-sans);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-on-light);
}
.stap__tekst {
font-family: var(--font-sans);
font-size: var(--text-body);
color: var(--text-on-light-muted);
}  .strook {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: var(--gap-md);
padding-bottom: var(--gap-xs);
border-bottom: 1px solid color-mix(in srgb, var(--color-black) 18%, transparent);
}
.section-dark .strook,
.section-shadow .strook {
border-color: color-mix(in srgb, var(--color-white) 18%, transparent);
}
.strook__tekst {
margin: 0;
max-width: 52rem;
}
.strook__titel {
font-family: var(--font-serif);
font-size: var(--text-h3);
font-weight: var(--weight-semibold);
margin: 0 0 0.35rem;
}
.strook__regel {
margin: 0;
color: var(--text-on-light-muted);
}
.section-dark .strook__regel,
.section-shadow .strook__regel {
color: var(--text-on-dark-muted);
} .strook--enkel {
grid-template-columns: minmax(0, 1fr);
max-width: 52rem;
}
@media (max-width: 700px) { .strook {
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-sm);
}
} .faciliteiten {
position: relative;
}
.faciliteiten__blok {
position: relative;
} .spatlijst {
position: relative;
z-index: 1;
list-style: none;
margin: var(--gap-md) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
} .spat {
position: relative;
} .spat::before {
content: '';
position: absolute;
left: 0.8rem;
top: 0.8rem;
z-index: 2;
width: 7px;
height: 7px;
border-radius: var(--radius-pill);
background-color: color-mix(in srgb, var(--color-white) 38%, transparent);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.spat__tekst {
position: relative;
z-index: 1;
display: block;
padding: 0.7rem 1.1rem 0.7rem 2rem;
border: 1px solid color-mix(in srgb, var(--color-white) 18%, transparent);
background-color: color-mix(in srgb, var(--color-deep) 55%, transparent);
font-size: var(--text-body);
line-height: 1.3;
color: var(--text-on-dark);
transition:
transform var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out),
background-color var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
} @media (hover: hover) { .spat__tekst:hover {
transform: translateY(-2px);
border-color: var(--color-red);
background-color: color-mix(in srgb, var(--color-deep) 78%, transparent);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
} .faciliteiten__strook {
position: relative;
z-index: 1;
margin-top: var(--gap-lg);
display: flex;
justify-content: center;
align-items: center;
gap: var(--gap-md);
}
.strookfoto {
position: relative;
margin: 0;
flex: 0 1 26rem;
min-width: 0; box-shadow:
0 0 0 1px color-mix(in srgb, var(--color-white) 16%, transparent),
0 16px 44px rgba(0, 0, 0, 0.55);
transition:
transform var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.strookfoto img {
display: block;
width: 100%;
height: auto; aspect-ratio: 16 / 9;
object-fit: cover;
}
@media (hover: hover) { .strookfoto:hover {
transform: translateY(-8px);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--color-white) 30%, transparent),
0 26px 64px rgba(0, 0, 0, 0.65);
}
}
@media (max-width: 699px) { .faciliteiten__strook {
flex-direction: column;
align-items: stretch;
gap: var(--gap-sm);
}
.strookfoto {
flex: 0 1 auto;
}
}  .consent {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-consent);
background-color: var(--color-deep);
border-top: 1px solid color-mix(in srgb, var(--color-white) 15%, transparent);
padding: var(--gap-sm) var(--container-px);
color: var(--text-on-dark); transform: translateY(100%);
transition: transform var(--duration-base) var(--ease-out);
}
.consent.is-open { transform: translateY(0); } @media (prefers-reduced-motion: reduce) {
.consent { transition: none; }
} @media (scripting: none) {
.consent { display: none; }
}
.consent__inner {
max-width: var(--container);
margin-inline: auto;
display: flex;
flex-direction: column;
gap: var(--gap-sm);
}
.consent__tekst {
font-size: var(--text-body-sm);
margin: 0;
max-width: 60ch;
}
.consent__acties {
display: flex;
flex-wrap: wrap;
gap: var(--gap-xs);
} .consent__acties .btn { flex: 1 1 8rem; } .consent__acties .btn { min-width: 0; }
@media (min-width: 700px) {
.consent__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--gap-md);
}
.consent__acties { flex: 0 0 auto; }
.consent__acties .btn { flex: 0 0 auto; }
} @media (max-width: 899px) {
body:has(.consent.is-open) .menu-toggle,
body:has(.consent.is-open) .visit-cta {
bottom: calc( var(--container-px) + var(--consent-hoogte, 0px) );
transition: bottom var(--duration-base) var(--ease-out);
}
} .luchtfoto__beeld {
margin: 0;
} .video--vol {
position: relative;
min-height: 100vh; min-height: 100dvh;
overflow: hidden;
isolation: isolate;
}
.video__start {
position: absolute;
inset: 0;
display: block;
color: inherit;
text-decoration: none;
}
.video__start img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-image) var(--ease-out);
} .video__start::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 40%;
background: linear-gradient(to top, var(--scrim-onder), transparent);
pointer-events: none;
} .video__knop {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: var(--z-base);
display: flex;
align-items: center;
justify-content: center;
width: var(--touch-min);
height: var(--touch-min);
border: 2px solid var(--color-white);
border-radius: var(--radius-pill);
background-color: var(--overlay-cta);
color: var(--color-white);
transition:
background-color var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
}
.video__knop svg {
width: 45%;
height: 45%;
margin-left: 6%; } .video__label {
position: absolute;
left: var(--container-px);
bottom: var(--container-px);
z-index: var(--z-base);
max-width: 22rem;
padding: 0.5rem 0.75rem;
background-color: var(--overlay-cta);
font-size: var(--text-body-sm);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--color-white);
} @media (max-width: 767px) {
.video__label {
left: var(--gap-xs);
right: var(--gap-xs);
bottom: var(--gap-xs);
max-width: none;
}
} .video__avg {
position: absolute;
right: var(--container-px);
bottom: var(--container-px);
z-index: var(--z-base);
max-width: 26rem;
margin: 0;
padding: 0.5rem 0.75rem;
background-color: var(--overlay-cta);
font-size: var(--text-body-sm);
line-height: var(--leading-normal);
color: var(--color-white);
text-align: right;
} @media (max-width: 767px) {
.video__avg {
left: var(--gap-xs);
right: var(--gap-xs);
bottom: var(--gap-xs);
max-width: none;
text-align: left;
}
.video__label {
bottom: calc( var(--gap-xs) + 5.5rem );
}
} .video--vol .video__speler {
position: absolute;
inset: 0; aspect-ratio: auto;
border-radius: 0;
box-shadow: none;
}
.video__speler iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
@media (min-width: 768px) {
.video__knop {
width: var(--touch-lg);
height: var(--touch-lg);
}
}
@media (hover: hover) {
.video__start:hover .video__knop {
background-color: var(--color-red);
transform: translate(-50%, -50%) scale(var(--knop-zoom));
}
.video__start:hover img {
transform: scale(var(--image-zoom));
}
}
@media (prefers-reduced-motion: reduce) {
.video__start img,
.video__knop {
transition: none;
}
.video__start:hover img {
transform: none;
}
} .kaart__kop {
margin-bottom: var(--gap-md);
} .kaart__vlak {
position: relative;
aspect-ratio: 3 / 1;
} @media (max-width: 767px) {
.kaart__vlak {
aspect-ratio: auto;
height: clamp(15rem, 39.6rem - 51.7vw, 27rem);
}
} .kaart__paneel {
position: absolute;
left: var(--container-px);
bottom: var(--container-px);
z-index: var(--z-base);
max-width: 26rem;
padding: var(--gap-xs) 0.75rem 0.75rem;
background-color: var(--overlay-cta);
}
.kaart__adres {
margin: 0 0 var(--gap-xs);
font-family: var(--font-serif);
font-size: var(--text-body-lg);
line-height: var(--leading-snug);
color: var(--color-white);
}
.kaart__acties {
display: flex;
flex-wrap: wrap;
gap: var(--gap-xs);
margin: 0;
} .kaart__avg {
margin-top: var(--gap-xs);
font-size: var(--text-body-sm);
line-height: var(--leading-normal);
color: var(--text-on-dark-muted);
}
.section-light .kaart__avg,
.section-brick-light .kaart__avg {
color: var(--text-on-light-muted);
} .kaart__vlak--live iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
@media (max-width: 767px) {
.kaart__paneel {
left: var(--gap-xs);
right: var(--gap-xs);
bottom: var(--gap-xs);
max-width: none;
} .kaart__acties .btn {
width: 100%;
justify-content: space-between;
}
} .reizen__lijst {
margin: 0;
padding: 0;
list-style: none;
} .reizen__rij {
display: grid;
gap: 0.5rem var(--gap-lg);
padding-block: var(--gap-md);
border-bottom: 1px solid var(--border-light);
}
.reizen__wijze {
margin: 0;
font-family: var(--font-sans);
font-size: var(--text-label);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
}
.reizen__tijd {
margin: 0;
font-family: var(--font-serif);
font-size: var(--text-body-lg);
line-height: var(--leading-snug);
}
.reizen__toelichting {
margin: 0;
font-size: var(--text-body-sm);
}
@media (min-width: 768px) {
.reizen__rij {
grid-template-columns: 14rem 10rem minmax(0, 1fr);
align-items: baseline;
}
}   .etalage__houder {
container-type: inline-size;
} .etalage__raster {
display: grid;
gap: var(--gap-sm);
}
.etalage__tegel {
margin: 0;
} .etalage__tegel--panorama { --tegel-ratio: 2 / 1; }
.etalage__tegel--liggend  { --tegel-ratio: 3 / 2; }
.etalage__tegel--vierkant { --tegel-ratio: 1 / 1; }
.etalage__tegel--staand   { --tegel-ratio: 4 / 5; } .etalage__vlak {
aspect-ratio: var(--tegel-ratio, 3 / 2);
} .etalage__vlak::after {
content: none;
} .etalage__vlak img {
transition: filter var(--duration-image) var(--ease-out);
}
@media (hover: hover) {
.etalage__tegel:hover .etalage__vlak img {
filter: brightness(1.08);
}
} @media (min-width: 768px) {
.etalage__raster {
--etalage-voeg: calc(100cqw / 145);
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: var(--etalage-voeg);
column-gap: var(--etalage-voeg); row-gap: 0;
}
.etalage__tegel {
grid-column: var(--tegel-kolom);
grid-row: var(--tegel-rij) / span var(--tegel-hoog);
} .etalage__vlak {
aspect-ratio: auto;
height: 100%;
}
} @supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) { .etalage__tegel {
view-timeline: --etalage-zicht block;
}
.etalage__vlak img { height: 112%;
animation: etalage-zak linear both;
animation-timeline: --etalage-zicht;
animation-range: cover 0% cover 100%;
}
} @keyframes etalage-zak {
from {
transform: translateY(-10.71%);
}
to {
transform: translateY(0);
}
}
}   .pad .halte { padding-block: var(--gap-md); }
.pad .halte:first-of-type { padding-top: 0; }
.pad .halte:last-of-type { padding-bottom: 0; }
.pad .halte__merk { top: var(--gap-md); }
.pad .halte:first-of-type .halte__merk { top: 0; } .pad .halte__nummer { letter-spacing: var(--tracking-wide); } .pad .halte__titel {
font-size: var(--text-h3);
max-width: var(--container-narrow);
} .pad .halte--zonder-beeld .halte__titel { margin-bottom: 0; } .onderweg__slot {
display: grid;
justify-items: start;
gap: var(--gap-xs);
margin-top: var(--gap-lg);
}
.onderweg__vraag {
margin: 0;
font-size: var(--text-body-lg);
}
@media (min-width: 768px) {
.onderweg__slot {
display: flex;
align-items: center;
gap: var(--gap-sm);
}
} .routefeiten__kop {
font-family: var(--font-serif);
font-size: var(--text-h3);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-normal);
line-height: var(--leading-normal);
margin: 0 0 var(--gap-md);
}
.routefeiten__lijst {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--gap-sm) var(--gap-md);
grid-template-columns: repeat(2, minmax(0, 1fr));
} @media (min-width: 768px) {
.routefeiten__lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.routefeiten__feit {
border-top: 1px solid var(--border-dark);
padding-top: var(--gap-xs);
} .routefeiten__waarde {
font-family: var(--font-serif);
font-size: var(--text-h2);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tighter);
line-height: var(--leading-none);
margin: 0;
}
.routefeiten__label {
font-family: var(--font-sans);
font-size: var(--text-body-sm);
line-height: var(--leading-normal);
color: var(--text-on-light-muted);
margin: 0.5rem 0 0;
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.routefeiten__label::before {
content: "";
width: 1rem;
height: 2px;
background: var(--color-red);
flex: none;
transform: translateY(-0.3em);
} .routefeiten__noot {
font-size: var(--text-body);
line-height: var(--leading-loose);
color: var(--text-on-light-muted);
margin: var(--gap-md) 0 0;
}  .agenda__raster,
.nieuws__raster {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-sm);
}
@media (min-width: 768px) {
.agenda__raster,
.nieuws__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
} .agenda__raster {
list-style: none;
margin: 0;
padding: 0;
}
.agenda__item { display: flex; } .agenda__item[hidden],
.card[hidden] { display: none; }  .meer {
display: flex;
justify-content: center;
margin-top: var(--gap-md);
} .meer__pijl {
display: inline-flex;
align-items: center;
}
.meer__pijl[hidden] { display: none; }  .doelen {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: var(--gap-md);
}
.doelen__item {
flex: 0 1 calc( ( 100% - var(--gap-md) ) / 2 );
}
@media (min-width: 640px) {
.doelen__item { flex-basis: calc( ( 100% - var(--gap-md) * 2 ) / 3 ); }
}
@media (min-width: 1024px) {
.doelen__item { flex-basis: calc( ( 100% - var(--gap-md) * 4 ) / 5 ); }
}
.doelen__item {
display: grid;
gap: 0.5rem;
justify-items: center;
text-align: center;
}
.doelen__link {
display: grid;
gap: 0.5rem;
justify-items: center;
text-decoration: none;
color: inherit;
} .doelen__logo {
display: grid;
place-items: center;
width: 100%;
aspect-ratio: 4 / 3; min-width: 0;
min-height: 0;
} .doelen__logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
min-width: 0;
min-height: 0;
object-fit: contain;
}
.doelen__naam {
font-family: var(--font-sans);
font-size: var(--text-body-sm);
line-height: var(--leading-normal);
}
.doelen__link:focus-visible .doelen__naam {
text-decoration: underline;
}
@media (hover: hover) {
.doelen__link:hover .doelen__naam {
text-decoration: underline;
}
}