@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/static/fonts/inter-latin-ext.woff2) format('woff2');
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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/static/fonts/inter-latin.woff2) format('woff2');
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';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/static/fonts/fraunces-latin-ext.woff2) format('woff2');
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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/static/fonts/fraunces-latin.woff2) format('woff2');
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;
}
:root {
--c-mata:      #0F3B32;
--c-mata-deep: #082621;
--c-mata-soft: #16564A;
--c-oceano:    #15616D;
--c-barro:     #A8472C;
--c-barro-br:  #C85E3E;
--c-dourado:   #C9922E;
--c-sand:      #F4EEE4;
--c-sand-deep: #E7DECD;
--c-paper:     #FFFDF9;
--c-ink:       #15211D;
--c-ink-soft:  #55615C;
--c-licht:     #E8E4DB;
--c-dourado-br:#DBA43F;
--c-paper-rgb:     255 253 249;
--c-mata-deep-rgb: 8 38 33;
--c-mata-soft-rgb: 22 86 74;
--c-dourado-rgb:   201 146 46;
--c-barro-rgb:     168 71 44;
--c-licht-rgb:     232 228 219;
--c-ink-rgb:       21 33 29;
--bg: var(--c-paper);
--bg-alt: var(--c-sand);
--text: var(--c-ink);
--text-muted: var(--c-ink-soft);
--heading: var(--c-mata);
--link: var(--c-oceano);
--accent: var(--c-dourado);
--accent-tekst: #8A5F14;
--focus: var(--accent-tekst);
--border: var(--c-sand-deep);
--ff-head: "Fraunces", Georgia, "Times New Roman", serif;
--ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--f-xs:   0.6875rem;
--f-sm:   clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);
--f-ui:   0.95rem;
--f-base: 1rem;
--f-md:   1.0625rem;
--f-body: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
--f-lead: clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);
--f-logo: 1.3rem;
--f-h3:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
--f-h2:   clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
--f-h1:   clamp(2rem, 1.6rem + 2.2vw, 3.25rem);
--f-hero: clamp(2.125rem, 1.5rem + 3.4vw, 4rem);
--lh-body: 1.65;
--lh-head: 1.14;
--measure: 68ch;
--s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
--s-5: 1.5rem; --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;
--s-9: 6rem;
--r-sm: 2px; --r-md: 6px; --r-lg: 12px; --r-pill: 999px;
--shadow: 0 1px 2px rgb(21 33 29 / .05), 0 8px 24px rgb(21 33 29 / .06);
--wrap: 1180px;
--gutter: 1rem;
--snel: 160ms ease-out;
}
@media (min-width: 48rem) { :root { --gutter: 2rem; } }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0C1714;
--bg-alt: #132420;
--text: var(--c-licht);
--text-muted: #9AA6A0;
--heading: #BFD8CF;
--link: #6FBFC9;
--accent-tekst: var(--c-dourado);
--border: #243A34;
}
}
:root[data-theme="dark"] {
--bg: #0C1714;
--bg-alt: #132420;
--text: var(--c-licht);
--text-muted: #9AA6A0;
--heading: #BFD8CF;
--link: #6FBFC9;
--accent-tekst: var(--c-dourado);
--border: #243A34;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--ff-body);
font-size: var(--f-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--ff-head);
color: var(--heading);
line-height: var(--lh-head);
font-weight: 600;
text-wrap: balance;
}
h1 { font-size: var(--f-h1); letter-spacing: -.015em; }
h2 { font-size: var(--f-h2); letter-spacing: -.01em; }
h3 { font-size: var(--f-h3); }
p { text-wrap: pretty; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
border-radius: var(--r-sm);
}
.paginakop, .voet, .lightbox { --focus: var(--c-dourado); }
.visueel-verborgen {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.overslaan {
position: absolute; left: -9999px; top: var(--s-2);
background: var(--c-mata); color: var(--c-paper);
padding: var(--s-2) var(--s-4); border-radius: var(--r-md); z-index: 100;
}
.overslaan:focus { left: var(--s-4); }
.wrap {
width: min(100% - var(--gutter) * 2, var(--wrap));
margin-inline: auto;
}
.sectie { padding-block: var(--s-8); }
@media (min-width: 48rem) { .sectie { padding-block: var(--s-9); } }
.sectie--zand { background: var(--bg-alt); }
.sectie--mata { background: var(--c-mata); color: var(--c-licht); }
.sectie--mata h2 { color: var(--c-paper); }
.sectie__kop {
display: flex; flex-wrap: wrap; gap: var(--s-4);
align-items: end; justify-content: space-between;
margin-bottom: var(--s-6);
}
.sectie__intro { color: var(--text-muted); max-width: 46ch; margin-top: var(--s-2); }
.raster { display: grid; gap: var(--s-5); }
@media (max-width: 39.99rem) {
.raster--compact { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.raster--compact .kaart__tekst { padding: var(--s-3); gap: var(--s-1); }
.raster--compact .kaart__titel { font-size: var(--f-base); }
.raster--compact .kaart__intro, .raster--compact .kaart__pijler, .raster--compact .kaart__reistijd { display: none; }
.raster--compact .kaart__meta { font-size: var(--f-xs); }
}
@media (min-width: 40rem) { .raster--3, .raster--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }
}
.kop {
background: var(--bg);
color: var(--heading);
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 50;
}
.kop__binnen {
display: flex; align-items: center; gap: var(--s-3);
min-height: 5rem;
}
html:not(.js) .kop__binnen { flex-wrap: wrap; }
@media (min-width: 64rem) { .kop__binnen { gap: var(--s-5); } }
.merk {
color: inherit; text-decoration: none;
display: flex; align-items: center; gap: var(--s-3);
padding-block: var(--s-2);
}
.merk__mark { flex: none; display: block; width: 52px; height: 52px; }
.merk__woord { display: flex; flex-direction: column; line-height: 1.1; }
.merk__naam { font-family: var(--ff-head); font-size: var(--f-logo); letter-spacing: -.01em; font-weight: 400; }
.merk__naam strong { font-weight: 600; }
.merk__tld { color: var(--c-barro); }
.merk__payoff {
font-size: var(--f-xs); letter-spacing: .13em; text-transform: uppercase;
color: var(--text-muted); margin-top: .22em;
}
@media (max-width: 26rem) { .merk__payoff { display: none; } }
.nav { margin-inline-start: auto; flex-basis: 100%; order: 10; }
.nav ul { flex-wrap: wrap; gap: var(--s-3) var(--s-4); padding-bottom: var(--s-3); }
.js .nav { display: none; }
.nav ul { display: flex; list-style: none; padding: 0; margin: 0; }
.nav a {
color: var(--heading); text-decoration: none; font-size: var(--f-ui);
padding-block: var(--s-2); border-bottom: 2px solid transparent;
transition: border-color var(--snel);
}
.nav a:hover { border-color: var(--c-barro); }
.js .nav--open {
display: block; position: absolute; left: 0; right: 0; top: 100%;
background: var(--bg); padding: var(--s-4) var(--gutter);
border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
}
.nav--open ul { flex-direction: column; gap: var(--s-1); padding-bottom: 0; }
.nav--open a { display: block; padding: var(--s-3) 0; border-bottom: 0; }
@media (min-width: 64rem) {
.nav, .js .nav { display: block; flex-basis: auto; order: 0; }
.nav ul { flex-wrap: nowrap; gap: var(--s-5); padding-bottom: 0; }
}
.zoekknop, .menuknop {
flex: none; background: none; border: 0; color: inherit; cursor: pointer;
width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
}
.menuknop { margin-inline-start: auto; }
html:not(.js) .menuknop { display: none; }
.menuknop span { display: block; width: 20px; height: 2px; background: currentColor; margin: 2.5px 0; }
.zoekknop { text-decoration: none; }
@media (min-width: 64rem) { .menuknop { display: none; } .zoekknop { margin-inline-start: var(--s-2); } }
.paginakop { position: relative; background: var(--c-mata-deep); overflow: hidden; isolation: isolate; }
.paginakop__beeld { position: absolute; inset: 0; }
.paginakop__beeld picture, .paginakop__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.paginakop__img { opacity: .74; }
.paginakop::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgb(var(--c-mata-deep-rgb) / .15) 0%, rgb(var(--c-mata-deep-rgb) / .35) 55%, rgb(var(--c-mata-deep-rgb) / .85) 100%);
}
.paginakop__inhoud { position: relative; z-index: 1; color: var(--c-paper); }
.paginakop__ai {
position: absolute; right: var(--s-3); top: var(--s-2); z-index: 2;
font-size: var(--f-sm); color: rgb(var(--c-paper-rgb) / .8);
}
.paginakop__inhoud h1 { color: var(--c-paper); }
.paginakop__soort {
font-size: var(--f-sm); letter-spacing: .09em; text-transform: uppercase;
color: var(--c-dourado); margin-top: var(--s-3);
}
.paginakop--pagina .paginakop__inhoud { padding-block: clamp(var(--s-7), 14vw, 10rem) var(--s-6); }
.paginakop--pagina h1 { font-size: var(--f-hero); margin-top: var(--s-2); }
.paginakop__byline { margin-top: var(--s-3); font-size: var(--f-sm); color: rgb(var(--c-paper-rgb) / .85); }
.paginakop__byline a { color: inherit; text-decoration-color: rgb(var(--c-dourado-rgb) / .8); }
.paginakop--pijler .paginakop__img { opacity: .62; }
.paginakop--pijler::after { background: linear-gradient(180deg, rgb(var(--c-mata-deep-rgb) / .4), rgb(var(--c-mata-deep-rgb) / .82)); }
.paginakop--pijler .paginakop__inhoud { padding-block: var(--s-5) var(--s-8); }
.paginakop--pijler h1 { margin-top: var(--s-4); }
.paginakop--pijler p { max-width: 54ch; margin-top: var(--s-4); color: rgb(var(--c-paper-rgb) / .9); font-size: var(--f-lead); }
.paginakop--home .paginakop__img { opacity: .72; }
.paginakop--home::after { background: linear-gradient(180deg, rgb(var(--c-mata-deep-rgb) / .45) 0%, rgb(var(--c-mata-deep-rgb) / .62) 55%, rgb(var(--c-mata-deep-rgb) / .9) 100%); }
.paginakop--home .paginakop__inhoud { padding-block: clamp(var(--s-8), 12vw, 9rem); }
.paginakop--home .paginakop__inhoud > * { max-width: 44rem; }
.paginakop__kicker { font-size: var(--f-sm); letter-spacing: .09em; text-transform: uppercase; color: var(--c-dourado); margin-bottom: var(--s-3); }
.paginakop__titel { font-size: var(--f-hero); }
.paginakop__intro { font-size: var(--f-lead); margin-top: var(--s-4); max-width: 38ch; color: rgb(var(--c-paper-rgb) / .88); }
.paginakop__acties { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.paginakop__zoek { display: flex; gap: var(--s-2); margin-top: var(--s-5); max-width: 34rem; }
.paginakop__zoek input {
flex: 1; min-width: 0; min-height: 2.75rem; padding: var(--s-2) var(--s-4);
font: inherit; color: var(--c-ink); background: var(--c-paper);
border: 1px solid transparent; border-radius: var(--r-md);
}
.paginakop__zoek input:focus-visible { outline: 2px solid var(--c-dourado); outline-offset: 2px; }
.paginakop--home .paginakop__acties { margin-top: var(--s-4); }
.kruimel { font-size: var(--f-sm); color: var(--text-muted); padding-top: var(--s-5); }
.kruimel a { color: var(--text-muted); text-decoration: none; }
.kruimel a:hover { color: var(--link); text-decoration: underline; }
.kruimel span[aria-hidden] { margin-inline: .35em; opacity: .6; }
.kruimel--op-beeld, .kruimel--op-beeld a { color: rgb(var(--c-paper-rgb) / .85); }
.knop {
display: inline-flex; align-items: center; gap: var(--s-2);
min-height: 2.75rem; padding: var(--s-3) var(--s-5);
border-radius: var(--r-md); text-decoration: none;
font-weight: 500; transition: background var(--snel), border-color var(--snel);
}
:where(button.knop) { border: 0; background: none; cursor: pointer; font: inherit; }
.knop--primair { background: var(--c-dourado); color: var(--c-mata-deep); }
.knop--primair:hover { background: var(--c-dourado-br); }
.knop--secundair { border: 1px solid rgb(var(--c-paper-rgb) / .5); color: var(--c-paper); }
.knop--secundair:hover { border-color: var(--c-paper); background: rgb(var(--c-paper-rgb) / .08); }
.knop--licht { background: var(--c-paper); color: var(--c-mata); margin-top: var(--s-5); }
.knop--tekst { padding: 0; color: var(--link); white-space: nowrap; }
.pijlers { background: var(--bg); border-bottom: 1px solid var(--border); }
.pijlers__raster {
display: grid; gap: 1px; background: var(--border);
border-inline: 1px solid var(--border);
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem) { .pijlers__raster { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .pijlers__raster { grid-template-columns: repeat(6, 1fr); } }
.pijler {
background: var(--bg); padding: var(--s-5) var(--s-4);
text-decoration: none; color: var(--text);
display: flex; flex-direction: column; gap: var(--s-2);
border-top: 3px solid transparent;
transition: background var(--snel), border-color var(--snel);
}
.pijler:hover { background: var(--bg-alt); }
.pijler--mata:hover   { border-top-color: var(--c-mata-soft); }
.pijler--oceano:hover { border-top-color: var(--c-oceano); }
.pijler--barro:hover  { border-top-color: var(--c-barro); }
.pijler--dourado:hover{ border-top-color: var(--c-dourado); }
.pijler__naam { font-family: var(--ff-head); font-size: var(--f-md); color: var(--heading); }
.pijler__intro { font-size: var(--f-sm); color: var(--text-muted); line-height: 1.5; }
.kaart {
display: flex; flex-direction: column;
background: var(--bg); color: var(--text); text-decoration: none;
border: 1px solid var(--border); border-radius: var(--r-md);
overflow: hidden; transition: border-color var(--snel), transform var(--snel);
}
.kaart:hover { border-color: var(--c-mata-soft); transform: translateY(-2px); }
.kaart__beeld picture { display: block; }
.kaart__beeld img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.kaart__tekst { padding: var(--s-4) var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.kaart__titel { font-size: var(--f-h3); }
.kaart__intro { font-size: var(--f-ui); color: var(--text-muted); }
.kaart__meta, .kaart__pijler {
font-size: var(--f-sm); color: var(--text-muted);
letter-spacing: .04em; text-transform: uppercase;
}
.kaart__pijler { color: var(--c-barro); }
.kaart__reistijd { font-size: var(--f-sm); color: var(--text); margin-top: auto; padding-top: var(--s-3); }
.kaart__reistijd span { color: var(--text-muted); display: block; text-transform: uppercase; letter-spacing: .04em; }
.img-leeg { background: var(--bg-alt); width: 100%; }
.rmeta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: auto; padding-top: var(--s-3);
font-size: var(--f-sm); color: var(--text-muted); }
.rmeta li { display: inline-flex; align-items: center; gap: .3em; }
.rmeta__i { color: var(--c-barro); }
.plan__kaart {
display: flex; flex-direction: column; gap: var(--s-2);
padding: var(--s-5); text-decoration: none; color: var(--text);
background: var(--bg-alt); border-radius: var(--r-md);
border: 1px solid transparent; transition: border-color var(--snel);
}
.plan__kaart:hover { border-color: var(--c-barro); }
.plan__kaart strong { font-family: var(--ff-head); font-size: var(--f-h3); color: var(--heading); font-weight: 600; }
.plan__kaart span:last-child { font-size: var(--f-ui); color: var(--text-muted); }
.plan__icoon { font-size: var(--f-h3); color: var(--c-barro); line-height: 1; }
.affiliate-melding {
margin-top: var(--s-6); padding: var(--s-4) var(--s-5);
border-inline-start: 3px solid var(--c-dourado);
background: var(--bg-alt); border-radius: 0 var(--r-md) var(--r-md) 0;
font-size: var(--f-sm); color: var(--text-muted); max-width: var(--measure);
}
.adslot {
display: grid; place-items: center;
margin-block: var(--s-7);
border: 1px dashed var(--border); border-radius: var(--r-md);
background: var(--bg-alt);
}
.adslot--breed { min-height: 100px; }
@media (min-width: 48rem) { .adslot--breed { min-height: 90px; } }
.adslot__label {
font-size: var(--f-sm); color: var(--text-muted);
letter-spacing: .08em; text-transform: uppercase;
}
.adslot--vierkant { min-height: 250px; margin-block: var(--s-6); }
.adslot:has(ins) {
border: 0; background: transparent; display: block;
}
.adslot ins { display: block; width: 100%; }
.adslot--breed:has(ins) { min-height: 250px; }
@media (min-width: 48rem) { .adslot--breed:has(ins) { min-height: 90px; } }
.adslot:has(ins[data-ad-status="unfilled"]) { display: none; }
.over { display: grid; gap: var(--s-7); }
@media (min-width: 56rem) { .over { grid-template-columns: 1.3fr 1fr; align-items: center; } }
.over p { max-width: 50ch; margin-top: var(--s-4); color: rgb(var(--c-licht-rgb) / .85); }
.over__cijfers { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, 1fr); }
.over__cijfers div { display: flex; flex-direction: column; gap: var(--s-1); }
.over__cijfers strong { font-family: var(--ff-head); font-size: var(--f-h2); color: var(--c-dourado); font-weight: 600; }
.over__cijfers span { font-size: var(--f-sm); color: rgb(var(--c-licht-rgb) / .75); }
.voet { background: var(--c-mata-deep); color: rgb(var(--c-licht-rgb) / .8); padding-block: var(--s-8) var(--s-5); }
.voet__raster { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 56rem) { .voet__raster { grid-template-columns: repeat(4, 1fr); } }
.voet__kop { font-size: var(--f-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--c-dourado); margin-bottom: var(--s-3); }
.voet ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.voet a { color: inherit; text-decoration: none; font-size: var(--f-ui); }
.voet a:hover { color: var(--c-paper); text-decoration: underline; }
.voet__linkknop { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: var(--f-ui); color: inherit; cursor: pointer; text-align: left; }
.voet__linkknop:hover { color: var(--c-paper); text-decoration: underline; }
.voet__linkknop[hidden] { display: none; }
.voet__onder {
margin-top: var(--s-7); padding-top: var(--s-4);
border-top: 1px solid rgb(var(--c-licht-rgb) / .15);
display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between;
font-size: var(--f-sm); color: rgb(var(--c-licht-rgb) / .6);
}
.gang + .gang { margin-top: var(--s-8); }
.gang { scroll-margin-top: 5rem; }
.gang__kop {
font-size: var(--f-h3); padding-bottom: var(--s-3); margin-bottom: var(--s-5);
border-bottom: 2px solid var(--c-dourado); display: inline-block;
}
.gang__kaart { display: contents; }
.gang__kaart.is-verborgen, .gang.is-leeg { display: none; }
.leeg { color: var(--text-muted); }
.sectie--compact { padding-bottom: 0; }
#cassave { scroll-margin-top: 5rem; }
.keuken__uitleg { margin: 0 0 var(--s-6); }
.snelkeuze { padding-top: var(--s-6); }
.snelkeuze__lijst { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.snelkeuze__knop {
display: inline-flex; align-items: center; min-height: 2.5rem; padding: var(--s-1) var(--s-4);
border: 1px solid var(--border); border-radius: 999px; background: var(--bg-alt);
color: var(--c-barro); font: inherit; font-size: var(--f-sm); font-weight: 600; text-decoration: none; cursor: pointer;
}
.snelkeuze__knop:hover { border-color: var(--c-barro); }
.snelkeuze__knop:focus-visible { outline: 2px solid var(--c-oceano); outline-offset: 2px; }
.snelkeuze__knop--filter[aria-pressed="true"] { background: var(--c-mata); border-color: var(--c-mata); color: var(--c-paper); }
.snelkeuze__melding { margin-top: var(--s-3); font-size: var(--f-sm); color: var(--text-muted); }
.recept-feiten {
display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center;
justify-content: space-between;
background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
padding: var(--s-5); margin-top: calc(var(--s-6) * -1); position: relative; z-index: 2;
box-shadow: var(--shadow);
}
.recept-feiten__cijfers { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-6); }
.recept-feiten__cijfers div { display: flex; flex-direction: column; gap: .2em; }
.kg__label { font-size: var(--f-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.kg__waarde { font-family: var(--ff-head); font-size: var(--f-md); color: var(--heading); }
.recept__print { border-color: var(--border); color: var(--heading); white-space: nowrap; }
.recept__print:hover { border-color: var(--c-mata); background: var(--bg-alt); }
.recept__body {
display: grid; gap: var(--s-6); padding-block: var(--s-7) var(--s-9);
grid-template-areas: "intro" "zij" "bereiding" "verhaal";
}
@media (min-width: 64rem) {
.recept__body {
grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--s-6) var(--s-8); align-items: start;
grid-template-areas:
"intro    zij"
"bereiding zij"
"verhaal  zij";
}
}
.recept__intro { grid-area: intro; font-size: var(--f-lead); color: var(--text); max-width: var(--measure); }
.recept__verhaal { grid-area: verhaal; }
.recept__verhaal h2 { font-size: var(--f-h2); margin-top: var(--s-6); margin-bottom: var(--s-3); }
.recept__verhaal p { margin-bottom: var(--s-4); max-width: var(--measure); }
.recept__verhaal h3 { font-size: var(--f-h3); margin: var(--s-5) 0 var(--s-2); }
.recept__verhaal ul { display: grid; gap: var(--s-2); padding-inline-start: 1.2em; margin-bottom: var(--s-4); max-width: var(--measure); }
.recept__verhaal li::marker { color: var(--c-dourado); }
.verhaal-foto { margin: var(--s-4) 0 var(--s-5); max-width: var(--measure); }
.verhaal-foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); }
.verhaal-foto figcaption { margin-top: var(--s-2); font-size: var(--f-sm); color: var(--text-muted); }
.bereiding { grid-area: bereiding; }
.equipment { margin-top: var(--s-6); }
.equipment h3 { font-size: var(--f-base); color: var(--c-barro); margin-bottom: var(--s-2); }
.equipment ul { display: grid; gap: var(--s-1); font-size: var(--f-ui); color: var(--text-muted); list-style: none; padding: 0; }
.equipment li { padding-inline-start: 1em; position: relative; }
.equipment li::before { content: "·"; position: absolute; left: .2em; }
.recept__zij { grid-area: zij; display: grid; gap: var(--s-5); }
@media (min-width: 64rem) { .recept__zij { position: sticky; top: 2rem; } }
.ingr-kaart { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); background: var(--bg); }
.ingredienten__kop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.ingr__groep { font-size: var(--f-base); color: var(--c-barro); margin-top: var(--s-4); }
.ingr__lijst { display: grid; gap: var(--s-1); margin-top: var(--s-3); }
.ingr label { display: grid; grid-template-columns: auto 1fr; gap: .6em; align-items: start;
padding: var(--s-2) 0; cursor: pointer; border-bottom: 1px solid var(--border); }
.ingr__vink { width: 1.05em; height: 1.05em; margin-top: .25em; accent-color: var(--c-mata-soft); }
.ingr__hoev { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--heading); white-space: nowrap; }
.ingr__prod { color: var(--text); }
.ingr__opm { display: block; font-size: var(--f-sm); color: var(--text-muted); }
.ingr__vink:checked + .ingr__tekst, .ingr__vink:checked + .ingr__tekst * { color: var(--text-muted); text-decoration: line-through; }
.bereiding > h2 { margin-bottom: var(--s-5); }
.stappen { display: grid; gap: var(--s-5); counter-reset: stap; }
.stap { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; }
.stap__nr {
width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none;
display: grid; place-items: center;
background: var(--c-mata); color: var(--c-paper);
font-family: var(--ff-head); font-size: var(--f-md);
}
.stap__tekst p { max-width: 60ch; }
.stap__groep { font-size: var(--f-base); color: var(--c-barro); margin: var(--s-6) 0 var(--s-4); }
.bereiding > h2 + .stap__groep { margin-top: 0; }
.stap__groep + .stappen, .stappen + .stappen { margin-top: 0; }
.notitie { margin-top: var(--s-6); padding: var(--s-4) var(--s-5);
border-inline-start: 3px solid var(--c-dourado); background: var(--bg-alt);
border-radius: 0 var(--r-md) var(--r-md) 0; }
.notitie--tip { border-color: var(--c-dourado); }
.notitie__kop { font-size: var(--f-base); margin-bottom: var(--s-2); }
.notitie .tips { display: grid; gap: var(--s-2); list-style: disc; padding-inline-start: 1.1em; }
.notitie .tips li::marker { color: var(--c-dourado); }
.printband, .printvoet { display: none; }
.affiliate-melding--compact { margin-top: 0; }
.allergenen { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.allergenen h3 { font-size: var(--f-base); color: var(--c-barro); margin-bottom: var(--s-2); }
.allergenen__regel { font-size: var(--f-sm); margin-top: var(--s-2); }
.allergenen__kop { color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.allergenen__lijst { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.allergenen__chip {
font-size: var(--f-sm); padding: .2em .7em; border-radius: var(--r-pill);
background: var(--bg-alt); border: 1px solid var(--c-barro); color: var(--text);
}
.allergenen__chip--kan { border-style: dashed; border-color: var(--border); color: var(--text-muted); }
.allergenen__noot { margin-top: var(--s-3); font-size: var(--f-sm); color: var(--text-muted); }
.alcoholmelding {
display: flex; gap: var(--s-4); align-items: center;
margin-top: var(--s-5); padding: var(--s-4) var(--s-5);
background: var(--bg-alt); border-inline-start: 3px solid var(--c-barro);
border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--f-ui);
}
.alcoholmelding__badge {
flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
border: 2px solid var(--c-barro); border-radius: 50%;
font-family: var(--ff-head); font-weight: 700; color: var(--c-barro);
}
.reageren { background: var(--bg-alt); padding-block: var(--s-7); }
.reageren__binnen { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.reageren h2 { margin-bottom: var(--s-4); }
.reageren__kop { font-size: var(--f-h3); margin: var(--s-6) 0 var(--s-3); }
.reageren__gemaakt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.reageren__teller { color: var(--text-muted); }
.reageren__gemaakt .knop[disabled] { cursor: default; opacity: .75; }
.reageren__melding { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
border-inline-start: 3px solid var(--c-mata-soft); background: var(--bg); }
.reageren__melding--fout { border-color: var(--c-barro); }
.reacties { display: grid; gap: var(--s-4); }
.reactie { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); }
.reactie--variant { border-inline-start: 3px solid var(--c-dourado); }
.reactie__wie { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.reactie__datum { font-size: var(--f-sm); color: var(--text-muted); }
.reactie__label { font-size: var(--f-sm); color: var(--accent-tekst); border: 1px solid var(--c-dourado);
border-radius: var(--r-pill); padding: 0 .6em; }
.reactie__tekst p { margin-top: var(--s-2); }
.reactie__foto { display: inline-block; margin-top: var(--s-3); }
.reactie__foto img { max-width: min(100%, 22rem); height: auto; border-radius: var(--r-md); }
.veld input[type="file"] { font: inherit; font-size: var(--f-ui); }
.reactieformulier { display: grid; gap: var(--s-4); }
.reactieformulier__uitleg { color: var(--text-muted); font-size: var(--f-ui); }
.veld { display: grid; gap: var(--s-1); }
.veld em { color: var(--text-muted); font-style: normal; font-size: var(--f-sm); }
.veld input[type="text"], .veld textarea {
font: inherit; color: var(--text); background: var(--bg); width: 100%;
border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-2) var(--s-3);
}
.veld input[type="text"]:focus-visible, .veld textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.veld--vink { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-2); }
.veld--vink input { width: 1.1em; height: 1.1em; accent-color: var(--c-mata-soft); }
.veld--verborgen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reactieformulier .knop { justify-self: start; }
.lezer { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); background: var(--bg);
border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); text-decoration: none; }
.lezer:hover { border-color: var(--c-mata-soft); }
.lezer__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); }
.lezer__tekst { font-family: var(--ff-head); font-style: italic; }
.lezer__wie { font-size: var(--f-sm); color: var(--text-muted); }
.lezer__wie strong { color: var(--heading); }
.klimaat {
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--s-5) var(--s-5) var(--s-4);
}
.klimaat__kop {
display: flex; flex-wrap: wrap; gap: var(--s-3);
align-items: baseline; justify-content: space-between;
margin-bottom: var(--s-4);
}
.klimaat__kop h2 { font-size: var(--f-h3); }
.klimaat__best {
font-size: var(--f-sm); color: var(--text-muted);
}
.klimaat__best strong { color: var(--accent-tekst); font-family: var(--ff-head); }
.klimaat__grafiek { width: 100%; overflow-x: auto; }
.klimaat-svg { width: 100%; min-width: 560px; height: auto; display: block; }
.klimaat-best { fill: var(--c-dourado); opacity: .12; }
.klimaat-regen { fill: var(--c-oceano); opacity: .55; }
.klimaat-mm { fill: var(--text-muted); font-size: 11px; text-anchor: middle; }
.klimaat-band { fill: var(--c-barro); opacity: .1; }
.klimaat-lijn { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.klimaat-lijn--hoog { stroke: var(--c-barro); }
.klimaat-lijn--laag { stroke: var(--c-oceano); }
.klimaat-dot--hoog { fill: var(--c-barro); }
.klimaat-dot--laag { fill: var(--c-oceano); }
.klimaat-temp { font-size: 12.5px; text-anchor: middle; font-variant-numeric: tabular-nums; font-weight: 600; }
.klimaat-temp--hoog { fill: var(--c-barro); }
.klimaat-temp--laag { fill: var(--c-oceano); }
.klimaat-maand { fill: var(--heading); font-size: 13px; text-anchor: middle; font-family: var(--ff-head); }
.klimaat-icoon { font-size: 15px; text-anchor: middle; }
.klimaat__legenda {
display: flex; flex-wrap: wrap; gap: var(--s-4);
margin-top: var(--s-3); font-size: var(--f-sm); color: var(--text-muted);
}
.klimaat__legenda span { display: inline-flex; align-items: center; gap: .4em; }
.klimaat__legenda i { width: .9em; height: .9em; border-radius: 2px; display: inline-block; }
.lg-dag { background: var(--c-barro); }
.lg-nacht { background: var(--c-oceano); }
.lg-regen { background: var(--c-oceano); opacity: .55; }
.lg-best { background: var(--c-dourado); opacity: .4; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .klimaat-band { opacity: .18; }
:root:not([data-theme="light"]) .klimaat-best { opacity: .2; }
}
.best-feiten {
display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4);
background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
padding: var(--s-5); margin-top: calc(var(--s-6) * -1); position: relative; z-index: 2;
box-shadow: var(--shadow);
}
@media (min-width: 48rem) { .best-feiten { grid-template-columns: repeat(4, 1fr); } }
.best-feiten > div { display: flex; flex-direction: column; gap: .2em; }
.bf__label { font-size: var(--f-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.bf__waarde { font-family: var(--ff-head); color: var(--heading); font-size: var(--f-md); }
.best-body { display: grid; gap: var(--s-7); padding-block: var(--s-8); }
.best-body > *, .best-zij > * { min-width: 0; }
@media (min-width: 64rem) { .best-body { grid-template-columns: 1fr 22rem; gap: var(--s-8); align-items: start; } }
.best-intro { font-size: var(--f-lead); color: var(--text); max-width: var(--measure); }
.best-intro p { margin-bottom: var(--s-4); }
.best-inhoud .art-kernpunten { margin: 0 0 var(--s-7); z-index: auto; }
.best-sectie { margin-top: var(--s-7); max-width: var(--measure); }
.best-sectie h2 { font-size: var(--f-h2); margin-bottom: var(--s-4); }
.best-sectie h3 { font-size: var(--f-h3); color: var(--heading); font-family: var(--ff-head);
margin-top: var(--s-6); margin-bottom: var(--s-2); line-height: var(--lh-head); }
.best-sectie p { margin-bottom: var(--s-4); }
.best-sectie ul { margin: 0 0 var(--s-4) var(--s-5); display: grid; gap: var(--s-2); list-style: disc; }
.best-sectie ol { margin: 0 0 var(--s-4) var(--s-5); display: grid; gap: var(--s-2); list-style: decimal; }
.best-sectie li::marker { color: var(--c-barro); }
.best-inline { margin: var(--s-6) 0; }
.best-inline picture, .best-inline img { border-radius: var(--r-md); width: 100%; }
.best-inline figcaption { font-size: var(--f-sm); color: var(--text-muted); margin-top: var(--s-2); }
@media (min-width: 64rem) { .best-zij { position: sticky; top: 6rem; display: grid; gap: var(--s-6); } }
.best-zij { display: grid; gap: var(--s-6); }
.reis-regelen { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); }
.reis-regelen h2 { font-size: var(--f-h3); margin-bottom: var(--s-3); }
.reis-regelen ul { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.reis-regelen li { padding-inline-start: 1.1em; position: relative; }
.reis-regelen li::before { content: "→"; position: absolute; left: 0; color: var(--c-barro); }
.galerij { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 40rem) { .galerij { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .galerij { grid-template-columns: repeat(4, 1fr); } }
.galerij__item { padding: 0; border: 0; cursor: pointer; background: var(--bg-alt);
border-radius: var(--r-md); overflow: hidden; }
.galerij__item picture, .galerij__item img { width: 100%; height: 100%; object-fit: cover;
transition: transform var(--snel); }
.galerij__item:hover img { transform: scale(1.05); }
.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0;
background: rgb(var(--c-mata-deep-rgb) / .92); padding: var(--s-5); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox__img { max-width: 100%; max-height: 90vh; border-radius: var(--r-md); object-fit: contain; }
.lightbox__sluit { position: absolute; top: var(--s-4); right: var(--s-4);
width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; cursor: pointer;
background: rgb(var(--c-paper-rgb) / .15); color: var(--c-paper); font-size: var(--f-md); }
.lightbox__sluit:hover { background: rgb(var(--c-paper-rgb) / .28); }
.ds-strip { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.ds-strip a {
display: inline-flex; align-items: center; gap: .5em; padding: .35em .7em;
border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg);
font-size: var(--f-sm); color: var(--heading); text-decoration: none;
}
.ds-strip a:hover { border-color: var(--c-mata); background: var(--bg-alt); }
.ds-strip img { border-radius: var(--r-sm); display: block; }
.ds-feiten__vlag { display: flex; align-items: center; }
.ds-feiten__vlag img {
width: 72px; height: auto; border: 1px solid var(--border);
border-radius: var(--r-sm); box-shadow: var(--shadow); display: block;
}
.ds-intro { max-width: var(--measure); font-size: var(--f-lead); color: var(--text); padding-block: var(--s-6) var(--s-5); }
.ds-intro p { margin-bottom: var(--s-4); }
.faq { margin-top: var(--s-7); max-width: var(--measure); }
.faq > h2 { font-size: var(--f-h2); margin-bottom: var(--s-4); }
.faq__item {
border-bottom: 1px solid var(--border);
}
.faq__item summary {
cursor: pointer; list-style: none;
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
padding: var(--s-4) 0;
font-family: var(--ff-head); font-size: var(--f-h3); color: var(--heading);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; flex: none;
font-size: 1.4em; line-height: 1; color: var(--c-barro);
transition: transform var(--snel, 150ms) ease-out;
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__item summary:hover { color: var(--c-mata-soft); }
.faq__item:focus-within summary { outline: 2px solid var(--focus); outline-offset: 2px; }
.faq__antwoord { padding: 0 0 var(--s-4); color: var(--text); }
.faq__antwoord p { margin-bottom: var(--s-3); }
.faq__antwoord > :last-child { margin-bottom: 0; }
.tekstpagina { padding-block: var(--s-6) var(--s-8); }
.tekstpagina__wrap { max-width: var(--measure); }
.tekstpagina .kruimel { padding-top: 0; }
.tekstpagina h1 { margin-top: var(--s-4); }
.tekstpagina__intro { font-size: var(--f-lead); margin-top: var(--s-4); }
.tekstpagina__datum { font-size: var(--f-sm); color: var(--text-muted); margin-top: var(--s-3); }
.tekstpagina__body h2 { margin-top: var(--s-7); margin-bottom: var(--s-3); }
.tekstpagina__body h3 { margin-top: var(--s-5); margin-bottom: var(--s-2); }
.tekstpagina__body p + p { margin-top: var(--s-3); }
.tekstpagina__body ul { margin-top: var(--s-3); padding-inline-start: 1.25em; display: grid; gap: var(--s-2); }
.formulier { display: grid; gap: var(--s-4); margin-top: var(--s-6); max-width: 24rem; }
.formulier label { display: grid; gap: var(--s-1); font-size: var(--f-sm); font-weight: 600; color: var(--heading); }
.formulier input { font: inherit; font-size: var(--f-body); font-weight: 400; padding: var(--s-3);
border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); color: var(--text); }
.formulier input:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.formulier button { justify-self: start; }
.formulier__fout { margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border-inline-start: 3px solid var(--c-barro);
background: var(--bg-alt); color: var(--text); }
.invullen { background: rgb(var(--c-dourado-rgb) / .22); color: var(--heading); padding: 0 .3em;
border-radius: var(--r-sm); font-weight: 600; }
.concept-notitie { font-size: var(--f-sm); color: var(--c-barro); border-inline-start: 3px solid var(--c-barro);
padding: var(--s-1) var(--s-3); margin-top: var(--s-2); background: var(--bg-alt); }
.art-kernpunten {
background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
padding: var(--s-5); margin-top: calc(var(--s-6) * -1); position: relative; z-index: 2;
box-shadow: var(--shadow); max-width: 52rem;
}
.art-kernpunten h2 {
font-family: var(--ff-body); font-size: var(--f-sm); font-weight: 600;
text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: var(--s-3);
}
.art-kernpunten ul { display: grid; gap: var(--s-2); padding-inline-start: 1.2em; list-style: disc; }
.art-kernpunten li::marker { color: var(--c-barro); }
.bronnen {
margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--border);
font-size: var(--f-sm); color: var(--text-muted); max-width: var(--measure);
}
.bronnen h2 { font-size: var(--f-h3); margin-bottom: var(--s-2); }
.bronnen ul { margin: var(--s-2) 0 var(--s-3); padding-inline-start: 1.2em; display: grid; gap: var(--s-1); }
.best-sectie table {
display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse;
font-size: var(--f-sm); margin: var(--s-3) 0 var(--s-5); border: 1px solid var(--border); border-radius: var(--r-md);
}
.best-sectie caption {
text-align: left; padding: var(--s-2) var(--s-3); font-weight: 600; color: var(--heading); background: var(--bg-alt);
}
.best-sectie th, .best-sectie td { padding: var(--s-2) var(--s-3); border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.best-sectie thead th { background: var(--bg-alt); color: var(--heading); white-space: nowrap; }
.art-meer { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); }
.art-meer h2 { font-size: var(--f-h3); margin-bottom: var(--s-3); }
.art-meer ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.art-meer a { font-size: var(--f-ui); }
.kaartfiguur { margin: var(--s-5) 0; }
.kaartfiguur img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--border); }
.kaartfiguur figcaption { font-size: var(--f-sm); color: var(--text-muted); margin-top: var(--s-2); }
.vergelijk { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: var(--s-5) 0; }
.vergelijk__kaart { margin: 0; padding: var(--s-4); background: var(--bg-alt); border-radius: var(--r-md); display: grid; gap: var(--s-2); align-content: start; }
.vergelijk__kop { font-family: var(--ff-head); font-size: var(--f-h3); color: var(--heading); }
.vergelijk__vlakken { position: relative; width: 100%; aspect-ratio: 1; max-width: 10rem; }
.vergelijk__vlak { position: absolute; left: 0; bottom: 0; aspect-ratio: 1; }
.vergelijk__vlak--br { width: 100%; background: var(--c-mata-soft); }
.vergelijk__vlak--nl { background: var(--c-barro-br); outline: 1px solid var(--c-paper); }
.vergelijk__rijen { display: grid; gap: var(--s-2); margin: 0; }
.vergelijk__rij dt { font-size: var(--f-sm); font-weight: 600; }
.vergelijk__rij dd { margin: 0; display: grid; gap: 2px; }
.vergelijk__balk { display: block; height: .6rem; border-radius: 999px; background: var(--c-mata-soft); }
.vergelijk__rij--nl .vergelijk__balk { background: var(--c-barro-br); }
.vergelijk__getal { font-size: var(--f-sm); }
.vergelijk__uitkomst { font-weight: 600; color: var(--c-barro); font-size: var(--f-sm); }
.vergelijk__bron { font-size: var(--f-xs); color: var(--text-muted); }
.reistijd { margin-top: var(--s-7); }
.reistijd h2 { font-size: var(--f-h2); margin-bottom: var(--s-3); }
.reistijd__uitleg { font-size: var(--f-sm); color: var(--text-muted); margin-bottom: var(--s-4); max-width: var(--measure); }
.reistijd__scroll { overflow-x: auto; position: relative; margin-bottom: var(--s-5);
border: 1px solid var(--border); border-radius: var(--r-md); }
.reistijd__scroll:focus-visible { outline-offset: 0; }
.reistijd__tabel { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--f-sm); }
.reistijd__tabel caption {
text-align: left; padding: var(--s-3) var(--s-4); font-family: var(--ff-head);
font-size: var(--f-md); color: var(--heading); font-weight: 600; background: var(--bg-alt);
}
.reistijd__tabel th, .reistijd__tabel td { padding: var(--s-2) var(--s-1); border-top: 1px solid var(--border); text-align: center; }
.reistijd__tabel thead th { color: var(--text-muted); font-weight: 600; }
.reistijd__tabel th[scope="row"], .reistijd__tabel thead th:first-child {
text-align: left; padding-inline: var(--s-4) var(--s-3); position: sticky; left: 0;
background: var(--bg); white-space: nowrap; font-weight: 500; z-index: 1;
}
.reistijd__tabel td { width: 7%; }
.reistijd__goed { background: rgb(var(--c-dourado-rgb) / .45); }
.feestdagen__scroll { overflow-x: auto; position: relative; margin: var(--s-4) 0 var(--s-3);
border: 1px solid var(--border); border-radius: var(--r-md); }
.feestdagen__scroll:focus-visible { outline-offset: 0; }
.feestdagen__tabel { border-collapse: collapse; width: 100%; min-width: 36rem; font-size: var(--f-sm); }
.feestdagen__tabel caption {
text-align: left; padding: var(--s-3) var(--s-4); font-family: var(--ff-head);
font-size: var(--f-md); color: var(--heading); font-weight: 600; background: var(--bg-alt);
}
.feestdagen__tabel th, .feestdagen__tabel td { padding: var(--s-2) var(--s-3); border-top: 1px solid var(--border);
text-align: left; vertical-align: top; }
.feestdagen__tabel thead th { color: var(--text-muted); font-weight: 600; }
.feestdagen__tabel tbody th { font-weight: 500; }
.feestdagen__datum { white-space: nowrap; font-variant-numeric: tabular-nums; }
.feestdagen__ponto { color: var(--text-muted); }
.feestdagen__pt, .feestdagen__toel { display: block; font-size: var(--f-sm); color: var(--text-muted); font-weight: 400; }
.feestdagen__pt { font-style: italic; }
.feestdagen__onder, .feestdagen__extra { font-size: var(--f-sm); color: var(--text-muted); max-width: var(--measure); }
.feestdagen__onder a { font-weight: 600; }
.feestdagen__let-op { padding: var(--s-3) var(--s-4); border-left: 3px solid var(--c-dourado, currentColor);
background: var(--bg-alt); border-radius: var(--r-md); }
.feestdagen__jaren { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between;
margin: var(--s-6) 0; font-weight: 600; }
.feestdag-data { margin: var(--s-5) 0; padding: var(--s-4) var(--s-5); background: var(--bg-alt);
border: 1px solid var(--border); border-radius: var(--r-md); }
.feestdag-data h2 { font-size: var(--f-md); margin: 0 0 var(--s-2); }
.feestdag-data dl { margin: 0; }
.feestdag-data dt { font-weight: 600; margin-top: var(--s-2); }
.feestdag-data dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--f-sm); }
.volgende-feestdag { margin: var(--s-6) 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4);
padding: var(--s-4) var(--s-5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-alt); }
.volgende-feestdag__label { font-size: var(--f-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.volgende-feestdag__naam { font-family: var(--ff-head); font-size: var(--f-md); color: var(--heading); font-weight: 600; }
.volgende-feestdag__wanneer { font-size: var(--f-sm); }
.feesten-hier { margin: var(--s-5) 0; padding: var(--s-4) var(--s-5); border: 1px solid var(--border);
border-radius: var(--r-md); background: var(--bg-alt); }
.feesten-hier__kop { font-size: var(--f-md); margin: 0 0 var(--s-2); }
.feesten-hier ul { margin: 0; padding-left: 1.1em; }
.dagbanner { background: rgb(var(--c-dourado-rgb) / .16); border-bottom: 1px solid rgb(var(--c-dourado-rgb) / .4); }
.dagbanner[hidden] { display: none; }
.dagbanner__binnen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4);
padding-block: var(--s-2); padding-right: var(--s-7); position: relative; font-size: var(--f-ui); }
.dagbanner__tekst { margin: 0; color: var(--text); }
.dagbanner__label { color: var(--accent-tekst); margin-right: var(--s-2); }
.dagbanner__link { font-weight: 600; white-space: nowrap; }
.dagbanner__sluit { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
min-width: 2.75rem; min-height: 2.75rem; border: 0; background: none; color: var(--text-muted);
font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: var(--r-md); }
.dagbanner__sluit:hover { color: var(--text); }
@media print { .dagbanner { display: none; } }
.route { margin-top: var(--s-7); max-width: var(--measure); }
.route h2 { font-size: var(--f-h2); margin-bottom: var(--s-2); }
.route__samenvatting { font-size: var(--f-sm); color: var(--text-muted); margin-bottom: var(--s-5); }
.route__lijst { list-style: none; padding: 0; margin: 0; counter-reset: stop; }
.route__stop {
position: relative; padding-inline-start: var(--s-6); padding-bottom: var(--s-6);
border-inline-start: 2px solid var(--border); margin-inline-start: .55rem;
}
.route__stop:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.route__stop::before {
content: ""; position: absolute; left: calc(-.55rem - 1px); top: .35rem;
width: 1.1rem; height: 1.1rem; border-radius: 50%;
background: var(--c-dourado); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--c-dourado);
}
.route__kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.route__dagen { font-size: var(--f-sm); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-barro); flex-basis: 100%; }
.route__kop h3 { font-size: var(--f-h3); margin: 0; }
.route__kop h3 a { color: inherit; text-decoration: none; }
.route__kop h3 a:hover { text-decoration: underline; }
.route__nachten { font-size: var(--f-sm); color: var(--text-muted); }
.route__body { display: grid; gap: var(--s-4); margin-top: var(--s-3); }
@media (min-width: 40rem) { .route__body:has(.route__foto) { grid-template-columns: 14rem 1fr; align-items: start; } }
.route__foto { display: block; border-radius: var(--r-md); overflow: hidden; }
.route__foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.route__tekst p { margin-bottom: var(--s-3); }
.route__gids { font-size: var(--f-ui); }
.route__verder {
margin-top: var(--s-3); font-size: var(--f-sm); color: var(--text-muted);
background: var(--bg-alt); border-radius: var(--r-md); padding: var(--s-2) var(--s-3);
}
.route-tijd { margin-top: var(--s-7); max-width: var(--measure); }
.route-tijd h2 { font-size: var(--f-h2); margin-bottom: var(--s-2); }
.route-tijd__maanden { list-style: none; padding: 0; margin: var(--s-4) 0 var(--s-3); display: grid; gap: var(--s-1);
grid-template-columns: repeat(6, 1fr); }
@media (min-width: 40rem) { .route-tijd__maanden { grid-template-columns: repeat(12, 1fr); } }
.route-tijd__maand { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: var(--s-2) 0;
border-radius: var(--r-sm); border: 1px solid var(--border); font-size: var(--f-sm); color: var(--text-muted); }
.route-tijd__aantal { font-size: .7rem; }
.route-tijd__maand--goed { background: color-mix(in srgb, var(--c-dourado) 22%, var(--bg)); color: var(--text); }
.route-tijd__maand--beste { background: var(--c-mata-soft); border-color: transparent; color: var(--c-licht); font-weight: 600; }
.route-tijd__noot { font-size: var(--f-sm); color: var(--text-muted); }
.route-planner { margin-top: var(--s-7); max-width: var(--measure); padding: var(--s-5); border-radius: var(--r-md);
background: var(--c-sand); border: 1px solid var(--c-sand-deep); }
.route-planner h2 { font-size: var(--f-h3); margin-bottom: var(--s-2); }
.zoekveld { display: flex; gap: var(--s-2); align-items: center; }
.zoekveld__invoer {
flex: 1; min-width: 0; min-height: 2.75rem; padding: var(--s-2) var(--s-3);
font-size: var(--f-body); background: var(--bg); color: var(--text);
border: 1px solid var(--border); border-radius: var(--r-md);
}
.zoekveld__invoer:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; border-color: transparent; }
.zoekveld__knop { flex: none; }
.zoekresultaat mark, .zoeksuggesties mark {
background: rgb(var(--c-dourado-rgb) / .28); color: inherit; border-radius: var(--r-sm); padding-inline: .05em;
}
.zoekvenster {
width: min(40rem, calc(100% - 2 * var(--gutter))); max-height: min(36rem, calc(100dvh - 4rem));
margin: 4rem auto auto; padding: var(--s-4);
background: var(--bg); color: var(--text);
border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.zoekvenster[open] { display: flex; flex-direction: column; gap: var(--s-3); }
.zoekvenster::backdrop { background: rgb(var(--c-mata-deep-rgb) / .55); }
.zoekvenster__sluit {
flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
background: none; border: 0; color: var(--text-muted); cursor: pointer; border-radius: var(--r-md);
}
.zoekvenster__sluit:hover { color: var(--text); }
.zoeksuggesties { overflow-y: auto; overscroll-behavior: contain; }
.zoeksuggesties__groep + .zoeksuggesties__groep { margin-top: var(--s-3); }
.zoeksuggesties__kop {
font-size: var(--f-sm); font-weight: 600; color: var(--text-muted);
text-transform: uppercase; letter-spacing: .06em; padding: var(--s-1) var(--s-3);
}
.zoeksuggesties__optie {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--s-3);
padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
color: var(--text); text-decoration: none;
}
.zoeksuggesties__optie[aria-selected="true"] { background: var(--bg-alt); }
.zoeksuggesties__titel { font-size: var(--f-ui); font-weight: 500; color: var(--heading); }
.zoeksuggesties__soort { font-size: var(--f-sm); color: var(--text-muted); }
.zoeksuggesties__alles {
margin-top: var(--s-3); border-top: 1px solid var(--border); border-radius: 0;
font-size: var(--f-ui); color: var(--link); font-weight: 500;
}
@media (max-width: 30rem) {
.zoekvenster { margin-top: var(--s-4); max-height: calc(100dvh - 2rem); }
.zoekvenster .zoekveld__knop { display: none; }
}
.zoekpagina { padding-bottom: var(--s-8); }
.zoekpagina__wrap { max-width: 50rem; }
.zoekpagina h1 { margin-block: var(--s-4) var(--s-5); }
.zoekpagina__aantal { margin-top: var(--s-5); color: var(--text-muted); }
.zoekpagina__aantal strong { color: var(--text); }
.zoekpagina__notitie { font-size: var(--f-sm); }
.zoekpagina__leeg { margin-top: var(--s-4); }
.zoekpagina__leeg ul { margin-top: var(--s-3); padding-inline-start: 1.2em; }
.zoekfilter ul { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin-top: var(--s-4); }
.zoekfilter a {
display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.25rem; padding: var(--s-1) var(--s-3);
border: 1px solid var(--border); border-radius: var(--r-pill);
font-size: var(--f-sm); color: var(--text); text-decoration: none;
}
.zoekfilter a:hover { border-color: var(--link); }
.zoekfilter a[aria-current="page"] { background: var(--heading); border-color: var(--heading); color: var(--bg); }
.zoekfilter span { opacity: .7; }
.zoeklijst { list-style: none; padding: 0; margin-top: var(--s-5); }
.zoekresultaat + .zoekresultaat { border-top: 1px solid var(--border); }
.zoekresultaat__link {
display: flex; gap: var(--s-4); align-items: flex-start; padding-block: var(--s-4);
color: var(--text); text-decoration: none;
}
.zoekresultaat__beeld {
flex: none; width: 7.5rem; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md);
}
.zoekresultaat__tekst { display: grid; gap: var(--s-1); min-width: 0; }
.zoekresultaat__soort { font-size: var(--f-sm); color: var(--text-muted); }
.zoekresultaat__titel { font-family: var(--ff-head); font-size: var(--f-h3); line-height: var(--lh-head); color: var(--heading); }
.zoekresultaat__link:hover .zoekresultaat__titel { text-decoration: underline; text-underline-offset: .15em; }
.zoekresultaat__fragment { font-size: var(--f-ui); color: var(--text-muted); }
@media (max-width: 30rem) {
.zoekresultaat__beeld { width: 5rem; }
}
.zoekvenster .zoekveld__invoer::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
html[data-a11y-tekst="groot"] { font-size: 112.5%; }
html[data-a11y-tekst="xl"]    { font-size: 125%; }
html[data-a11y-font="dyslexie"] body {
font-family: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif;
letter-spacing: .02em; word-spacing: .08em; line-height: 1.8;
}
html[data-a11y-contrast="hoog"] {
--bg: #ffffff; --bg-alt: #f2f2f2; --text: #000000; --text-muted: #1a1a1a;
--heading: #06231d; --link: #0b4a57; --border: #333333;
}
html[data-a11y-contrast="hoog"] a { text-decoration: underline; }
html[data-a11y-contrast="hoog"] .hero::after,
html[data-a11y-contrast="hoog"] .paginakop::after { background: rgb(0 0 0 / .55); }
.a11y-toggle {
flex: none; background: none; border: 0; color: inherit; cursor: pointer;
width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
}
.a11y-toggle svg { width: 20px; height: 20px; }
.a11y-panel {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
width: min(92vw, 20rem); background: var(--bg);
border-inline-start: 1px solid var(--border); box-shadow: var(--shadow);
padding: var(--s-5); overflow-y: auto;
display: flex; flex-direction: column; gap: var(--s-5);
}
.a11y-panel__kop { display: flex; align-items: center; justify-content: space-between; }
.a11y-panel__kop h2 { font-size: var(--f-h3); }
.a11y-sluit { background: none; border: 0; font-size: var(--f-h3); cursor: pointer; color: var(--text-muted);
width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.a11y-sluit:hover { background: var(--bg-alt); }
.a11y-groep { display: grid; gap: var(--s-2); }
.a11y-groep > span { font-size: var(--f-sm); font-weight: 600; color: var(--heading); }
.a11y-knoprij { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.a11y-keuze {
border: 1px solid var(--border); background: var(--bg); color: var(--text);
border-radius: var(--r-md); padding: var(--s-2) var(--s-4); cursor: pointer;
min-height: 2.5rem; font-size: var(--f-ui);
}
.a11y-keuze[aria-pressed="true"] { background: var(--c-mata); color: var(--c-paper); border-color: var(--c-mata); }
.a11y-keuze:hover { border-color: var(--c-mata); }
.a11y-schuif { width: 100%; }
.a11y-schuif-uit { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: var(--f-sm); }
.a11y-lees-knop {
display: inline-flex; align-items: center; gap: var(--s-2); justify-content: center;
background: var(--c-dourado); color: var(--c-mata-deep); border: 0;
border-radius: var(--r-md); padding: var(--s-3) var(--s-4); cursor: pointer;
min-height: 2.75rem; font-weight: 500;
}
.a11y-reset { background: none; border: 0; color: var(--link); cursor: pointer; text-decoration: underline;
font-size: var(--f-sm); justify-self: start; }
.a11y-tip { font-size: var(--f-sm); color: var(--text-muted); }
.a11y-voorlees-mini {
display: inline-flex; align-items: center; gap: .4em;
background: var(--bg-alt); color: var(--heading); border: 1px solid var(--border);
border-radius: var(--r-pill); padding: var(--s-2) var(--s-3); cursor: pointer;
font-size: var(--f-sm); min-height: 2.25rem;
}
.a11y-voorlees-mini:hover { border-color: var(--c-mata); }
.a11y-voorlees-mini[aria-pressed="true"] { background: var(--c-mata); color: var(--c-paper); border-color: var(--c-mata); }
.a11y-leesblok-actief {
background: rgb(var(--c-dourado-rgb) / .16); border-radius: var(--r-sm);
box-shadow: 0 0 0 4px rgb(var(--c-dourado-rgb) / .16);
}
.a11y-speler {
position: fixed; left: 50%; bottom: var(--s-5); transform: translateX(-50%) translateY(150%);
z-index: 95; display: flex; align-items: center; gap: var(--s-3);
background: var(--c-mata); color: var(--c-paper);
padding: var(--s-2) var(--s-3) var(--s-2) var(--s-5); border-radius: var(--r-pill);
box-shadow: var(--shadow); transition: transform var(--snel);
}
.a11y-speler-zichtbaar { transform: translateX(-50%) translateY(0); }
.a11y-speler-label { font-size: var(--f-sm); }
.a11y-speler-knop { background: rgb(var(--c-paper-rgb) / .15); color: var(--c-paper); border: 0;
border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); cursor: pointer; min-height: 2.25rem; }
.a11y-speler-knop:hover { background: rgb(var(--c-paper-rgb) / .28); }
.beheer-kruimel { padding-top: 0; }
.beheer-intro { max-width: 64ch; }
.beheer-kop { margin-top: var(--s-7); }
.knop--donker { background: var(--c-mata); color: var(--c-paper); border-color: var(--c-mata); }
.knop--rand { border-color: var(--border); color: var(--text); }
.bh-kop { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: baseline; justify-content: space-between; }
.bh-lijst { display: grid; gap: var(--s-1); margin-top: var(--s-4); }
.bh-rij {
display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--s-4); align-items: center;
padding: var(--s-2); border-bottom: 1px solid var(--border);
}
.bh-thumb { width: 56px; height: 56px; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-alt); }
.bh-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bh-naam { font-weight: 500; }
.bh-res { font-size: var(--f-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bh-klein { color: var(--c-barro); font-style: normal; }
.bh-vink { color: var(--c-mata-soft); font-weight: 700; }
.bh-klaar-rij { background: rgb(var(--c-mata-soft-rgb) / .06); }
.bh-filter {
background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-md);
padding: var(--s-3) var(--s-4); font-size: var(--f-sm); color: var(--text-muted); max-width: 64ch;
}
.bh-filter a { white-space: nowrap; }
.bh-leeg { color: var(--c-mata-soft); margin-top: var(--s-3); }
.bk-titelrij { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; }
.bk-status { display: flex; gap: var(--s-3); align-items: center; }
.bk-status form { display: flex; gap: var(--s-2); }
.bk-klaar { color: var(--c-mata-soft); font-weight: 600; }
.bk-huidig { display: grid; gap: var(--s-5); margin: var(--s-4) 0 var(--s-6); }
@media (min-width: 48rem) { .bk-huidig { grid-template-columns: 20rem 1fr; align-items: center; } }
.bk-label { font-size: var(--f-sm); color: var(--c-barro); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--s-2); }
.bk-huidig-beeld { aspect-ratio: 3 / 2; border-radius: var(--r-md); overflow: hidden; background: var(--bg-alt); }
.bk-huidig-beeld picture { display: block; width: 100%; height: 100%; }
.bk-huidig-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-tip { color: var(--text-muted); max-width: 48ch; }
.bk-galerij { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); margin-bottom: var(--s-5); }
.bk-gitem { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1 / 1; background: var(--bg-alt); }
.bk-gitem picture { position: absolute; inset: 0; display: block; }
.bk-gitem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-verwijder {
position: absolute; top: 4px; right: 4px; border: 0; cursor: pointer; border-radius: var(--r-pill);
background: rgb(var(--c-barro-rgb) / .92); color: var(--c-paper); font-size: var(--f-xs); padding: 3px 8px;
}
.bk-verwijder:hover { background: var(--c-barro); }
.bk-raster { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.bk-kaart { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.bk-kaart img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.bk-res {
position: absolute; bottom: 0; left: 0; right: 0; font-size: var(--f-xs); padding: 2px 6px;
background: rgb(var(--c-mata-deep-rgb) / .72); color: var(--c-paper); font-variant-numeric: tabular-nums;
}
.bk-scherp::after { content: " ✓"; color: var(--c-geslaagd); }
.bk-vaag::after { content: " · klein"; color: var(--c-barro-licht); }
.bk-badge {
position: absolute; top: 4px; left: 4px; font-size: var(--f-xs); background: var(--c-mata); color: var(--c-paper);
padding: 2px 6px; border-radius: var(--r-pill);
}
.bk-acties { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.bk-acties form { flex: 1; }
.bk-act {
width: 100%; border: 1px solid var(--border); background: var(--bg); color: var(--text);
border-radius: var(--r-md); padding: var(--s-2); cursor: pointer; font-size: var(--f-sm); min-height: 2.25rem;
}
.bk-act:hover { border-color: var(--c-mata); }
.bk-act--hero { background: var(--c-mata); color: var(--c-paper); border-color: var(--c-mata); }
.bk-act[disabled] { opacity: .45; cursor: default; }
.bk-act--uit {
display: grid; place-items: center; text-align: center; color: var(--text-muted);
background: var(--bg-alt); border: 1px dashed var(--border); cursor: not-allowed; font-size: var(--f-sm);
}
.pt-lijst { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.pt-rij { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); display: grid; gap: var(--s-3); }
.pt-kop { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; align-items: baseline; }
.pt-rol { font-size: var(--f-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--c-barro); margin-right: var(--s-2); }
.pt-net { font-size: var(--f-sm); color: var(--text-muted); margin-left: var(--s-2); }
.pt-stat { display: flex; gap: var(--s-3); font-size: var(--f-sm); align-items: center; }
.pt-aan, .pt-ok { color: var(--c-mata-soft); }
.pt-leeg { color: var(--c-barro); }
.pt-dood { color: var(--c-barro); font-weight: 600; }
.pt-aanb { color: var(--text-muted); font-size: var(--f-sm); margin: 0; }
.pt-veld { display: grid; gap: var(--s-1); font-size: var(--f-sm); color: var(--text-muted); }
.pt-veld input {
padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm);
font-size: var(--f-base); color: var(--text); background: var(--bg);
}
.pt-acties { display: flex; gap: var(--s-4); align-items: center; }
.bh-teller { color: var(--c-barro); }
.rc-lijst { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.rc-rij { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); background: var(--bg); }
.rc-rij--variant { border-inline-start: 3px solid var(--c-dourado); }
.rc-kop { font-size: var(--f-ui); color: var(--text-muted); }
.rc-kop strong { color: var(--text); }
.rc-tekst p { margin-top: var(--s-2); max-width: var(--measure); }
.rc-foto { max-width: 16rem; height: auto; border-radius: var(--r-md); margin-top: var(--s-3); }
.rc-acties { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; margin-top: var(--s-3); }
.bb-bar { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: var(--s-5) 0 var(--s-3); position: sticky; top: 0;
padding: var(--s-2) 0; background: var(--bg); z-index: 2; }
.bb-bar .knop[aria-pressed="true"] { background: var(--c-mata); color: var(--c-paper); border-color: var(--c-mata); }
.bb-teller { font-size: var(--f-sm); color: var(--text-muted); margin-inline-start: auto; }
.bb-lijst { display: grid; gap: 0; }
.bb-rij { display: grid; gap: var(--s-3); grid-template-columns: 160px 1fr; align-items: start; padding: var(--s-3) 0;
border-bottom: 1px solid var(--border); }
.bb-rij[hidden] { display: none; }
.bb-rij.is-eigen { background: rgb(var(--c-mata-soft-rgb) / .06); }
.bb-thumb { display: block; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-alt); }
.bb-thumb img { width: 100%; height: auto; display: block; }
.bb-naam { font-weight: 500; word-break: break-all; margin: 0; }
.bb-meta, .bb-toel { font-size: var(--f-sm); color: var(--text-muted); margin: .15rem 0 0; }
.bb-hero { color: var(--c-barro); }
.bb-knoppen { grid-column: 1 / -1; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.bb-knoppen .knop[aria-pressed="false"] { opacity: .55; }
.bb-geen { font-size: var(--f-sm); color: var(--text-muted); }
@media (min-width: 48rem) {
.bb-rij { grid-template-columns: 160px 1fr auto; }
.bb-knoppen { grid-column: auto; flex-direction: column; align-items: stretch; }
}
.rp-vel {
--bg: var(--c-paper); --bg-alt: var(--c-sand); --text: var(--c-ink); --text-muted: var(--c-ink-soft);
--heading: var(--c-mata); --link: var(--c-oceano); --border: var(--c-sand-deep); --focus: var(--accent-tekst);
position: relative; display: flex; flex-direction: column; width: 210mm; min-height: 297mm; padding: 12mm 13mm 0;
background: var(--bg); color: var(--text); font: 9.5pt/1.4 var(--ff-body); box-shadow: 0 2px 12px rgb(0 0 0 / .14);
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rp-vel h1, .rp-vel h2, .rp-vel h3 { font-family: var(--ff-head); color: var(--heading); font-weight: 600; margin: 0; text-wrap: balance; }
.rp-vel a { color: var(--link); }
.rp-vel--liggend { width: 297mm; min-height: 210mm; }
.rp-vel--telefoon { width: 95.25mm; min-height: 169.33mm; padding: 6mm 6mm 0; font-size: 8pt; }
.rp-vellen { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); padding: var(--s-6) var(--gutter);
background: var(--bg-alt); overflow-x: auto; }
.rp-kicker { margin: 0; font-size: 7pt; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-tekst); font-weight: 600; }
.rp-noot { font-size: 8pt; color: var(--text-muted); margin: 2mm 0; }
.rp-label { font-size: 7.5pt; color: var(--text-muted); }
.rp-leeg { font-size: 7.5pt; color: var(--text-muted); font-style: italic; }
.rp-pt { font-size: 7.5pt; color: var(--text-muted); font-style: italic; margin-left: 1.5mm; }
.rp-regel { height: 7mm; border-bottom: .5px solid var(--border); margin: 0; }
.rp-tipvak { margin: 4mm 0; padding: 3mm 4mm; background: var(--bg-alt); border-left: 3px solid var(--c-dourado); font-size: 8.5pt; }
.rp-qr { width: 17mm; height: 17mm; flex: none; padding: 1.2mm; background: #fff; border-radius: 2px; }
.rp-qr svg { display: block; width: 100%; height: 100%; }
.rp-qrblok { display: flex; gap: 2.5mm; align-items: center; margin-top: 4mm; font-size: 7.5pt; }
.rp-qrblok p { margin: 0; }
.rp-voetband { display: flex; gap: 4mm; align-items: center; margin: auto -13mm 0; padding: 4mm 13mm; background: #6B3A22;
color: #F6E7CF; font-size: 8pt; }
.rp-voetband p { margin: 0; }
.rp-voetband span { opacity: .85; }
.rp-dagen { list-style: none; margin: 0; padding: 0; }
.rp-dagen li { display: grid; grid-template-columns: 46mm 1fr auto; gap: 3mm; align-items: baseline; padding: 1.4mm 0 1.4mm 3mm;
border-bottom: 1px solid var(--border); border-left: 3px solid transparent; }
.rp-dagen li.feriado { border-left-color: var(--c-barro); }
.rp-dagen li.ponto { border-left-color: var(--c-dourado); }
.rp-dagen li.bijzonder { border-left-color: var(--c-oceano); }
.rp-dagen__datum { font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-dagen--compact li, .rp-dagen--klein li { padding-block: .9mm; font-size: 8.5pt; }
.rp-jaarkop { display: flex; gap: 5mm; align-items: center; padding-bottom: 4mm; border-bottom: 2px solid var(--heading); }
.rp-jaarkop h1 { font-size: 26pt; line-height: 1.05; }
.rp-jaarkop__kern { margin: 1.5mm 0 0; font-size: 8.5pt; color: var(--text-muted); }
.rp-maanden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5mm 7mm; margin: 6mm 0 4mm; }
.rp-maand h3 { font-size: 11pt; margin-bottom: 1mm; }
.rp-maand table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rp-maand th { font-size: 6.5pt; font-weight: 600; color: var(--text-muted); padding-bottom: .8mm; }
.rp-maand abbr { text-decoration: none; }
.rp-maand td { position: relative; height: 6.2mm; padding: 0; text-align: center; font-size: 8pt; }
.rp-maand td.we { color: var(--text-muted); }
.rp-maand td.lang { background: var(--border); }
.rp-maand td.reis { background-color: rgb(var(--c-dourado-rgb) / .22); box-shadow: inset 0 1.5px 0 var(--c-dourado), inset 0 -1.5px 0 var(--c-dourado); }
.rp-maand td.feriado { background: var(--c-barro); color: #fff; font-weight: 700; border-radius: 50%; }
.rp-maand td.ponto { box-shadow: inset 0 0 0 1.5px var(--c-barro); color: var(--c-barro); font-weight: 700; border-radius: 50%; }
.rp-maand td.feriado.lang, .rp-maand td.ponto.lang, .rp-maand td.feriado.reis, .rp-maand td.ponto.reis { border-radius: 0; }
.rp-maand td.bijzonder::after { content: ""; position: absolute; left: 50%; bottom: .4mm; width: 1.3mm; height: 1.3mm;
margin-left: -.65mm; border-radius: 50%; background: var(--c-dourado); }
.rp-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 2mm 6mm; margin: 0; padding: 3mm 0;
border-top: 1px solid var(--border); font-size: 7.5pt; }
.rp-bol { display: inline-block; width: 3.4mm; height: 3.4mm; margin-right: 1.5mm; vertical-align: -.6mm; border-radius: 50%; }
.rp-bol.feriado { background: var(--c-barro); }
.rp-bol.ponto { box-shadow: inset 0 0 0 1.5px var(--c-barro); }
.rp-bol.lang { background: var(--border); border-radius: 1px; }
.rp-bol.bijzonder { width: 1.8mm; height: 1.8mm; margin-inline: .8mm 2.3mm; background: var(--c-dourado); }
.rp-bol.reis { border-radius: 0; background: rgb(var(--c-dourado-rgb) / .22); box-shadow: inset 0 1.5px 0 var(--c-dourado), inset 0 -1.5px 0 var(--c-dourado); }
.rp-jaar--lijst h2 { font-size: 15pt; margin: 4mm 0 2.5mm; }
.rp-jaar--lijst .rp-dagen li { padding-block: 1.1mm; }
.rp-jouwreis { margin-bottom: 2mm; padding: 4mm 5mm; border: 1.5px solid var(--c-dourado); border-radius: var(--r-md); background: #fffaf0; }
.rp-jouwreis .rp-dagen { margin-top: 1.5mm; }
.rp-jouwreis__twee { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; margin-top: 3mm; font-size: 8.5pt; }
.rp-jouwreis__twee h3 { font-size: 10.5pt; margin-bottom: 1mm; }
.rp-jouwreis__twee p { margin: 0; }
.rp-rapportkop { display: flex; justify-content: space-between; align-items: flex-end; gap: 6mm; margin: -12mm -13mm 0;
padding: 10mm 13mm 9mm; background: var(--c-mata-deep); color: var(--c-paper); }
.rp-vel .rp-rapportkop h1 { color: var(--c-paper); font-size: 21pt; line-height: 1.1; margin-top: 1.5mm; }
.rp-rapportkop .rp-kicker { color: var(--c-dourado); }
.rp-rapportkop__web { margin: 1.5mm 0 0; font-size: 7.5pt; color: #c9d6d1; }
.rp-rapportkop .rp-qr { width: 18mm; height: 18mm; }
.rp-kort { margin: -4mm 0 0; padding: 3.5mm 5mm; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
box-shadow: 0 6px 18px rgb(var(--c-ink-rgb) / .08); }
.rp-kort ul { margin: 1.5mm 0 0; padding-left: 4mm; }
.rp-kort li::marker { color: var(--c-barro); }
.rp-rapport h2 { font-size: 15pt; margin: 5mm 0 2.5mm; }
.rp-rapport h3 { font-size: 11pt; margin: 4mm 0 1.5mm; }
.rp-drukte { margin: 0; padding-left: 4mm; font-size: 8.5pt; }
.rp-drukte li { margin-bottom: 1.2mm; }
.rp-best { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5mm 5mm; }
.rp-best li { padding: 2.5mm 3mm; border: 1px solid var(--border); border-radius: var(--r-md); }
.rp-best a { font: 600 11pt var(--ff-head); color: var(--heading); text-decoration: none; }
.rp-weer { display: inline-block; margin-right: 2.5mm; font-size: 7.5pt; font-variant-numeric: tabular-nums; }
.rp-tips { margin: 0; padding-left: 4mm; font-size: 8.8pt; }
.rp-tips li { margin-bottom: 1.4mm; }
.rp-rapport--bestemmingen { min-height: 0; padding-bottom: 8mm; }
.rp-maandkal { padding: 10mm 12mm 8mm; }
.rp-maandkal__kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 8mm; margin-bottom: 4mm; }
.rp-maandkal__kop h1 { font-size: 30pt; line-height: 1; }
.rp-klimaat { max-width: 120mm; padding: 2.5mm 4mm; background: var(--bg-alt); border-radius: var(--r-md); font-size: 8.5pt; }
.rp-klimaat p { margin: .8mm 0 0; }
.rp-klimaat__oordeel { color: var(--text-muted); }
.rp-maandkal__raster { width: 100%; flex: 1; border-collapse: collapse; table-layout: fixed; }
.rp-maandkal__raster th { padding: 0 0 1.2mm 1.5mm; text-align: left; font-size: 7.5pt; font-weight: 600; color: var(--text-muted); }
.rp-maandkal__raster td { height: 24mm; padding: 1.2mm 1.5mm; border: 1px solid var(--border); vertical-align: top; font-size: 7pt; }
.rp-maandkal__raster td.leeg { background: #faf6ef; }
.rp-maandkal__raster td.we .rp-nr { color: var(--text-muted); }
.rp-maandkal__raster td.lang { background: var(--bg-alt); }
.rp-maandkal__raster td.reis { box-shadow: inset 0 2.2mm 0 rgb(var(--c-dourado-rgb) / .55); }
.rp-maandkal__raster td.reis .rp-nr { margin-top: 1.4mm; }
.rp-nr { display: block; margin-bottom: .8mm; font: 600 11pt var(--ff-head); color: var(--heading); }
.rp-pil { display: block; margin-top: .6mm; padding: .3mm 1.2mm; border-radius: 2px; line-height: 1.25; overflow-wrap: anywhere; }
.rp-pil.feriado { background: var(--c-barro); color: #fff; font-weight: 600; }
.rp-pil.ponto { box-shadow: inset 0 0 0 1px var(--c-barro); color: var(--c-barro); font-weight: 600; }
.rp-pil.bijzonder { padding-left: 0; color: var(--c-oceano); }
.rp-reismerk { display: block; margin-top: .6mm; font-weight: 700; color: var(--accent-tekst); }
.rp-maandkal__voet { display: flex; justify-content: space-between; align-items: center; margin-top: 2mm; }
.rp-maandkal__voet .rp-legenda { border: 0; }
.rp-maandkal__voet .rp-qr { width: 15mm; height: 15mm; padding: 0; }
.rp-spiek__kop { display: flex; gap: 3mm; align-items: center; margin: -6mm -6mm 3mm; padding: 6mm 6mm 4mm;
background: var(--c-mata-deep); color: var(--c-paper); }
.rp-vel .rp-spiek__kop h1 { color: var(--c-paper); font-size: 18pt; line-height: 1; }
.rp-spiek__kop p { margin: .8mm 0 0; }
.rp-spiek__kop .rp-kicker { color: var(--c-dourado); }
.rp-spiek__kop img { border-radius: 50%; background: var(--c-paper); }
.rp-spiek h2 { font-size: 10pt; margin: 3mm 0 1.2mm; }
.rp-spiek .rp-dagen li { grid-template-columns: 19mm 1fr; column-gap: 2mm; padding: .9mm 0 .9mm 2mm; }
.rp-spiek .rp-dagen .rp-label { grid-column: 2; font-size: 6.8pt; }
.rp-spiek__punten { margin: 0; padding-left: 3.5mm; }
.rp-spiek__punten li { margin-bottom: .8mm; }
.rp-spiek__woorden { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1mm 3mm; margin: 0; padding: 0; }
.rp-spiek__woorden span { display: block; font-size: 6.8pt; color: var(--text-muted); }
.rp-spiek__nood { list-style: none; display: flex; gap: 2mm; margin: 0; padding: 0; }
.rp-spiek__nood li { flex: 1; padding: 1.5mm 0; text-align: center; background: var(--bg-alt); border-radius: 4px; font-size: 7pt; }
.rp-spiek__nood b { display: block; font: 700 13pt var(--ff-head); color: var(--c-barro); }
.rp-spiek__voet { display: flex; gap: 3mm; align-items: center; margin: auto -6mm 0; padding: 3mm 6mm; background: #6B3A22;
color: #F6E7CF; font-size: 7pt; }
.rp-spiek__voet p { margin: 0; }
.rp-spiek__voet .rp-qr { width: 14mm; height: 14mm; }
.rp-boekje { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; height: 209mm; min-height: 0;
padding: 0; overflow: hidden; font-size: 6.6pt; line-height: 1.35; }
.rp-vak { position: relative; padding: 6mm 5mm 5mm; border: .3px dotted #cfc6b5; overflow: hidden; }
.rp-vak--boven { transform: rotate(180deg); }
.rp-vak__nr { position: absolute; right: 3mm; bottom: 2mm; font-size: 6pt; color: var(--text-muted); }
.rp-vak h2 { font-size: 10pt; margin: 0 0 1.5mm; }
.rp-vak h2 ~ h2 { margin-top: 3mm; }
.rp-vak p { margin: 0 0 1.5mm; }
.rp-vak .rp-dagen li { grid-template-columns: 15mm 1fr; padding: .7mm 0 .7mm 1.5mm; border-left-width: 2px; }
.rp-vak .rp-dagen .rp-label { grid-column: 2; font-size: 5.8pt; }
.rp-vak .rp-regel { height: 6mm; }
.rp-boekje__lijst { margin: 0; padding-left: 3mm; }
.rp-boekje__lijst li { margin-bottom: .8mm; }
.rp-boekje__best { list-style: none; margin: 0; padding: 0; }
.rp-boekje__best li { margin-bottom: 1.6mm; }
.rp-boekje__best .rp-weer { display: block; font-size: 6pt; }
.rp-boekje__kal { display: grid; gap: 2mm; }
.rp-boekje__kal .rp-maand h3 { font-size: 7.5pt; }
.rp-boekje__kal .rp-maand td { height: 3.6mm; font-size: 5.6pt; }
.rp-boekje__kal .rp-maand th { font-size: 5pt; }
.rp-boekje__omslag { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 104mm;
margin: -6mm -5mm -5mm; padding: 6mm; text-align: center; background: var(--c-mata-deep); color: var(--c-paper); }
.rp-boekje__omslag img { margin-bottom: 3mm; border-radius: 50%; background: var(--c-paper); }
.rp-vel .rp-boekje__omslag h1 { color: var(--c-paper); font-size: 22pt; }
.rp-boekje__omslag .rp-kicker { color: var(--c-dourado); }
.rp-boekje__omslag p { margin: 2mm 0 0; font-size: 8pt; }
.rp-boekje__naam { margin-top: 8mm !important; opacity: .8; }
.rp-vak .rp-qrblok .rp-qr { width: 13mm; height: 13mm; padding: 0; }
.rp-boekje__knip { position: absolute; top: 50%; left: 25%; right: 25%; border-top: 1px dashed var(--text-muted); }
.rp-boekje__knip span { position: absolute; left: 50%; top: -2.2mm; transform: translateX(-50%); padding: 0 1.5mm;
background: var(--bg); font-size: 6pt; color: var(--text-muted); }
.rp-omslag { padding: 30mm 22mm 18mm; background: var(--c-mata-deep); color: var(--c-paper); }
.rp-omslag img { border-radius: 50%; background: var(--c-paper); }
.rp-omslag .rp-kicker { margin-top: 10mm; font-size: 9pt; color: var(--c-dourado); }
.rp-vel.rp-omslag h1 { margin: 2mm 0 4mm; font-size: 58pt; line-height: 1; color: var(--c-paper); }
.rp-omslag__periode { margin: 0; font: 500 16pt var(--ff-head); }
.rp-omslag__route { margin: 2mm 0 0; font-size: 11pt; color: #d9e3df; }
.rp-omslag__voor { margin: 14mm 0 0; font-size: 11pt; opacity: .85; }
.rp-omslag__inhoud { display: grid; gap: 2.5mm; margin: auto 0 6mm; padding: 6mm 0 0; list-style: none; counter-reset: inhoud;
border-top: 1px solid rgb(var(--c-licht-rgb) / .3); font-size: 10pt; }
.rp-omslag__inhoud li { display: grid; grid-template-columns: 9mm 1fr; counter-increment: inhoud; }
.rp-omslag__inhoud li::before { content: counter(inhoud); grid-row: span 2; font: 600 16pt var(--ff-head); color: var(--c-dourado); }
.rp-omslag__inhoud span { font-size: 8.5pt; opacity: .8; }
.rp-omslag__noot { margin: 0; font-size: 7.5pt; opacity: .7; }
.rp-blad__kop { margin: -12mm -13mm 6mm; padding: 10mm 13mm 6mm; background: var(--c-mata); color: var(--c-paper); }
.rp-vel .rp-blad__kop h1 { margin-top: 1mm; font-size: 28pt; line-height: 1.05; color: var(--c-paper); }
.rp-blad__kop .rp-kicker { color: var(--c-dourado); }
.rp-blad__body { display: grid; grid-template-columns: 1fr 62mm; gap: 8mm; }
.rp-blad__intro { margin: 0 0 4mm; font-size: 10.5pt; line-height: 1.5; }
.rp-blad__hoofd h2 { font-size: 12pt; margin: 4mm 0 1.5mm; }
.rp-blad__punten { margin: 0; padding-left: 4mm; columns: 2; column-gap: 6mm; }
.rp-blad__punten li { margin-bottom: 1mm; break-inside: avoid; }
.rp-blad__faq { margin: 0; font-size: 8.8pt; }
.rp-blad__faq dt { margin-top: 2.5mm; font-weight: 700; color: var(--heading); }
.rp-blad__faq dd { margin: .5mm 0 0; }
.rp-blad__zij { align-self: start; padding: 1mm 4mm 4mm; background: var(--bg-alt); border-radius: var(--r-md); font-size: 8.5pt; }
.rp-blad__zij h3 { font-size: 10pt; margin: 0 0 1.5mm; padding-top: 3mm; }
.rp-weerblok { display: grid; grid-template-columns: 1fr auto; padding: 1.5mm 0; border-bottom: 1px solid var(--border); }
.rp-weerblok b { text-transform: capitalize; }
.rp-weerblok__temp { grid-row: span 2; align-self: center; font: 600 12pt var(--ff-head); color: var(--c-barro); }
.rp-weerblok span:last-child { font-size: 7.5pt; color: var(--text-muted); }
.rp-jaarstrook { display: grid; grid-template-columns: repeat(12, 1fr); gap: .6mm; margin: 0; padding: 0; list-style: none; }
.rp-jaarstrook li { padding: 1.2mm 0; text-align: center; font-size: 5.8pt; background: #fff; border-radius: 2px; }
.rp-jaarstrook li.best { background: rgb(var(--c-dourado-rgb) / .45); font-weight: 700; }
.rp-jaarstrook li.jij { box-shadow: inset 0 0 0 1.3px var(--heading); }
.rp-blad__oordeel { margin: 1.5mm 0 0; font-size: 8pt; }
.rp-blad__feest { margin: 0; padding-left: 4mm; }
.rp-blad__zij .rp-qr { width: 16mm; height: 16mm; }
.rp-pak h2 { font-size: 15pt; margin: 2mm 0; }
.rp-pak h2 + .rp-noot { margin-top: 0; }
.rp-paklijst { margin: 0 0 6mm; padding: 0; list-style: none; }
.rp-paklijst li { display: grid; grid-template-columns: 6mm 1fr auto; gap: 2mm; align-items: center; padding: 1.8mm 0;
border-bottom: 1px solid var(--border); font-size: 9pt; }
.rp-vakje { width: 3.8mm; height: 3.8mm; border: 1.3px solid var(--heading); border-radius: 1px; }
.rp-paklijst__leeg { height: 4mm; }
.rp-pak .rp-regel { height: 8mm; }
.rp--inkt .rp-maand td.feriado { background: none; color: var(--c-barro); box-shadow: inset 0 0 0 2px var(--c-barro); }
.rp--inkt .rp-maand td.lang, .rp--inkt .rp-bol.lang, .rp--inkt .rp-maandkal__raster td.lang {
background: repeating-linear-gradient(135deg, transparent 0 1.2mm, #c9bfae 1.2mm 1.45mm); }
.rp--inkt .rp-bol.feriado, .rp--inkt .rp-pil.feriado { background: none; color: var(--c-barro); box-shadow: inset 0 0 0 1.5px var(--c-barro); }
.rp--inkt .rp-voetband, .rp--inkt .rp-spiek__voet { background: none; color: var(--text); border-top: 1.5px solid var(--heading); }
.rp--inkt .rp-rapportkop, .rp--inkt .rp-blad__kop, .rp--inkt .rp-spiek__kop, .rp--inkt .rp-omslag, .rp--inkt .rp-boekje__omslag {
background: none; color: var(--text); border-bottom: 2px solid var(--heading); }
.rp--inkt .rp-vel .rp-rapportkop h1, .rp--inkt .rp-vel .rp-blad__kop h1, .rp--inkt .rp-vel .rp-spiek__kop h1,
.rp--inkt .rp-vel.rp-omslag h1, .rp--inkt .rp-vel .rp-boekje__omslag h1 { color: var(--heading); }
.rp--inkt .rp-rapportkop__web { color: var(--text-muted); }
.rp--inkt .rp-tipvak, .rp--inkt .rp-blad__zij, .rp--inkt .rp-klimaat, .rp--inkt .rp-spiek__nood li { background: none; border: 1px solid var(--border); }
.rp--inkt .rp-jouwreis { background: none; }
@media screen and (max-width: 52rem) {
.rp-vellen { padding: var(--s-4) 0; gap: var(--s-4); }
.rp-vel, .rp-vel--liggend { width: 100%; min-height: 0; padding: var(--s-5) var(--gutter) 0; box-shadow: none; }
.rp-vel--telefoon { width: min(100%, 24rem); padding: 6mm 6mm 0; box-shadow: 0 2px 12px rgb(0 0 0 / .14); }
.rp-rapportkop, .rp-blad__kop, .rp-voetband { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.rp-rapportkop { margin-top: calc(var(--s-5) * -1); }
.rp-blad__kop { margin-top: calc(var(--s-5) * -1); }
.rp-omslag { padding: var(--s-7) var(--gutter); }
.rp-vel.rp-omslag h1 { font-size: 40pt; }
.rp-maanden { grid-template-columns: repeat(2, 1fr); }
.rp-dagen li { grid-template-columns: 1fr auto; }
.rp-dagen li .rp-label { grid-column: 1 / -1; }
.rp-best, .rp-jouwreis__twee, .rp-blad__body { grid-template-columns: 1fr; }
.rp-maandkal__kop { flex-direction: column; align-items: stretch; }
.rp-maandkal__raster td { height: 16mm; padding: 1mm; font-size: 6pt; }
.rp-maandkal__raster th { font-size: 0; }
.rp-maandkal__raster th::first-letter { font-size: 7.5pt; }
.rp-boekje { display: flex; flex-direction: column; height: auto; overflow: visible; padding: 0; }
.rp-vak { order: var(--nr); border: 0; border-bottom: 1px solid var(--border); }
.rp-vak--boven { transform: none; }
.rp-boekje__omslag { height: auto; min-height: 60mm; }
.rp-boekje__knip { display: none; }
}
@media print {
@page rp-staand { size: A4; margin: 0; }
@page rp-liggend { size: A4 landscape; margin: 0; }
@page rp-telefoon { size: 95.25mm 169.33mm; margin: 0; }
body:has(.rp-vel) { page: rp-staand; }
body:has(.rp-vel--liggend) { page: rp-liggend; }
body:has(.rp-vel--telefoon) { page: rp-telefoon; }
.rp-werkbalk, .rp-na, .rp-vouwen, .rp-spiek__uitleg, .rp-melding, .overslaan { display: none !important; }
.rp-vellen { display: block; padding: 0; background: none; overflow: visible; }
.rp-vel { page: rp-staand; margin: 0; box-shadow: none; break-after: page; break-inside: avoid-page; }
.rp-vel--liggend { page: rp-liggend; }
.rp-vel--telefoon { page: rp-telefoon; }
.rp-vel:last-of-type { break-after: auto; }
.rp-rapport--bestemmingen { break-before: page; }
.rp-vel a { color: inherit; text-decoration: none; }
.rp-vel a::after { content: none !important; }
}
.rp-kies, .rp-maandpagina { padding-block: var(--s-5) var(--s-8); }
.rp-kies h1, .rp-maandpagina h1 { font-size: var(--f-h1); margin: var(--s-2) 0 var(--s-3); }
.rp-kies__intro, .rp-maandpagina__intro { font-size: var(--f-lead); max-width: var(--measure); margin: 0 0 var(--s-6); }
.rp-knop { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--s-2) var(--s-4);
border: 1.5px solid var(--heading); border-radius: var(--r-md); color: var(--heading); background: transparent;
font: 600 var(--f-ui) var(--ff-body); text-decoration: none; cursor: pointer; }
.rp-knop:hover { background: var(--bg-alt); }
.rp-knop--primair { background: var(--c-mata); border-color: var(--c-mata); color: var(--c-paper); }
.rp-knop--primair:hover { background: var(--c-mata-soft); }
.rp-knop--groot { min-height: 52px; padding-inline: var(--s-6); font-size: var(--f-md); }
.rp-knop[hidden] { display: none; }
.rp-melding { margin: var(--s-3) 0; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--c-barro);
background: var(--bg-alt); max-width: var(--measure); }
.rp-melding--info { border-left-color: var(--c-oceano); }
.rp-formulier { display: grid; gap: var(--s-6); }
.rp-stap { border: 0; margin: 0; padding: 0; min-width: 0; }
.rp-stap[hidden] { display: none; }
.rp-stap > legend { display: flex; align-items: center; gap: var(--s-3); font: 600 var(--f-h3) var(--ff-head); color: var(--heading);
margin-bottom: var(--s-3); }
.rp-stap__nr { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
background: var(--c-mata); color: var(--c-paper); font: 600 var(--f-base) var(--ff-body); }
.rp-stap__alleen { font: 400 var(--f-sm) var(--ff-body); color: var(--text-muted); }
.rp-kaarten { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .rp-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .rp-kaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rp-kaart { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md);
background: var(--bg); cursor: pointer; overflow: hidden; }
.rp-kaart:hover { background: var(--bg-alt); }
.rp-kaart input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rp-kaart:has(input:checked) { border: 2px solid var(--heading); box-shadow: 0 0 0 3px rgb(var(--c-mata-soft-rgb) / .2); }
.rp-kaart:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.rp-kaart__beeld { position: relative; display: block; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.rp-kaart__aanrader { position: absolute; top: var(--s-2); left: var(--s-2); padding: 0 var(--s-2); border-radius: var(--r-pill);
background: var(--c-dourado); color: var(--c-mata-deep); font: 600 var(--f-sm) var(--ff-body); }
.rp-kaart__tekst { display: grid; gap: var(--s-1); padding: var(--s-3); }
.rp-kaart__naam { font: 600 var(--f-md) var(--ff-head); color: var(--heading); }
.rp-kaart__wat { font-size: var(--f-sm); line-height: 1.45; }
.rp-kaart__papier { font-size: var(--f-sm); color: var(--text-muted); }
.rp-schets { display: block; width: 100%; height: auto; aspect-ratio: 120 / 84; padding: var(--s-2); }
.rp-schets .s-vel { fill: var(--c-paper); stroke: #d8cfbe; stroke-width: .6; }
.rp-schets .s-donker { fill: var(--c-mata-deep); }
.rp-schets .s-mata { fill: var(--c-mata); }
.rp-schets .s-zand { fill: var(--c-sand-deep); }
.rp-schets .s-goud { fill: var(--c-dourado); }
.rp-schets .s-barro { fill: var(--c-barro); }
.rp-schets .s-bruin { fill: #6B3A22; }
.rp-schets .s-licht, .rp-schets .s-wit { fill: var(--c-paper); }
.rp-schets .s-grijs { fill: #c9bfae; }
.rp-schets .s-reis { fill: rgb(var(--c-dourado-rgb) / .55); }
.rp-schets .s-lijn { fill: none; stroke: #d8cfbe; stroke-width: .6; }
.rp-schets .s-telefoon { fill: #2b3330; }
.rp-schets .s-stip { stroke: #c9bfae; stroke-width: .6; stroke-dasharray: 1.5 1.5; }
.rp-schets .s-knip { stroke: var(--c-ink-soft); stroke-width: .9; stroke-dasharray: 3 2; }
.rp-knopjes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rp-knopje { position: relative; display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 var(--s-4);
border: 1px solid var(--heading); border-radius: var(--r-md); cursor: pointer; }
.rp-knopje input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rp-knopje:has(input:checked) { background: var(--c-mata); border-color: var(--c-mata); color: var(--c-paper); }
.rp-knopje:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.rp-knopje abbr { text-decoration: none; }
.rp-knopjes--maanden .rp-knopje { padding-inline: var(--s-2); min-width: 3.4rem; }
.rp-datums { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.rp-datums label { display: grid; gap: var(--s-1); font-weight: 600; font-size: var(--f-ui); }
.rp-datums input { font: inherit; font-weight: 400; min-height: 44px; padding: var(--s-2) var(--s-3); border: 1px solid var(--text-muted);
border-radius: var(--r-md); background: var(--bg); color: var(--text); }
.rp-of { color: var(--text-muted); font-size: var(--f-ui); margin: var(--s-4) 0 var(--s-2); max-width: var(--measure); }
.rp-regios { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); align-items: start; }
.rp-regio { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-2) var(--s-3) var(--s-3); margin: 0; }
.rp-regio legend { font-weight: 600; padding: 0 var(--s-1); color: var(--heading); }
.rp-vink { display: flex; gap: var(--s-2); align-items: center; min-height: 40px; }
.rp-vink input { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--c-mata); }
.rp-formulier__actie { margin: 0; }
.rp-extra { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--border); }
.rp-extra h2 { font-size: var(--f-h3); margin-bottom: var(--s-3); }
.rp-extra__lijst { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-3); max-width: var(--measure); }
.rp-extra__lijst span { display: block; color: var(--text-muted); font-size: var(--f-ui); }
.rp-extra__lijst .rp-extra__label { display: inline; color: var(--text); font-weight: 600; }
.rp-werkbalk { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--border); padding-block: var(--s-3); }
.rp-werkbalk__binnen { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; justify-content: space-between; }
.rp-werkbalk__tekst p { margin: 0; }
.rp-werkbalk__soort { font: 600 var(--f-md) var(--ff-head); color: var(--heading); }
.rp-werkbalk__wat { font-size: var(--f-sm); color: var(--text-muted); }
.rp-werkbalk__knoppen { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 52rem) { .rp-werkbalk { position: static; } }
.rp-na { padding-block: var(--s-6) var(--s-8); display: grid; gap: var(--s-5); }
.rp-na__tip, .rp-privacy { max-width: var(--measure); color: var(--text-muted); font-size: var(--f-ui); margin: 0; }
.rp-ook h2 { font-size: var(--f-h3); margin-bottom: var(--s-2); }
.rp-ook ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rp-ook a { display: inline-flex; min-height: 40px; align-items: center; padding: 0 var(--s-3); border-radius: var(--r-pill);
background: var(--bg-alt); color: var(--c-barro); text-decoration: none; font-size: var(--f-ui); }
.rp-ook a:hover { text-decoration: underline; }
.rp-vouwen { margin-top: var(--s-4); }
.rp-vouwen summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.rp-spiek__uitleg { max-width: 22rem; margin: var(--s-3) auto 0; text-align: center; color: var(--text-muted); font-size: var(--f-sm); }
.rp-maandpagina section { margin-top: var(--s-6); max-width: 52rem; }
.rp-maandpagina h2 { font-size: var(--f-h2); margin-bottom: var(--s-3); }
.rp-maandpagina__acties { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.rp-maandpagina .rp-dagen, .rp-maandpagina .rp-best, .rp-maandpagina .rp-drukte, .rp-maandpagina .rp-tips { font-size: var(--f-ui); }
.rp-maandpagina .rp-best a { color: var(--heading); }
.rp-maandnav { display: flex; justify-content: space-between; margin-top: var(--s-7); }
.rp-maandnav a { min-height: 44px; display: inline-flex; align-items: center; }
@media print {
.kop, .voet, .adslot, .pijlers, .verder, .menuknop, .zoekknop, .zoekvenster,
.paginakop__beeld, .paginakop::after, .galerij, .lightbox, .reis-regelen, .affiliate-melding,
.a11y-toggle, .a11y-paneel, .a11y-balk, .voorlees-knop, .print-knop, .kruimel { display: none !important; }
body { background: #fff; color: #000; }
.paginakop { background: none; color: #000; }
.paginakop__inhoud, .paginakop__inhoud h1 { color: #000; padding-block: 0; }
.recept__body { display: block; }
.recept__zij { position: static; }
.sectie { padding-block: var(--s-4); }
a { color: #000; text-decoration: none; }
a[href^="http"]:not([rel~="sponsored"])::after { content: " (" attr(href) ")"; font-size: var(--f-sm); }
}
@media print {
@page { size: A4; margin: 0; }
html, body { background: #FBF6EE; }
.recept { font-size: 8.9pt; line-height: 1.33; color: var(--c-ink);
-webkit-print-color-adjust: exact; print-color-adjust: exact; }
.recept .wrap { max-width: none; padding-inline: 12mm; }
.recept { display: flex; flex-direction: column; min-height: 296mm; }
.recept .paginakop__byline, .recept__intro, .recept__verhaal, .recept__print, .ingredienten__kop .knop,
.recept .allergenen__noot, .recept .feesten-hier, .recept .partnerblok, .recept .affiliate-melding,
.reageren { display: none !important; }
.recept .paginakop { height: 46mm; background: var(--c-mata-deep); display: flex; }
.recept .paginakop__beeld { display: block !important; }
.recept .paginakop__img { opacity: 1; }
.recept .paginakop::after { display: block !important;
background: linear-gradient(180deg, rgb(var(--c-mata-deep-rgb) / .1), rgb(var(--c-mata-deep-rgb) / .75)); }
.recept .paginakop__inhoud { display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
width: 100%; padding: 0 12mm 5mm !important; text-align: center; color: #F6E7CF; }
.recept .paginakop__inhoud h1 { order: 1; color: #F6E7CF; font-size: 34pt; font-weight: 700; line-height: 1.05; margin: 0; }
.recept .paginakop__soort { order: 2; color: #F6E7CF; font-size: 7.5pt; letter-spacing: 2.4pt; margin-top: 2mm; }
.recept--print-zonder-foto .paginakop { height: auto; }
.recept--print-zonder-foto .paginakop__beeld, .recept--print-zonder-foto .paginakop::after { display: none !important; }
.recept--print-zonder-foto .paginakop__inhoud { padding-block: 12mm 6mm !important; }
.printband { display: block; background: var(--c-mata); color: #F6E7CF; text-align: center; padding: 2.2mm 12mm;
font: italic 500 11pt var(--ff-head); }
.printband__site { font: normal 600 7.5pt var(--ff-body); letter-spacing: 1.4pt; text-transform: uppercase; }
.printband__site::before { content: "·"; margin: 0 3mm; }
.recept--print-zonder-voet .printvoet { display: none !important; }
.recept-feiten { margin: 0; padding: 2.5mm 0 0; border: 0; box-shadow: none; background: none; justify-content: center; }
.recept-feiten__cijfers { gap: 0 6mm; justify-content: center; }
.recept-feiten__cijfers div { flex-direction: row; gap: 1.5mm; align-items: baseline; }
.kg__label { font-size: 7pt; }
.kg__waarde { font: 600 9pt var(--ff-body); }
.recept .alcoholmelding { margin: 2mm 0 0; padding: 1.2mm 3mm; font-size: 7.4pt; gap: 2mm; }
.recept .alcoholmelding__badge { transform: scale(.75); }
.recept__body { display: grid !important; grid-template-columns: 66mm 1fr; gap: 0 8mm; padding-block: 3mm 4mm;
grid-template-areas: none; align-items: start; }
.recept__zij { position: static; display: block; grid-column: 1; grid-row: 1 / span 40; }
.bereiding { display: contents; }
.bereiding > * { grid-column: 2; }
.bereiding > .notitie { grid-column: 1 / -1; }
.ingr-kaart { border: 0; padding: 0; background: none; }
.ingredienten__kop h2, .bereiding > h2, .recept .notitie__kop {
display: block; width: 100%; background: var(--c-sand-deep); color: var(--c-mata); text-align: center;
font: 600 12pt var(--ff-head); padding: 1.2mm; margin: 0 0 2.5mm; border-radius: 1mm; }
.ingredienten__kop { display: block; }
.ingr__lijst { gap: 0; margin-top: 0; }
.ingr label { padding: .35mm 0; border: 0; gap: 1.5mm; }
.ingr__vink { appearance: none; width: 3mm; height: 3mm; border: .3mm solid var(--c-ink-soft); border-radius: .6mm; }
.ingr__hoev { color: var(--c-ink); }
.ingr__opm { display: inline; font-size: 8pt; }
.ingr__opm::before { content: " · "; }
.ingr__vink { margin-top: .6mm; }
.ingr__groep { font-size: 8.5pt; margin-top: 2.5mm; text-transform: uppercase; letter-spacing: .6pt; }
.equipment { margin-top: 2mm; }
.equipment h3, .recept .allergenen h3 { font-size: 7.6pt; text-transform: uppercase; letter-spacing: .6pt; margin: 0; }
.equipment ul { font-size: 7.6pt; display: block; padding: 0; margin-top: .5mm; }
.equipment li { display: inline; padding: 0; }
.equipment li::before { content: none; }
.equipment li + li::before { content: " · "; position: static; }
.recept .allergenen { margin-top: 2mm; padding-top: 1.5mm; }
.recept .allergenen__regel, .recept .allergenen__chip { font-size: 7.4pt; }
.recept .allergenen__regel { display: inline; margin: 0 1mm 0 0; }
.recept .allergenen__lijst { display: inline-flex; gap: 1mm; margin: 0 2mm .8mm 0; vertical-align: middle; }
.recept .allergenen__chip { padding: 0 1.5mm; }
.bereiding > h2 { margin-bottom: 3mm; }
.stap__groep { font: 600 8.5pt var(--ff-body); color: var(--c-barro); text-transform: uppercase; letter-spacing: .8pt;
margin: 3mm 0 1.5mm; }
.bereiding > h2 + .stap__groep { margin-top: 0; }
.stappen { gap: .6mm; }
.stap { gap: 2.5mm; break-inside: avoid; }
.stap__nr { width: 5mm; height: 5mm; font: 600 7pt var(--ff-body); }
.stap__tekst p { max-width: none; }
.recept .notitie { margin-top: 2mm; padding: 0; border: 0; background: none; }
.recept .notitie .tips { display: block; columns: 2; column-gap: 8mm; font-size: 8.2pt; }
.recept .notitie .tips li { break-inside: avoid; margin-bottom: .8mm; }
.printvoet { display: flex; align-items: center; justify-content: space-between; gap: 8mm; margin-top: auto;
background: #5B2F25; color: #F6E7CF; padding: 1.6mm 12mm; font-size: 8pt; letter-spacing: 1.4pt;
text-transform: uppercase; font-weight: 600; break-inside: avoid; }
.printvoet__qr { background: #fff; padding: 1.2mm; line-height: 0; }
.printvoet__qr svg { width: 11mm; height: 11mm; }
}