/*!
 * Bootstrap Icons v1.13.1 (https://icons.getbootstrap.com/)
 * Copyright 2019-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
 */ @font-face{font-display:block;font-family:"bootstrap-icons";src:url("/assets/fonts/bootstrap-icons-subset.woff2?0c723dcce2") format("woff2")} .bi::before,[class*=" bi-"]::before,[class^=bi-]::before{display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:400!important;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .bi-1-circle::before{content:"\f797"} .bi-1-circle-fill::before{content:"\f796"} .bi-2-circle::before{content:"\f79d"} .bi-2-circle-fill::before{content:"\f79c"} .bi-3-circle::before{content:"\f7a3"} .bi-3-circle-fill::before{content:"\f7a2"} .bi-4-circle::before{content:"\f7a9"} .bi-4-circle-fill::before{content:"\f7a8"} .bi-5-circle::before{content:"\f7af"} .bi-6-circle::before{content:"\f7b5"} .bi-7-circle::before{content:"\f7bb"} .bi-activity::before{content:"\f66b"} .bi-arrow-bar-down::before{content:"\f112"} .bi-arrow-counterclockwise::before{content:"\f117"} .bi-arrow-down::before{content:"\f128"} .bi-arrow-down-circle::before{content:"\f119"} .bi-arrow-down-square::before{content:"\f126"} .bi-arrow-down-up::before{content:"\f127"} .bi-arrow-left::before{content:"\f12f"} .bi-arrow-left-right::before{content:"\f12b"} .bi-arrow-repeat::before{content:"\f130"} .bi-arrow-return-left::before{content:"\f131"} .bi-arrow-right::before{content:"\f138"} .bi-arrow-up::before{content:"\f148"} .bi-arrow-up-right::before{content:"\f144"} .bi-arrow-up-right-circle::before{content:"\f141"} .bi-arrows-angle-contract::before{content:"\f149"} .bi-arrows-angle-expand::before{content:"\f14a"} .bi-arrows-collapse::before{content:"\f14b"} .bi-arrows-expand::before{content:"\f14c"} .bi-arrows-move::before{content:"\f14e"} .bi-arrows-vertical::before{content:"\f698"} .bi-aspect-ratio::before{content:"\f150"} .bi-award::before{content:"\f154"} .bi-bag::before{content:"\f179"} .bi-bank::before{content:"\f62e"} .bi-bell::before{content:"\f18a"} .bi-binoculars::before{content:"\f18f"} .bi-book-half::before{content:"\f193"} .bi-bookmark::before{content:"\f1a2"} .bi-bookmark-star::before{content:"\f19f"} .bi-bounding-box::before{content:"\f1b6"} .bi-box::before{content:"\f1c8"} .bi-box-arrow-in-down::before{content:"\f1bc"} .bi-box-arrow-in-right::before{content:"\f1be"} .bi-box-arrow-right::before{content:"\f1c3"} .bi-box-arrow-up-right::before{content:"\f1c5"} .bi-box-seam::before{content:"\f1c7"} .bi-box2::before{content:"\f70d"} .bi-boxes::before{content:"\f685"} .bi-braces::before{content:"\f1c9"} .bi-bricks::before{content:"\f1ca"} .bi-briefcase::before{content:"\f1cc"} .bi-briefcase-fill::before{content:"\f1cb"} .bi-broadcast::before{content:"\f1d6"} .bi-broadcast-pin::before{content:"\f1d5"} .bi-brush::before{content:"\f1d8"} .bi-bug::before{content:"\f1dc"} .bi-building::before{content:"\f1dd"} .bi-building-check::before{content:"\f868"} .bi-buildings::before{content:"\f87d"} .bi-calculator::before{content:"\f1e0"} .bi-calendar-check::before{content:"\f1e2"} .bi-calendar-event::before{content:"\f1e8"} .bi-calendar-week::before{content:"\f1f3"} .bi-calendar-x::before{content:"\f1f5"} .bi-calendar2-check::before{content:"\f1f8"} .bi-calendar2-event::before{content:"\f1fe"} .bi-calendar3::before{content:"\f214"} .bi-camera::before{content:"\f220"} .bi-camera-fill::before{content:"\f219"} .bi-camera-video::before{content:"\f21f"} .bi-camera-video-fill::before{content:"\f21c"} .bi-cart::before{content:"\f242"} .bi-cart-check::before{content:"\f23a"} .bi-cash-coin::before{content:"\f632"} .bi-chat::before{content:"\f268"} .bi-chat-dots::before{content:"\f24a"} .bi-chat-left-dots::before{content:"\f24d"} .bi-chat-left-dots-fill::before{content:"\f24c"} .bi-chat-left-text::before{content:"\f252"} .bi-chat-square-heart::before{content:"\f71a"} .bi-check-circle::before{content:"\f26b"} .bi-check-circle-fill::before{content:"\f26a"} .bi-check2::before{content:"\f272"} .bi-check2-circle::before{content:"\f270"} .bi-check2-square::before{content:"\f271"} .bi-chevron-down::before{content:"\f282"} .bi-chevron-left::before{content:"\f284"} .bi-chevron-right::before{content:"\f285"} .bi-circle::before{content:"\f28a"} .bi-circle-half::before{content:"\f288"} .bi-clipboard::before{content:"\f290"} .bi-clipboard-check::before{content:"\f28b"} .bi-clipboard-data::before{content:"\f28c"} .bi-clipboard-data-fill::before{content:"\f71c"} .bi-clipboard-x::before{content:"\f28f"} .bi-clock::before{content:"\f293"} .bi-clock-history::before{content:"\f292"} .bi-cloud::before{content:"\f2c1"} .bi-cloud-arrow-up::before{content:"\f297"} .bi-cloud-check::before{content:"\f299"} .bi-cloud-fill::before{content:"\f29e"} .bi-cloud-slash::before{content:"\f2b8"} .bi-code-slash::before{content:"\f2c6"} .bi-columns-gap::before{content:"\f2cd"} .bi-compass::before{content:"\f2d1"} .bi-copy::before{content:"\f759"} .bi-cpu::before{content:"\f2d6"} .bi-crosshair::before{content:"\f769"} .bi-cup-hot::before{content:"\f7eb"} .bi-currency-euro::before{content:"\f637"} .bi-dash-lg::before{content:"\f63b"} .bi-database::before{content:"\f8c4"} .bi-diagram-2::before{content:"\f2ec"} .bi-diagram-3::before{content:"\f2ee"} .bi-diagram-3-fill::before{content:"\f2ed"} .bi-display::before{content:"\f302"} .bi-distribute-vertical::before{content:"\f304"} .bi-door-closed::before{content:"\f306"} .bi-download::before{content:"\f30a"} .bi-droplet::before{content:"\f30d"} .bi-droplet-fill::before{content:"\f30b"} .bi-droplet-half::before{content:"\f30c"} .bi-easel::before{content:"\f310"} .bi-emoji-frown::before{content:"\f31d"} .bi-envelope::before{content:"\f32f"} .bi-envelope-at::before{content:"\f84c"} .bi-envelope-fill::before{content:"\f32c"} .bi-envelope-paper::before{content:"\f73d"} .bi-ethernet::before{content:"\f6d5"} .bi-exclamation-circle::before{content:"\f333"} .bi-exclamation-circle-fill::before{content:"\f332"} .bi-exclamation-triangle::before{content:"\f33b"} .bi-exclamation-triangle-fill::before{content:"\f33a"} .bi-eye::before{content:"\f341"} .bi-eye-slash::before{content:"\f340"} .bi-facebook::before{content:"\f344"} .bi-fan::before{content:"\f670"} .bi-file-earmark-check::before{content:"\f360"} .bi-file-earmark-lock::before{content:"\f36f"} .bi-file-earmark-pdf::before{content:"\f63e"} .bi-file-earmark-text::before{content:"\f38b"} .bi-file-earmark-x::before{content:"\f38f"} .bi-file-text::before{content:"\f3b9"} .bi-files::before{content:"\f3c2"} .bi-filetype-txt::before{content:"\f766"} .bi-filter::before{content:"\f3ca"} .bi-fingerprint::before{content:"\f671"} .bi-fire::before{content:"\f7f6"} .bi-flag::before{content:"\f3cc"} .bi-flower1::before{content:"\f3cd"} .bi-folder-fill::before{content:"\f3d1"} .bi-folder2-open::before{content:"\f3d8"} .bi-funnel::before{content:"\f3e1"} .bi-funnel-fill::before{content:"\f3e0"} .bi-gear::before{content:"\f3e5"} .bi-gear-fill::before{content:"\f3e2"} .bi-gear-wide-connected::before{content:"\f3e3"} .bi-gem::before{content:"\f3e6"} .bi-geo-alt::before{content:"\f3e8"} .bi-geo-alt-fill::before{content:"\f3e7"} .bi-gift::before{content:"\f3ec"} .bi-globe::before{content:"\f3ee"} .bi-globe-americas::before{content:"\f882"} .bi-globe2::before{content:"\f3ef"} .bi-graph-down-arrow::before{content:"\f672"} .bi-graph-up::before{content:"\f3f2"} .bi-graph-up-arrow::before{content:"\f673"} .bi-grid::before{content:"\f3fc"} .bi-grid-1x2::before{content:"\f3f4"} .bi-grid-3x2-gap::before{content:"\f3f6"} .bi-grid-3x3-gap::before{content:"\f3f9"} .bi-grid-fill::before{content:"\f3fb"} .bi-hand-index::before{content:"\f403"} .bi-hand-thumbs-up::before{content:"\f407"} .bi-hand-thumbs-up-fill::before{content:"\f406"} .bi-hdd::before{content:"\f412"} .bi-hdd-fill::before{content:"\f40b"} .bi-hdd-network::before{content:"\f40d"} .bi-hdd-network-fill::before{content:"\f40c"} .bi-hdd-rack::before{content:"\f40f"} .bi-hdd-stack::before{content:"\f411"} .bi-hdd-stack-fill::before{content:"\f410"} .bi-headset::before{content:"\f414"} .bi-heart::before{content:"\f417"} .bi-heart-pulse::before{content:"\f76f"} .bi-hourglass-bottom::before{content:"\f41e"} .bi-hourglass-split::before{content:"\f41f"} .bi-house::before{content:"\f425"} .bi-house-add::before{content:"\f887"} .bi-house-check::before{content:"\f889"} .bi-house-check-fill::before{content:"\f888"} .bi-house-door::before{content:"\f423"} .bi-house-door-fill::before{content:"\f422"} .bi-house-gear::before{content:"\f891"} .bi-house-gear-fill::before{content:"\f890"} .bi-house-heart::before{content:"\f776"} .bi-hr::before{content:"\f426"} .bi-image::before{content:"\f42a"} .bi-images::before{content:"\f42b"} .bi-inbox::before{content:"\f42d"} .bi-inboxes::before{content:"\f42f"} .bi-info-circle::before{content:"\f431"} .bi-info-circle-fill::before{content:"\f430"} .bi-info-square::before{content:"\f433"} .bi-instagram::before{content:"\f437"} .bi-journal-check::before{content:"\f43e"} .bi-journal-code::before{content:"\f43f"} .bi-journal-text::before{content:"\f444"} .bi-journals::before{content:"\f447"} .bi-key::before{content:"\f44f"} .bi-layout-sidebar::before{content:"\f45f"} .bi-layout-text-window::before{content:"\f464"} .bi-layout-text-window-reverse::before{content:"\f463"} .bi-layout-three-columns::before{content:"\f465"} .bi-lightbulb::before{content:"\f46b"} .bi-lightbulb-fill::before{content:"\f468"} .bi-lightning::before{content:"\f46f"} .bi-lightning-charge::before{content:"\f46d"} .bi-lightning-charge-fill::before{content:"\f46c"} .bi-link-45deg::before{content:"\f470"} .bi-linkedin::before{content:"\f472"} .bi-list::before{content:"\f479"} .bi-list-check::before{content:"\f473"} .bi-list-ol::before{content:"\f475"} .bi-list-ul::before{content:"\f478"} .bi-lock::before{content:"\f47b"} .bi-magic::before{content:"\f675"} .bi-map::before{content:"\f47f"} .bi-map-fill::before{content:"\f47e"} .bi-microsoft::before{content:"\f65d"} .bi-moisture::before{content:"\f493"} .bi-moon-stars::before{content:"\f496"} .bi-moon-stars-fill::before{content:"\f495"} .bi-mortarboard::before{content:"\f6fe"} .bi-mortarboard-fill::before{content:"\f6fd"} .bi-newspaper::before{content:"\f4a3"} .bi-p-square-fill::before{content:"\f806"} .bi-patch-check::before{content:"\f4b6"} .bi-patch-check-fill::before{content:"\f4b5"} .bi-patch-exclamation::before{content:"\f4b8"} .bi-pause-fill::before{content:"\f4c3"} .bi-pc-display::before{content:"\f6a6"} .bi-pencil-square::before{content:"\f4ca"} .bi-people::before{content:"\f4d0"} .bi-people-fill::before{content:"\f4cf"} .bi-percent::before{content:"\f4d1"} .bi-person::before{content:"\f4e1"} .bi-person-badge::before{content:"\f4d3"} .bi-person-check::before{content:"\f4d6"} .bi-person-circle::before{content:"\f4d7"} .bi-person-dash::before{content:"\f4d9"} .bi-person-gear::before{content:"\f8a7"} .bi-person-heart::before{content:"\f77a"} .bi-person-lock::before{content:"\f8a8"} .bi-person-plus::before{content:"\f4dd"} .bi-person-square::before{content:"\f4de"} .bi-person-vcard::before{content:"\f8c9"} .bi-phone::before{content:"\f4e7"} .bi-phone-landscape::before{content:"\f4e4"} .bi-piggy-bank::before{content:"\f64a"} .bi-pin-angle::before{content:"\f4eb"} .bi-pin-map::before{content:"\f64c"} .bi-play-circle::before{content:"\f4f3"} .bi-play-fill::before{content:"\f4f4"} .bi-plug::before{content:"\f4f7"} .bi-plug-fill::before{content:"\f4f6"} .bi-plus-circle::before{content:"\f4fa"} .bi-plus-lg::before{content:"\f64d"} .bi-plus-square::before{content:"\f4fd"} .bi-power::before{content:"\f4ff"} .bi-puzzle::before{content:"\f503"} .bi-question-circle::before{content:"\f505"} .bi-question-circle-fill::before{content:"\f504"} .bi-question-diamond::before{content:"\f507"} .bi-record-circle::before{content:"\f518"} .bi-recycle::before{content:"\f64f"} .bi-router-fill::before{content:"\f6eb"} .bi-rulers::before{content:"\f523"} .bi-search::before{content:"\f52a"} .bi-send::before{content:"\f6c0"} .bi-send-fill::before{content:"\f6b9"} .bi-server::before{content:"\f52c"} .bi-share::before{content:"\f52e"} .bi-share-fill::before{content:"\f52d"} .bi-shield::before{content:"\f53f"} .bi-shield-check::before{content:"\f52f"} .bi-shield-exclamation::before{content:"\f530"} .bi-shield-fill-check::before{content:"\f531"} .bi-shield-lock::before{content:"\f538"} .bi-shield-lock-fill::before{content:"\f537"} .bi-shield-slash::before{content:"\f53d"} .bi-shop::before{content:"\f543"} .bi-shop-window::before{content:"\f542"} .bi-shuffle::before{content:"\f544"} .bi-signpost::before{content:"\f54a"} .bi-signpost-2::before{content:"\f546"} .bi-signpost-2-fill::before{content:"\f545"} .bi-signpost-split::before{content:"\f549"} .bi-slash-circle::before{content:"\f567"} .bi-sliders::before{content:"\f56b"} .bi-sliders2::before{content:"\f789"} .bi-snow::before{content:"\f56d"} .bi-snow2::before{content:"\f56e"} .bi-speedometer::before{content:"\f57f"} .bi-speedometer2::before{content:"\f580"} .bi-square::before{content:"\f584"} .bi-square-half::before{content:"\f583"} .bi-star::before{content:"\f588"} .bi-star-fill::before{content:"\f586"} .bi-star-half::before{content:"\f587"} .bi-stars::before{content:"\f589"} .bi-sun::before{content:"\f5a2"} .bi-sun-fill::before{content:"\f5a1"} .bi-table::before{content:"\f5aa"} .bi-tag::before{content:"\f5b0"} .bi-tag-fill::before{content:"\f5af"} .bi-tags::before{content:"\f5b2"} .bi-telephone::before{content:"\f5c1"} .bi-telephone-fill::before{content:"\f5b4"} .bi-telephone-forward-fill::before{content:"\f5b5"} .bi-telephone-outbound::before{content:"\f5bc"} .bi-telephone-outbound-fill::before{content:"\f5bb"} .bi-terminal::before{content:"\f5c3"} .bi-text-paragraph::before{content:"\f5c8"} .bi-thermometer-half::before{content:"\f5cd"} .bi-thermometer-high::before{content:"\f5ce"} .bi-thermometer-low::before{content:"\f5cf"} .bi-thermometer-snow::before{content:"\f5d0"} .bi-thermometer-sun::before{content:"\f5d1"} .bi-three-dots::before{content:"\f5d4"} .bi-tiktok::before{content:"\f6cc"} .bi-toggles::before{content:"\f5d9"} .bi-tools::before{content:"\f5db"} .bi-trash::before{content:"\f5de"} .bi-trash3::before{content:"\f78b"} .bi-tree::before{content:"\f5e2"} .bi-tree-fill::before{content:"\f5e1"} .bi-trophy::before{content:"\f5e7"} .bi-truck::before{content:"\f5ea"} .bi-twitter-x::before{content:"\f8db"} .bi-type-h1::before{content:"\f5f1"} .bi-type-h2::before{content:"\f5f2"} .bi-universal-access::before{content:"\f826"} .bi-upc-scan::before{content:"\f601"} .bi-upload::before{content:"\f603"} .bi-volume-down::before{content:"\f60b"} .bi-volume-down-fill::before{content:"\f60a"} .bi-volume-up::before{content:"\f611"} .bi-water::before{content:"\f617"} .bi-whatsapp::before{content:"\f618"} .bi-wifi::before{content:"\f61c"} .bi-wifi-off::before{content:"\f61b"} .bi-wind::before{content:"\f61d"} .bi-window::before{content:"\f620"} .bi-window-dock::before{content:"\f61e"} .bi-window-sidebar::before{content:"\f61f"} .bi-wrench::before{content:"\f621"} .bi-wrench-adjustable::before{content:"\f790"} .bi-wrench-adjustable-circle-fill::before{content:"\f78e"} .bi-x-circle::before{content:"\f623"} .bi-x-lg::before{content:"\f659"} .bi-x-octagon-fill::before{content:"\f626"} .bi-youtube::before{content:"\f62b"} .bi-zoom-in::before{content:"\f62c"} .bi-zoom-out::before{content:"\f62d"}
.skip-to-content { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.cms-bladeren { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; margin: var(--cms-bladeren-marge, 1.5rem 0 0); color: var(--cms-bladeren-stand-kleur, inherit); } .cms-bladeren[hidden] { display: none; } .cms-bladeren--boven { margin: var(--cms-bladeren-marge-boven, 0 0 1rem); } .cms-bladeren__terug, .cms-bladeren__verder { display: flex; align-items: center; gap: .4rem; min-width: 0; } .cms-bladeren__terug { justify-self: start; } .cms-bladeren__verder { justify-self: end; } .cms-bladeren__stand { justify-self: center; white-space: nowrap; font-size: .875rem; font-variant-numeric: tabular-nums; } .cms-bladeren__knop { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 44px; min-width: 44px; white-space: nowrap; text-decoration: none; } .cms-bladeren__knop--standaard { padding: 0 .85rem; border: 1px solid var(--cms-bladeren-rand, currentColor); border-radius: var(--cms-bladeren-radius, 8px); background: var(--cms-bladeren-vlak, transparent); color: var(--cms-bladeren-kleur, inherit); font-weight: 600; font-size: .875rem; line-height: 1.2; } .cms-bladeren__knop--standaard:not(.is-uit):hover { background: var(--cms-bladeren-vlak-hover, transparent); text-decoration: underline; } .cms-bladeren__knop--standaard:focus-visible { outline: 2px solid var(--cms-bladeren-focus, currentColor); outline-offset: 2px; } .cms-bladeren__knop.is-uit { opacity: 1; cursor: default; pointer-events: none; } .cms-bladeren__icoon { flex: 0 0 auto; } @media (max-width: 479.98px) { .cms-bladeren { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "terug . verder" "stand stand stand"; gap: .3rem .35rem; } .cms-bladeren__terug { grid-area: terug; gap: .3rem; } .cms-bladeren__verder { grid-area: verder; gap: .3rem; } .cms-bladeren__stand { grid-area: stand; } .cms-bladeren .cms-bladeren__knop { padding-left: .6rem; padding-right: .6rem; } .cms-bladeren__knop--home .cms-bladeren__woord { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .cms-bladeren .cms-bladeren__knop--home { padding-left: 0; padding-right: 0; } }
[data-fr-body] { display: grid; grid-template-columns: var(--fr-rail-links) minmax(0, 1fr) var(--fr-rail-rechts); gap: var(--fr-gap); align-items: stretch; max-width: var(--fr-max); margin: 0 auto; width: 100%; flex: 1 0 auto; } [data-fr-rail] { min-width: 0; padding: 1.25rem 0.9rem 1.5rem; } [data-fr-rail]:first-child { border-right: 1px solid var(--fr-rand); } [data-fr-rail]:last-child { border-left: 1px solid var(--fr-rand); } .fr-rail-inhoud { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; } #fr-main { min-width: 0; display: flex; flex-direction: column; gap: 2.5rem; padding: 1.6rem 0.9rem 3.5rem; } @media (min-width: 1280px) and (max-width: 1439px) { html[data-schaal="normaal"] [data-fr-body], html[data-schaal="groot"] [data-fr-body] { grid-template-columns: var(--fr-rail-links) minmax(0, 1fr); } html[data-schaal="normaal"] [data-fr-body] > aside[data-fr-rail]:last-child, html[data-schaal="groot"] [data-fr-body] > aside[data-fr-rail]:last-child { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--fr-rand); } html[data-schaal="normaal"] [data-fr-body] > aside[data-fr-rail]:last-child .fr-rail-inhoud, html[data-schaal="groot"] [data-fr-body] > aside[data-fr-rail]:last-child .fr-rail-inhoud { position: static; } } @media (min-width: 1440px) and (max-width: 1599px) { html[data-schaal="groot"] [data-fr-body] { grid-template-columns: var(--fr-rail-links) minmax(0, 1fr); } html[data-schaal="groot"] [data-fr-body] > aside[data-fr-rail]:last-child { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--fr-rand); } html[data-schaal="groot"] [data-fr-body] > aside[data-fr-rail]:last-child .fr-rail-inhoud { position: static; } } @media (max-width: 1279px) { [data-fr-body] { grid-template-columns: var(--fr-rail-links) minmax(0, 1fr); } [data-fr-body] > aside[data-fr-rail]:last-child { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--fr-rand); } [data-fr-body] > aside[data-fr-rail]:last-child .fr-rail-inhoud { position: static; } } @media (max-width: 1024px) { [data-fr-body] { display: flex; flex-direction: column; } [data-fr-body] > main { order: 1; } [data-fr-body] > aside[data-fr-rail]:first-child { order: 2; border-right: none; } [data-fr-body] > aside[data-fr-rail]:last-child { order: 3; border-left: none; border-top: 1px solid var(--fr-rand); } .fr-rail-inhoud { position: static; } } @media (max-width: 719px) { [data-fr-body] > aside[data-fr-rail]:last-child { display: none; } #fr-main { padding-left: 1.25rem; padding-right: 1.25rem; } } @media (max-width: 1024px) { [data-fr-body] { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } }
body { zoom: var(--letterschaal, 1); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body.fr-body { background: var(--fr-bg); color: var(--fr-tekst); font-family: var(--fr-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } a { color: var(--fr-link); } a:hover { color: var(--fr-blauwh); } ::selection { background: rgba(232, 169, 59, 0.35); } ::placeholder { color: var(--fr-stil); opacity: 0.75; } img, svg, video { max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } summary::-webkit-details-marker { display: none; } summary { list-style: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--fr-geel); outline-offset: 2px; border-radius: 4px; } .skip-to-content { background: var(--fr-blauw); color: var(--fr-knoptekst); font: 600 15px/1.2 var(--fr-sans); } #fr-main p { text-wrap: pretty; } #fr-main h1, #fr-main h2, #fr-main h3 { text-wrap: pretty; } .fr-merk { justify-self: start; display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--fr-tekst); min-width: 0; } .fr-merk:hover { color: var(--fr-tekst); } .fr-merkteken { flex: none; width: 36px; height: 36px; } .fr-merk-tekst { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .fr-merk-naam { display: block; font: 700 1.25rem/1.2 var(--fr-serif); color: var(--fr-tekst); letter-spacing: -0.01em; } .fr-merk-staart { color: var(--fr-sd-t); } .fr-merk-sub { display: block; font: 400 0.75rem/1.2 var(--fr-sans); color: var(--fr-stil); } .fr-thema-knop { gap: 0.45rem; height: 2.5rem; padding: 0 0.85rem; border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek-knop); background: var(--fr-kaart); color: var(--fr-tekst); font: 600 0.875rem/1 var(--fr-sans); cursor: pointer; white-space: nowrap; transition: background 0.15s; } .fr-thema-knop:hover { background: var(--fr-tint); } .fr-knop-primair { display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; padding: 0 1.15rem; font: 700 0.9375rem/1 var(--fr-sans); color: var(--fr-actietekst); background: var(--fr-actie); border: 1px solid var(--fr-actie); border-radius: var(--fr-hoek-knop); text-decoration: none; white-space: nowrap; transition: background 0.15s; cursor: pointer; } .fr-knop-primair:hover { background: var(--fr-actiehover); border-color: var(--fr-actiehover); color: var(--fr-actietekst); } .fr-knop-secundair { display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; padding: 0 1.1rem; font: 600 0.9rem/1 var(--fr-sans); color: var(--fr-blauw); background: transparent; border: 1px solid var(--fr-blauw); border-radius: var(--fr-hoek-knop); text-decoration: none; white-space: nowrap; transition: background 0.15s; cursor: pointer; } .fr-knop-secundair:hover { background: var(--fr-tint); color: var(--fr-blauw); } .fr-kaart { background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek); padding: 0.85rem 0.7rem; } .fr-kicker { font: 700 0.75rem/1.4 var(--fr-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fr-stil); } .fr-kicker-mono { font: 700 0.6875rem/1.4 var(--fr-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fr-stil); } .fr-kicker-goud { color: var(--fr-sd-t); } .fr-kicker-dubbel { padding: 0 0.5rem; } .fr-pijl { display: none; } .fr-weer-mobiel { display: none; background: var(--fr-voet); border-radius: var(--fr-hoek); color: var(--fr-voet-tekst); } .fr-weer-mobiel summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; cursor: pointer; } .fr-weer-mobiel-temp { font: 700 1.25rem/1 var(--fr-serif); color: #FFFFFF; } .fr-weer-mobiel-desc { font: 400 0.875rem/1.4 var(--fr-sans); color: var(--fr-voet-stil); } .fr-weer-mobiel-label { margin-left: auto; font: 400 0.6875rem/1.4 var(--fr-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fr-voet-stil); } .fr-weer-mobiel .pw-widget { border-radius: 0 0 var(--fr-hoek) var(--fr-hoek); } .fr-sectie { display: flex; flex-direction: column; gap: 1.1rem; } .fr-sectiekop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 2px solid var(--fr-tekst); padding-bottom: 0.45rem; } .fr-sectiekop h2 { margin: 0; font: 700 1.5rem/1.25 var(--fr-serif); color: var(--fr-tekst); } .fr-sectiekop .fr-meer { font: 600 0.9375rem/1 var(--fr-sans); color: var(--fr-blauw); text-decoration: none; white-space: nowrap; } .fr-sectiekop .fr-meer:hover { text-decoration: underline; } .fr-sectie-kicker { margin: 0 0 -0.8rem; cursor: help; } .fr-titel { margin: 0 0 0.6rem; font: 700 2.375rem/1.12 var(--fr-serif); letter-spacing: -0.01em; color: var(--fr-tekst); } .fr-prose { font-size: 1rem; line-height: 1.7; color: var(--fr-tekst); } .fr-prose h2 { font: 700 1.5rem/1.25 var(--fr-serif); color: var(--fr-tekst); margin: 1.8rem 0 0.6rem; } .fr-prose h3 { font: 700 1.125rem/1.3 var(--fr-serif); color: var(--fr-tekst); margin: 1.4rem 0 0.5rem; } .fr-prose p { margin: 0 0 0.9rem; text-wrap: pretty; } .fr-prose ul, .fr-prose ol { margin: 0 0 0.9rem; padding-left: 1.4rem; } .fr-prose li { margin-bottom: 0.35rem; } .fr-prose img { border-radius: var(--fr-hoek); } .fr-prose a { color: var(--fr-blauw); } .fr-prose-lead > p:first-child { font: 400 1.0625rem/1.6 var(--fr-sans); color: var(--fr-stil); border-bottom: 1px solid var(--fr-rand); padding-bottom: 1.1rem; margin-bottom: 1.1rem; } .fr-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.1rem; } .fr-prose th, .fr-prose td { border: 1px solid var(--fr-rand); padding: 0.55rem 0.75rem; text-align: left; } .fr-prose th { background: var(--fr-bg); font: 600 0.875rem/1.4 var(--fr-sans); } .fr-artikel { display: flex; flex-direction: column; align-items: stretch; } .fr-artikel > * { max-width: 100%; } .fr-artikel > .fr-knop-primair, .fr-artikel > .fr-knop-secundair, .fr-artikel > .fr-terug, .fr-artikel > .fr-vangnet-badge { align-self: flex-start; } .fr-vangnet-badge { display: inline-block; font: 700 0.6875rem/1.4 var(--fr-sans); letter-spacing: 0.06em; text-transform: uppercase; background: var(--fr-tint); color: var(--fr-blauw); padding: 0.25rem 0.7rem; border-radius: 999px; } .fr-vangnet-badge + .fr-titel { margin-top: 0.6rem; } .fr-vangnet-tekst { margin: 0.1rem 0 0; font: 400 1.0625rem/1.65 var(--fr-sans); color: var(--fr-tekst); } .fr-vangnet-knop { margin-top: 1.2rem; height: auto; padding: 0.65rem 1.3rem; font-weight: 600; gap: 0.5rem; } .fr-vangnet-hulp { margin: 1.4rem 0 0; font: 400 0.875rem/1.5 var(--fr-sans); color: var(--fr-stil); } .fr-vangnet-hulp a { color: var(--fr-blauw); font-weight: 600; text-decoration: none; } .fr-vangnet-hulp a:hover { text-decoration: underline; } .fr-auth-acties { margin: 1rem 0 0; } .fr-hero { display: flex; gap: 2rem; align-items: center; justify-content: space-between; flex-wrap: wrap; } .fr-hero-tekst { flex: 1; min-width: 16rem; } .fr-hero-datum { font: 700 0.75rem/1.4 var(--fr-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fr-stil); margin-bottom: 0.5rem; } .fr-hero h1 { margin: 0 0 0.6rem; font: 700 2.375rem/1.12 var(--fr-serif); letter-spacing: -0.01em; color: var(--fr-tekst); } .fr-hero h1 em { font-style: italic; color: var(--fr-sd-t); } .fr-hero-lead { margin: 0; font: 400 1.0625rem/1.6 var(--fr-sans); color: var(--fr-stil); text-wrap: pretty; } .fr-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 16, 26, 0.6); display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .fr-modal[hidden] { display: none; } .fr-modal-kaart { position: relative; width: min(60rem, 100%); max-height: 90svh; overflow: auto; background: var(--fr-kaart); border: 1px solid var(--fr-rand); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); display: grid; grid-template-columns: 1.05fr 1fr; padding: 0; border-radius: 0; } .fr-modal-links { background: var(--fr-voet); color: var(--fr-voet-tekst); padding: 2rem 2rem 1.6rem; display: flex; flex-direction: column; } .fr-modal-schijf { position: relative; align-self: center; width: 270px; height: 270px; display: flex; align-items: center; justify-content: center; } .fr-modal-schijf svg { position: absolute; inset: 0; width: 270px; height: 270px; } .fr-modal-schijf-tekst { position: relative; display: flex; flex-direction: column; align-items: center; } .fr-modal-schijf-arc, .fr-modal-schijf-sub { font: 400 0.625rem/1.4 var(--fr-mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--fr-voet-stil); } .fr-modal-schijf-jaar { font: 700 4rem/1 var(--fr-serif); color: #FFFFFF; margin-top: 0.2rem; } .fr-modal-schijf-sub { margin-top: 0.4rem; } .fr-modal-links .fr-kicker-mono { margin-top: 1.4rem; color: var(--fr-geel); } .fr-modal-legenda { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 1.5rem; margin: 0.6rem 0 0; } .fr-modal-legenda > div { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font: 400 0.875rem/1.5 var(--fr-sans); } .fr-modal-legenda dt { display: flex; align-items: center; gap: 0.5rem; } .fr-modal-legenda dt::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--fr-voet-stil); } .fr-modal-legenda dd { margin: 0; font: 400 0.75rem/1.5 var(--fr-mono); color: var(--fr-voet-stil); } .fr-modal-noot { margin: 1.1rem 0 0; border-top: 1px solid var(--fr-voet-lijn); padding-top: 0.7rem; font: 400 0.6875rem/1.5 var(--fr-mono); color: var(--fr-voet-stil); letter-spacing: 0.06em; } .fr-modal-rechts { position: relative; padding: 1.6rem 1.8rem 1.8rem; } .fr-modal-sluit { position: absolute; top: 1rem; right: 1rem; width: 2.2rem; height: 2.2rem; border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek-klein); background: var(--fr-kaart); color: var(--fr-tekst); font: 400 1rem/1 var(--fr-sans); cursor: pointer; transition: background 0.15s; } .fr-modal-sluit:hover { background: var(--fr-tint); } .fr-modal-rechts > .fr-kicker-mono { padding-right: 3rem; } .fr-modal-titel { margin: 0.45rem 0 0; font: 700 1.75rem/1.2 var(--fr-serif); color: var(--fr-tekst); } .fr-modal-weetjes-kop { margin-top: 1.1rem; color: var(--fr-sd-t); border-bottom: 2px solid var(--fr-geel); padding-bottom: 0.45rem; } .fr-modal-weetjes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .fr-modal-weetjes li { display: flex; gap: 0.9rem; padding: 0.75rem 0; border-bottom: 1px solid var(--fr-rand); font: 400 0.9375rem/1.6 var(--fr-sans); color: var(--fr-tekst); } .fr-modal-nr { flex: none; font: 700 0.75rem/1.6 var(--fr-mono); color: var(--fr-sd-t); padding-top: 0.15rem; } .fr-modal-museum { margin: 1rem 0 0; } .fr-modal-museum a { display: inline-block; font: 600 0.9375rem/1.4 var(--fr-sans); color: var(--fr-blauw); text-decoration: none; } .fr-modal-museum a:hover { text-decoration: underline; } .fr-rubriek { display: flex; flex-direction: column; } .fr-rubriek-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .fr-rubriek-kop h1 { margin: 0; font: 700 2.125rem/1.15 var(--fr-serif); letter-spacing: -0.01em; color: var(--fr-tekst); } .fr-rubriek-datum { font: 400 0.9375rem/1.5 var(--fr-sans); color: var(--fr-stil); } .fr-rubriek-intro { margin: 0.5rem 0 0; font: 400 0.9375rem/1.55 var(--fr-sans); color: var(--fr-stil); max-width: none; } .fr-rubriek-leeg { margin: 1.25rem 0 0; border: 1px dashed var(--fr-rand); border-radius: var(--fr-hoek); padding: 1.5rem; text-align: center; color: var(--fr-stil); font: 400 0.9375rem/1.55 var(--fr-sans); max-width: none; } .fr-rubriek-leeg[hidden] { display: none; } .fr-rubriek-bron { margin: 0.9rem 0 0; font: 400 0.75rem/1.6 var(--fr-sans); color: var(--fr-stil); max-width: none; } .fr-rubriek-bron a { color: var(--fr-blauw); font-weight: 600; text-decoration: none; } .fr-rubriek-bron a:hover { text-decoration: underline; } .fr-terug { display: inline-block; font: 600 0.875rem/1.5 var(--fr-sans); color: var(--fr-blauw); text-decoration: none; } .fr-terug:hover { text-decoration: underline; } .fr-dorpstip { display: inline-block; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--fr-stil); vertical-align: middle; } .fr-dorpspil { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--fr-tint); border-radius: 999px; padding: 0.1rem 0.6rem; font-weight: 600; color: var(--fr-tekst); } .fr-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.85rem; } .fr-chip { display: inline-flex; align-items: center; gap: 0.45rem; height: 2.25rem; font: 600 0.875rem/1 var(--fr-sans); padding: 0 0.95rem; border-radius: 999px; border: 1px solid var(--fr-rand); background: var(--fr-kaart); color: var(--fr-tekst); text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .fr-chip:hover { background: var(--fr-tint); color: var(--fr-tekst); } @media (max-width: 640px) { .fr-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 0.2rem; } .fr-filters::-webkit-scrollbar { display: none; } .fr-chip { flex: 0 0 auto; } } .fr-chip[aria-pressed="true"], .fr-chip.is-aan { background: var(--fr-blauw); border-color: var(--fr-blauw); color: var(--fr-knoptekst); } .fr-chip[aria-pressed="true"]:hover, .fr-chip.is-aan:hover { background: var(--fr-blauwh); } .fr-chip-stip { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 999px; } .fr-chip-stip.is-vierkant { border-radius: 2px; } .fr-chip.is-aan .fr-chip-stip { background: var(--fr-knoptekst); } .fr-chip-teller { font: 700 0.6875rem/1 var(--fr-mono); padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--fr-tint); color: var(--fr-blauw); } .fr-agenda-geweest { margin: 0.6rem 0 0; padding: 0.45rem 0.8rem; border-left: 3px solid var(--fr-rand); font: 500 0.875rem/1.5 var(--fr-sans); color: var(--fr-stil); } .fr-agenda-blok { margin-top: 1.5rem; } .fr-agenda-blok .fr-kicker-mono { color: var(--fr-stil); } .fr-agenda-blok.is-archief { opacity: 0.72; } .fr-agenda-lijst { list-style: none; margin: 0.4rem 0 0; padding: 0; } .fr-agenda-regel { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 0.9rem; padding: 0.75rem 0.1rem; border-bottom: 1px solid var(--fr-rand); } .fr-agenda-datum { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.35rem 0.2rem; border-radius: var(--fr-hoek-klein); background: var(--fr-tint); color: var(--fr-groen); text-align: center; line-height: 1.15; } .fr-agenda-datum.is-leeg { background: none; } .fr-agenda-datum strong { font: 700 1.0625rem/1.15 var(--fr-sans); font-variant-numeric: tabular-nums; } .fr-agenda-datum span { font: 600 0.6875rem/1.3 var(--fr-sans); text-transform: uppercase; letter-spacing: 0.06em; } .fr-agenda-tekst { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .fr-agenda-titel { font: 600 1rem/1.4 var(--fr-sans); color: var(--fr-tekst); text-decoration: none; } a.fr-agenda-titel:hover { color: var(--fr-blauw); } .fr-agenda-lead { font: 400 0.9375rem/1.55 var(--fr-sans); color: var(--fr-tekst); } .fr-agenda-meta { font: 400 0.8125rem/1.5 var(--fr-sans); color: var(--fr-stil); } @media (max-width: 420px) { .fr-agenda-regel { grid-template-columns: 3rem minmax(0, 1fr); gap: 0.7rem; } } .fr-nieuwsdetail-meta { margin: 0.9rem 0 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font: 400 0.8125rem/1.4 var(--fr-sans); color: var(--fr-stil); max-width: none; } .fr-nieuwsdetail-titel { margin: 0.5rem 0 0; font-size: 1.875rem; line-height: 1.25; } .fr-nieuwsdetail-beeld { margin: 1rem 0 0; width: 100%; height: 16rem; border-radius: 10px; overflow: hidden; background: var(--fr-ph); } .fr-nieuwsdetail-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; } .fr-nieuwsdetail-figuur { margin: 0; } .fr-nieuwsdetail-bijschrift { margin: 0.4rem 0 0; font: italic 400 0.8125rem/1.4 var(--fr-sans); color: var(--fr-stil); } .fr-nieuwsdetail-lead { margin: 1rem 0 0; font: 600 1.0625rem/1.6 var(--fr-sans); color: var(--fr-tekst); } .fr-nieuwsdetail-tekst { margin-top: 0.8rem; } .fr-nieuwsdetail-tekst p { font: 400 1rem/1.7 var(--fr-sans); margin: 0 0 0.8rem; } .fr-nieuwsdetail-bron { margin: 1rem 0 0; border-top: 1px solid var(--fr-rand); padding-top: 0.7rem; font: 400 0.8125rem/1.5 var(--fr-sans); color: var(--fr-stil); max-width: none; align-self: stretch; } .fr-nieuwsdetail-bron a { color: var(--fr-blauw); font-weight: 600; text-decoration: none; } .fr-nieuwsdetail-bron a:hover { text-decoration: underline; } .fr-ooklezen { margin-top: 1.5rem; align-self: stretch; } .fr-ooklezen ul { list-style: none; margin: 0.3rem 0 0; padding: 0; } .fr-ooklezen li { border-bottom: 1px solid var(--fr-rand); } .fr-ooklezen a, .fr-ooklezen li > span { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.1rem; font: 600 0.9375rem/1.5 var(--fr-sans); color: var(--fr-tekst); text-decoration: none; } .fr-ooklezen a:hover { color: var(--fr-blauw); } .fr-ooklezen .fr-clublijst-soort { color: var(--fr-stil); font-weight: 400; } .fr-briefjes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 1.25rem; } .fr-briefje { position: relative; background: var(--fr-note); border: 1px solid var(--fr-rand); border-radius: 10px; padding: 1rem 1.1rem; } .fr-briefje.is-links { transform: rotate(-0.5deg); } .fr-briefje.is-rechts { transform: rotate(0.5deg); } .fr-punaise { position: absolute; top: -0.4rem; left: 50%; transform: translateX(-50%); width: 0.8rem; height: 0.8rem; border-radius: 999px; background: var(--fr-geel); border: 2px solid var(--fr-kaart); } .fr-briefje-cat { display: inline-block; font: 700 0.6875rem/1.4 var(--fr-sans); letter-spacing: 0.05em; text-transform: uppercase; background: color-mix(in srgb, var(--fr-stil) 14%, transparent); color: var(--fr-stil); padding: 0.15rem 0.5rem; border-radius: 999px; } .fr-briefje-cat[data-cat="te-koop"], .fr-briefje-cat[data-cat="aangeboden"] { background: color-mix(in srgb, var(--fr-groen) 16%, transparent); color: var(--fr-mm-t); } .fr-briefje-kop { margin: 0.45rem 0 0; font: 700 1rem/1.4 var(--fr-serif); color: var(--fr-tekst); } .fr-briefje-tekst { margin: 0.2rem 0 0; font: 400 0.9375rem/1.55 var(--fr-sans); color: var(--fr-tekst); max-width: none; } .fr-briefje-voet { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 0.5rem; align-items: baseline; flex-wrap: wrap; } .fr-briefje-meta { margin: 0; display: flex; align-items: center; gap: 0.4rem; font: 400 0.8125rem/1.4 var(--fr-sans); color: var(--fr-stil); } .fr-briefje-contact { font: 600 0.875rem/1.4 var(--fr-sans); color: var(--fr-blauw); } .fr-prikbord-cta { background: var(--fr-voet); border-radius: var(--fr-hoek); padding: 1.1rem 1.3rem; margin-top: 1.5rem; } .fr-prikbord-cta-kop { margin: 0; color: #FFFFFF; font: 700 1.0625rem/1.4 var(--fr-sans); } .fr-prikbord-cta-sub { margin: 0.1rem 0 0; color: var(--fr-voet-stil); font: 400 0.9rem/1.5 var(--fr-sans); max-width: none; } .fr-plaatsen { scroll-margin-top: 7rem; margin-top: 0.9rem; background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek); } .fr-plaatsen summary { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.85rem 1.1rem; cursor: pointer; font: 700 0.9375rem/1.4 var(--fr-sans); color: var(--fr-tekst); } .fr-plaatsen[open] summary { border-bottom: 1px solid var(--fr-rand); } .fr-plaatsen[open] summary span:last-child { transform: rotate(180deg); } .fr-plaatsen-form { padding: 1rem 1.1rem 1.2rem; max-width: none; } .fr-plaatsen .fr-melding { margin: 1rem 1.1rem 0; } .fr-veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; } .fr-veld-bij { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fr-stil); } .fr-plaatsen-form button[type="submit"] { width: auto; align-self: flex-start; padding: 0.7rem 1.4rem; } .fr-clubgroep { margin-top: 1.5rem; } .fr-clubgroep .fr-kicker-mono { color: var(--fr-stil); } .fr-clublijst { list-style: none; margin: 0.3rem 0 0; padding: 0; } .fr-clublijst li { border-bottom: 1px solid var(--fr-rand); scroll-margin-top: 5rem; } .fr-clublijst li:target > a, .fr-clublijst li:target > span { background: var(--fr-tint); border-radius: var(--fr-hoek-klein); } .fr-clublijst a, .fr-clublijst li > span { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.1rem; font: 600 0.9375rem/1.5 var(--fr-sans); color: var(--fr-tekst); text-decoration: none; } .fr-clublijst a:hover { color: var(--fr-blauw); } .fr-clublijst-soort { color: var(--fr-stil); font-weight: 400; flex: none; } .fr-clubdetail-kicker { margin: 0; display: flex; align-items: center; gap: 0.5rem; font: 700 0.8125rem/1.4 var(--fr-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fr-stil); } .fr-clubdetail-tekst { margin: 0.9rem 0 0; font: 400 1rem/1.7 var(--fr-sans); color: var(--fr-tekst); } .fr-clubdetail-tekst + .fr-clubdetail-tekst { margin-top: 0.8rem; } .fr-clubdetail-tekst p { margin: 0 0 0.8rem; font: 400 1rem/1.7 var(--fr-sans); } .fr-clubdetail-feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.9rem; margin: 1.5rem 0 0; align-self: stretch; } .fr-clubdetail-feiten > div { background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek); padding: 0.8rem 1rem; } .fr-clubdetail-feiten dt { font: 700 0.6875rem/1.4 var(--fr-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fr-stil); } .fr-clubdetail-feiten dd { margin: 0.2rem 0 0; font: 600 0.9375rem/1.4 var(--fr-sans); color: var(--fr-tekst); } .fr-112-groep { margin-top: 1.25rem; } .fr-112-kaart { padding: 0.2rem 1.1rem; margin-top: 0.5rem; } .fr-112-regels { list-style: none; margin: 0; padding: 0; } .fr-112-regels li { display: flex; gap: 0.8rem; padding: 0.7rem 0; border-bottom: 1px solid var(--fr-rand); align-items: baseline; flex-wrap: wrap; } .fr-112-regels li[hidden] { display: none; } .fr-112-regels li:last-child, .fr-112-regels li:not([hidden]):not(:has(~ li:not([hidden]))) { border-bottom: 0; } .fr-112-regel-tijd { flex: none; font: 400 0.8125rem/1.5 var(--fr-mono); color: var(--fr-stil); } .fr-112-regel-dienst { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 2px; align-self: center; } .fr-112-regel-teken { flex: none; width: 1.15rem; text-align: center; font-size: 0.9375rem; line-height: 1; align-self: center; } .fr-112-regel-prio { flex: none; font: 700 0.6875rem/1.4 var(--fr-sans); letter-spacing: 0.05em; background: var(--fr-tint); color: var(--fr-blauw); padding: 0.1rem 0.45rem; border-radius: 999px; } .fr-112-regel-tekst { min-width: 0; flex: 1; } .fr-112-regel-kop { display: block; font: 600 0.9375rem/1.45 var(--fr-sans); color: var(--fr-tekst); } .fr-112-regel-sub { display: flex; align-items: center; gap: 0.4rem; font: 400 0.8125rem/1.5 var(--fr-sans); color: var(--fr-stil); flex-wrap: wrap; } .fr-112-regel-sub .fr-dorpstip { width: 0.4rem; height: 0.4rem; } .fr-bladeren { --cms-bladeren-kleur: var(--fr-blauw); --cms-bladeren-rand: var(--fr-rand3); --cms-bladeren-vlak: var(--fr-kaart); --cms-bladeren-stand-kleur: var(--fr-stil); --cms-bladeren-focus: var(--fr-blauw); --cms-bladeren-radius: var(--fr-hoek-knop, var(--portal-radius-btn, 8px)); font-family: var(--fr-sans); } .fr-artikel-smal { max-width: none; } .fr-artikel .fr-kicker + .fr-titel { margin-top: 0.3rem; } .fr-artikel .fr-titel { font-size: 2.125rem; line-height: 1.15; } .fr-hist-beeld { margin-top: 1.1rem; width: 100%; height: 15rem; border-radius: 10px; overflow: hidden; background: var(--fr-ph); display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; font: 400 0.875rem/1.5 var(--fr-sans); color: var(--fr-stil); } .fr-hist-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; } .fr-tijdlijn { list-style: none; margin: 1.5rem 0 0; padding: 0; border-left: 3px solid var(--fr-geel); display: flex; flex-direction: column; } .fr-tijdlijn li { position: relative; padding: 0.65rem 0 0.65rem 1.4rem; display: block; } .fr-tijdlijn li::before { content: ""; position: absolute; left: -0.42rem; top: 1.05rem; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--fr-blauw); border: 2px solid var(--fr-bg); box-sizing: content-box; margin-left: -3px; } .fr-tijdlijn-jaar { display: block; font: 700 0.8125rem/1.4 var(--fr-mono); color: var(--fr-blauw); } .fr-tijdlijn li.is-groot .fr-tijdlijn-jaar { color: var(--fr-ko-t); } .fr-tijdlijn-kop { display: block; font: 700 1rem/1.4 var(--fr-sans); color: var(--fr-tekst); } .fr-tijdlijn-tekst { display: block; margin-top: 0.15rem; font: 400 0.9375rem/1.6 var(--fr-sans); color: var(--fr-stil); } .fr-verhaal { background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek); padding: 1rem 1.2rem; margin-top: 1rem; } .fr-verhaal:first-of-type { margin-top: 1.5rem; } .fr-verhaal .fr-kicker-mono { color: var(--fr-sd-t); letter-spacing: 0.16em; } .fr-verhaal h2 { margin: 0.25rem 0 0; font: 700 1.125rem/1.35 var(--fr-serif); color: var(--fr-tekst); } .fr-verhaal .fr-kicker-mono + h2 { margin-top: 0.25rem; } .fr-verhaal h2:first-child { margin-top: 0; } .fr-verhaal p { margin: 0.35rem 0 0; font: 400 0.9375rem/1.65 var(--fr-sans); color: var(--fr-stil); text-wrap: pretty; } .fr-tweeluik { display: block; } .fr-hist-uitgelicht { background: var(--fr-voet); border-radius: var(--fr-hoek); padding: 1rem 1.2rem; margin-top: 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; } .fr-hist-uitgelicht p { margin: 0; color: var(--fr-voet-tekst); font: 400 0.9375rem/1.5 var(--fr-sans); } .fr-hist-uitgelicht-links { display: flex; gap: 0.6rem; flex-wrap: wrap; flex: none; } .fr-hist-uitgelicht-links a { display: inline-block; flex: none; padding: 0.5rem 1rem; border-radius: var(--fr-hoek-klein); background: var(--fr-geel); color: var(--fr-badge-t); font: 700 0.875rem/1.4 var(--fr-sans); text-decoration: none; } .fr-hist-uitgelicht-links a:hover { background: #F0B54A; color: var(--fr-badge-t); } .fr-hist-bronnen { margin: 1rem 0 0; font: 400 0.75rem/1.6 var(--fr-sans); color: var(--fr-stil); } .fr-hist-citaat { margin: 1.75rem 0 0; border-top: 1px solid var(--fr-rand); padding-top: 1.1rem; text-align: center; font: italic 400 1.0625rem/1.6 var(--fr-serif); color: var(--fr-stil); max-width: none; } .fr-hist-citaat-bron { margin-left: 0.35rem; font: 400 0.75rem/1.4 var(--fr-mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; } .fr-artikel .fr-prose-lead > p:first-child { font: 400 1.0625rem/1.65 var(--fr-sans); color: var(--fr-tekst); border-bottom: 0; padding-bottom: 0; margin: 0.7rem 0 0; max-width: none; } .fr-artikel .fr-prose-lead > p + p { margin-top: 0.8rem; font: 400 1rem/1.7 var(--fr-sans); color: var(--fr-stil); } .fr-artikel .fr-prose-lead > p:last-child { margin-bottom: 0; } .fr-overons-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-top: 1.5rem; } .fr-overons-kaart { display: block; background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek); padding: 0.9rem 1rem; text-decoration: none; color: var(--fr-tekst); transition: border-color 0.15s; } a.fr-overons-kaart:hover { border-color: var(--fr-blauw); color: var(--fr-tekst); } .fr-overons-kaart .fr-kicker { display: none; } .fr-overons-kaart-kop { display: block; font: 700 0.9375rem/1.4 var(--fr-sans); color: var(--fr-tekst); } .fr-overons-kaart-tekst { display: block; margin-top: 0.15rem; font: 400 0.8125rem/1.45 var(--fr-sans); color: var(--fr-stil); } .fr-colofon { background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek); padding: 1rem 1.2rem; margin-top: 1.5rem; } .fr-colofon .fr-kicker { display: none; } .fr-colofon h2 { margin: 0; font: 700 1.125rem/1.35 var(--fr-serif); color: var(--fr-tekst); } .fr-colofon p { margin: 0.35rem 0 0; font: 400 0.9375rem/1.65 var(--fr-sans); color: var(--fr-stil); max-width: none; } .fr-colofon a { color: var(--fr-blauw); font-weight: 600; text-decoration: none; } .fr-colofon a:hover { text-decoration: underline; } .fr-colofon-feiten { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1.5rem; margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--fr-rand); } .fr-colofon-feiten dt { font: 400 0.6875rem/1.4 var(--fr-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-stil); margin-bottom: 0.2rem; } .fr-colofon-feiten dd { margin: 0; font: 600 0.9rem/1.5 var(--fr-sans); color: var(--fr-tekst); } .fr-body { --pw-kaart-vlak: var(--fr-kaart); --pw-kaart-rand: var(--fr-rand); --pw-kaart-inkt: var(--fr-tekst); --pw-kaart-kop: var(--fr-kop); --pw-kaart-accent: var(--fr-link); --pw-kaart-paneel: var(--fr-tint); --pw-kaart-zacht: var(--fr-stil); --portal-font-sans: var(--fr-sans); --portal-font-serif: var(--fr-serif); --portal-font-mono: var(--fr-mono); --portal-bg: var(--fr-bg); --portal-surface: var(--fr-kaart); --portal-surface-soft: var(--fr-bg); --portal-surface-tint: var(--fr-tint); --portal-chip: var(--fr-kaart); --portal-border: var(--fr-rand); --portal-border-soft: var(--fr-rand); --portal-border-strong: var(--fr-rand3); --portal-border-dashed: var(--fr-rand3); --portal-chip-border: var(--fr-rand); --portal-heading: var(--fr-tekst); --portal-heading-ink: var(--fr-tekst); --portal-text: var(--fr-tekst); --portal-text-soft: var(--fr-stil); --portal-muted: var(--fr-stil); --portal-muted-faint: var(--fr-stil); --portal-mono-faint: var(--fr-stil); --portal-primary: var(--fr-blauw); --portal-primary-strong: var(--fr-blauwh); --portal-primary-soft: var(--fr-tint); --portal-primary-soft-border: var(--fr-rand); --portal-accent: var(--fr-geel); --portal-accent-deep: var(--fr-sd-t); --portal-danger: var(--fr-rood); --portal-open: var(--fr-open-t); --portal-open-soft: var(--fr-open-b); --portal-open-dot: var(--fr-groen); --portal-closed: var(--fr-dicht-t); --portal-closed-soft: var(--fr-dicht-b); --portal-closed-dot: var(--fr-rood); --portal-radius: var(--fr-hoek-klein); --portal-radius-card: var(--fr-hoek); --portal-radius-btn: var(--fr-hoek-knop); --portal-radius-pill: 999px; --portal-shadow-card-hover: none; --portal-shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.4); --portal-cat-winkels: var(--fr-kaart); --portal-cat-horeca: var(--fr-kaart); --portal-cat-zorg: var(--fr-kaart); --portal-cat-sport: var(--fr-kaart); --portal-cat-diensten: var(--fr-kaart); --portal-cat-verblijf: var(--fr-kaart); } #fr-main .bcm-card, #fr-main .bcm-block, #fr-main .bcm-panel, #fr-main .bcm-detail__hero, #fr-main .bcm-detail__panel, #fr-main .bcm-oproep { background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek); } #fr-main .bcm-card { transition: border-color 0.15s; } #fr-main a.bcm-card:hover, #fr-main .bcm-card:hover { border-color: var(--fr-blauw); } #fr-main .bcm-plan__ribbon { color: var(--fr-badge-t); } #fr-main .bcm-packages__intro { color: var(--fr-stil); } #fr-main .bcm-plan--highlight { background: var(--fr-note); } #fr-main .bcm-plan__cta.is-highlight, #fr-main .bcm-plan__cta.is-highlight:hover { color: var(--fr-badge-t); } #fr-main .cms-bladeren .bcm-btn { background: var(--fr-kaart); color: var(--fr-tekst); border-color: var(--fr-rand3); } #fr-main .bcm-section__head { border-bottom: 2px solid var(--fr-tekst); padding-bottom: 0.45rem; margin-bottom: 0.4rem; } #fr-main .bcm-section__head h2 { font: 700 1.5rem/1.25 var(--fr-serif); color: var(--fr-tekst); margin: 0; } #fr-main .bcm-section__meta { font: 400 0.8125rem/1.4 var(--fr-sans); color: var(--fr-stil); } #fr-main .bcm-oproep__tekst h2 { font: 700 1.25rem/1.3 var(--fr-serif); color: var(--fr-tekst); } #fr-main .bcm-oproep__tekst p:last-child { font: 400 0.9375rem/1.6 var(--fr-sans); color: var(--fr-stil); } .fr-body .bcm-toggle__dot, .fr-body .bcm-status-dot, .fr-body .bcm-quick__close { border-radius: 50%; } .fr-body .bcm-modal .modal-content { border-radius: var(--fr-hoek); border: 1px solid var(--fr-rand); background: var(--fr-kaart); } .fr-body .bcm-modal.is-open { background: rgba(10, 16, 26, 0.6); } #fr-main .bcm-toolbar__melden { font: 400 0.875rem/1.5 var(--fr-sans); color: var(--fr-stil); } #fr-main .bcm-toolbar__melden a { color: var(--fr-blauw); } #fr-main .bcm-btn { border-radius: var(--fr-hoek-knop); font-family: var(--fr-sans); font-weight: 600; } #fr-main .bcm-btn--primary { background: var(--fr-blauw); border-color: var(--fr-blauw); color: var(--fr-knoptekst); } #fr-main .bcm-btn--primary:hover { background: var(--fr-blauwh); border-color: var(--fr-blauwh); } #fr-main .bcm-btn--ghost { background: transparent; border: 1px solid var(--fr-blauw); color: var(--fr-blauw); } #fr-main .bcm-btn--ghost:hover { background: var(--fr-tint); } #fr-main .bcm-chip { border-radius: 999px; border: 1px solid var(--fr-rand); background: var(--fr-kaart); color: var(--fr-tekst); font-family: var(--fr-sans); } #fr-main .bcm-chip.is-active { background: var(--fr-blauw); border-color: var(--fr-blauw); color: var(--fr-knoptekst); } #fr-main .bcm-eyebrow { font-family: var(--fr-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-stil); } #fr-main .bcm-crumbs, #fr-main .bcm-empty { color: var(--fr-stil); font-family: var(--fr-sans); } #fr-main h1, #fr-main h2, #fr-main h3 { font-family: var(--fr-serif); color: var(--fr-tekst); } #fr-main .bcm-directory__hero h1, #fr-main .bcm-vac__hero h1, #fr-main .bcm-packages__hero h1 { font: 700 2.125rem/1.15 var(--fr-serif); letter-spacing: -0.01em; } #fr-main .bcm-directory__hero h1 em, #fr-main .bcm-vac__hero h1 em { font-style: normal; color: inherit; } #fr-main .bcm-directory__intro, #fr-main .bcm-vac__intro { font: 400 0.9375rem/1.55 var(--fr-sans); color: var(--fr-stil); max-width: none; } #fr-main .bcm-cover--card { height: 8rem; } @media (max-width: 640px) { #fr-main .bcm-cover--card:not(.bcm-cover--photo) { height: 74px; } } #fr-main .bcm-card__body { padding: 1rem 1.1rem; gap: 0.35rem; } #fr-main .bcm-card__head { display: flex; flex-direction: column; gap: 0.35rem; } #fr-main .bcm-card__name { order: 2; font: 700 1.125rem/1.3 var(--fr-serif); color: var(--fr-tekst); } #fr-main .bcm-card__sub { order: 1; font: 700 0.75rem/1.4 var(--fr-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fr-stil); } #fr-main .bcm-card__desc { font: 400 0.875rem/1.5 var(--fr-sans); color: var(--fr-stil); } #fr-main .bcm-card__foot { font: 600 0.875rem/1.4 var(--fr-sans); } #fr-main .bcm-card__cta { color: var(--fr-blauw); } #fr-main .bcm-card__gids { color: var(--fr-stil); font-weight: 400; display: inline-flex; align-items: center; gap: 0.45rem; } #fr-main .bcm-card__gids::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--fr-geel); } #fr-main .bcm-select, #fr-main input.form-control, #fr-main select.form-select { background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek-knop); color: var(--fr-tekst); font-family: var(--fr-sans); } .fr-formulier { display: flex; flex-direction: column; gap: 0.9rem; max-width: 34rem; } .fr-veld { display: flex; flex-direction: column; gap: 0.3rem; } .fr-veld label { font: 400 0.75rem/1.4 var(--fr-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fr-stil); } .fr-veld input, .fr-veld select, .fr-veld textarea { width: 100%; padding: 0.6rem 0.8rem; font: 400 1rem/1.4 var(--fr-sans); color: var(--fr-tekst); background: var(--fr-bg); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek-klein); } .fr-veld textarea { min-height: 8rem; resize: vertical; } .fr-veld-hint { font: 400 0.8125rem/1.5 var(--fr-sans); color: var(--fr-stil); } .fr-formulier button[type="submit"] { align-self: stretch; width: 100%; margin-top: 0.3rem; padding: 0.7rem 1rem; font: 700 1rem/1.3 var(--fr-sans); color: var(--fr-knoptekst); background: var(--fr-blauw); border: none; border-radius: var(--fr-hoek-knop); cursor: pointer; transition: background 0.15s; } .fr-formulier button[type="submit"]:hover { background: var(--fr-blauwh); } .fr-melding { border-radius: var(--fr-hoek-klein); padding: 0.8rem 1rem; font: 400 0.9rem/1.55 var(--fr-sans); border: 1px solid var(--fr-rand); background: var(--fr-kaart); margin-bottom: 0.9rem; } .fr-melding.is-goed { color: var(--fr-open-t); background: var(--fr-open-b); border-color: transparent; } .fr-melding.is-fout { color: var(--fr-dicht-t); background: var(--fr-dicht-b); border-color: transparent; } .fr-auth { width: 100%; margin: 1rem 0 0; } .fr-auth-rij { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.25rem; align-items: start; } .fr-auth-kolom { min-width: 0; } .fr-auth-kaart { background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-top: 3px solid var(--fr-geel); border-radius: var(--fr-hoek); padding: 1.6rem 1.6rem 1.8rem; } .fr-auth h1 { margin: 0; font: 700 1.5rem/1.3 var(--fr-serif); color: var(--fr-tekst); } .fr-auth-sub { margin: 0.3rem 0 1.1rem; font: 400 0.9rem/1.5 var(--fr-sans); color: var(--fr-stil); } .fr-auth .fr-kicker { display: none; } .fr-auth-kaart .fr-formulier { max-width: none; } .fr-auth-voet { margin-top: 0.8rem; font: 400 0.875rem/1.5 var(--fr-sans); text-align: center; color: var(--fr-tekst); } .fr-auth-voet a { color: var(--fr-blauw); font-weight: 600; text-decoration: none; } .fr-auth-voet a:hover { text-decoration: underline; } .fr-auth-noot { margin: 0.9rem 0 0; font: 400 0.8125rem/1.5 var(--fr-sans); color: var(--fr-stil); } .fr-auth-noot a { color: var(--fr-blauw); font-weight: 600; } .fr-auth-wissel { background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek); padding: 0.9rem 1.6rem; margin-top: 0.9rem; font: 400 0.9rem/1.5 var(--fr-sans); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .fr-auth-wissel a { color: var(--fr-blauw); font-weight: 600; text-decoration: none; } .fr-auth-wissel a:hover { text-decoration: underline; } .fr-auth-wissel .fr-auth-naar-home { color: var(--fr-stil); font-weight: 400; } .fr-auth-wissel .fr-auth-naar-home:hover { color: var(--fr-blauw); text-decoration: none; } .fr-auth-tekst { font: 400 0.9375rem/1.6 var(--fr-sans); color: var(--fr-tekst); margin: 0.5rem 0 0; } .portal-auth-v148 { display: block; max-width: 480px; margin: 0 auto; width: 100%; } .portal-auth-card-v148 { background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-top: 3px solid var(--fr-geel); border-radius: var(--fr-hoek); padding: 1.6rem 1.6rem 1.8rem; } .portal-auth-brand-v148 { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; } .portal-auth-brand-v148 strong { display: block; font: 700 1.125rem/1.2 var(--fr-serif); color: var(--fr-tekst); } .portal-auth-brand-v148 small { display: block; font: 400 0.75rem/1.4 var(--fr-sans); color: var(--fr-stil); margin-top: 2px; } .portal-auth-card-v148 .admin-logo-mark { width: 40px; height: 40px; border-radius: var(--fr-hoek-klein); background: var(--fr-tint); color: var(--fr-blauw); display: flex; align-items: center; justify-content: center; font: 700 18px/1 var(--fr-serif); } .portal-section-label-v147 { font: 400 0.75rem/1.4 var(--fr-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fr-stil); margin: 0 0 8px; } .portal-auth-card-v148 h1 { margin: 0 0 6px; font: 700 1.5rem/1.3 var(--fr-serif); color: var(--fr-tekst); } .portal-auth-card-v148 .lead { margin: 0 0 1.1rem; font: 400 0.9rem/1.5 var(--fr-sans); color: var(--fr-stil); } .portal-auth-form-v148 { display: flex; flex-direction: column; gap: 0.9rem; } .portal-auth-form-v148 label { display: flex; flex-direction: column; gap: 0.3rem; font: 400 0.75rem/1.4 var(--fr-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fr-stil); } .portal-auth-form-v148 input[type="text"], .portal-auth-form-v148 input[type="email"], .portal-auth-form-v148 input[type="password"] { width: 100%; padding: 0.6rem 0.8rem; font: 400 1rem/1.4 var(--fr-sans); color: var(--fr-tekst); background: var(--fr-bg); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek-klein); } .portal-auth-form-v148 button[type="submit"] { font: 700 1rem/1.3 var(--fr-sans); color: var(--fr-knoptekst); background: var(--fr-blauw); border: none; border-radius: var(--fr-hoek-knop); padding: 0.7rem 1rem; cursor: pointer; } .portal-auth-form-v148 button[type="submit"]:hover { background: var(--fr-blauwh); } .portal-passkey-btn-v159 { width: 100%; font: 600 1rem/1.3 var(--fr-sans); color: var(--fr-blauw); background: transparent; border: 1px solid var(--fr-blauw); border-radius: var(--fr-hoek-knop); padding: 0.65rem 1rem; cursor: pointer; } .portal-passkey-btn-v159:hover { background: var(--fr-tint); } .portal-auth-divider-v159 { text-align: center; font: 400 0.6875rem/1.4 var(--fr-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-stil); margin: 1rem 0; } .portal-auth-hint-v148 { font: 400 0.8125rem/1.5 var(--fr-sans); color: var(--fr-stil); } .portal-remember-v149 { display: flex; flex-direction: row; align-items: flex-start; gap: 0.55rem; text-transform: none; letter-spacing: normal; font: 400 0.875rem/1.5 var(--fr-sans); color: var(--fr-tekst); } .portal-remember-v149 input { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 0.2rem; accent-color: var(--fr-blauw); } .portal-auth-links-v148 { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--fr-rand); display: flex; gap: 0.9rem; flex-wrap: wrap; font: 400 0.875rem/1.5 var(--fr-sans); } .portal-auth-links-v148 a { color: var(--fr-blauw); font-weight: 600; text-decoration: none; } .portal-auth-links-v148 a:hover { text-decoration: underline; } .portal-auth-logout-form-v148 { margin-top: 0.9rem; } .portal-auth-logout-form-v148 button { background: transparent; border: none; color: var(--fr-blauw); font: 600 0.875rem/1.5 var(--fr-sans); cursor: pointer; padding: 0; } .fr-checkregel { display: flex; align-items: flex-start; gap: 0.55rem; font: 400 0.875rem/1.5 var(--fr-sans); color: var(--fr-tekst); cursor: pointer; } .fr-checkregel input { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 0.2rem; accent-color: var(--fr-blauw); } .fr-checkregel a { color: var(--fr-blauw); font-weight: 600; } .fr-auth-voorwaarden { display: block; margin-top: 0.75rem; } .fr-auth-voorwaarden a { color: var(--fr-blauw); font-weight: 600; } .fr-contact { display: block; } .fr-contact-formulier { min-width: 0; } .fr-contact-zij, .fr-contact-wie { padding: 1rem 1.2rem; } .fr-contact-zij .fr-kicker-dubbel, .fr-contact-wie .fr-kicker-dubbel { padding: 0; } .fr-contact-kolom { display: grid; gap: 1.1rem; margin-top: 1.1rem; align-content: start; min-width: 0; } .fr-contact-feiten { margin: 0.6rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.8rem 1.5rem; } .fr-contact-feiten dt, .fr-contact-wie-naam span { font: 400 0.6875rem/1.4 var(--fr-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-stil); margin-bottom: 0.2rem; } .fr-contact-feiten dd { margin: 0; font: 600 0.9rem/1.5 var(--fr-sans); color: var(--fr-tekst); } .fr-contact-feiten a { color: var(--fr-blauw); text-decoration: none; } .fr-contact-feiten a:hover { text-decoration: underline; } .fr-contact-slot { margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--fr-rand); font: 400 0.875rem/1.6 var(--fr-sans); color: var(--fr-stil); } .fr-contact-wie-inhoud { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0.7rem 0.9rem; align-items: center; margin-top: 0.7rem; } .fr-contact-wie-logo { width: 56px; height: 56px; object-fit: contain; padding: 4px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); } .fr-contact-wie-naam { margin: 0; min-width: 0; } .fr-contact-wie-naam strong, .fr-contact-wie-naam a { display: inline-block; font: 700 1.05rem/1.3 var(--fr-serif); color: var(--fr-tekst); } .fr-contact-wie-naam a { color: var(--fr-blauw); text-decoration: none; } .fr-contact-wie-naam a:hover { text-decoration: underline; } .fr-contact-wie-naam span { display: block; margin: 0.15rem 0 0; } .fr-contact-wie-tekst { grid-column: 1 / -1; margin: 0; font: 400 0.9rem/1.6 var(--fr-sans); color: var(--fr-tekst); } @media (min-width: 2000px) { .fr-contact-tweeluik { display: grid; grid-template-columns: minmax(0, 46rem) minmax(18rem, 26rem); gap: 1.5rem; align-items: start; } .fr-contact-tweeluik .fr-contact-kolom { margin-top: 0; } } .portal-contact-card-v1473 { background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-top: 3px solid var(--fr-geel); border-radius: var(--fr-hoek); padding: 1.6rem 1.6rem 1.8rem; } .portal-contact-card-v1473 h1, .portal-contact-card-v1473 h2 { font-family: var(--fr-serif); color: var(--fr-tekst); } .portal-contact-card-v1473 label { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; font: 400 0.75rem/1.4 var(--fr-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fr-stil); } .portal-contact-card-v1473 input, .portal-contact-card-v1473 textarea, .portal-contact-card-v1473 select { width: 100%; display: block; padding: 0.6rem 0.8rem; font: 400 1rem/1.4 var(--fr-sans); color: var(--fr-tekst); background: var(--fr-bg); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek-klein); } .portal-contact-card-v1473 button[type="submit"] { font: 700 1rem/1.3 var(--fr-sans); color: var(--fr-knoptekst); background: var(--fr-blauw); border: none; border-radius: var(--fr-hoek-knop); padding: 0.7rem 1.2rem; cursor: pointer; } .portal-contact-card-v1473 button[type="submit"]:hover:not(:disabled) { background: var(--fr-blauwh); } .portal-contact-card-v1473 button[type="submit"]:disabled { background: var(--fr-ph); color: var(--fr-stil); cursor: not-allowed; } .portal-contact-card-v1473 .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.1rem; } .portal-contact-card-v1473 .validation-message { display: block; margin-top: 0; margin-bottom: 0.9rem; font: 400 0.8125rem/1.45 var(--fr-sans); letter-spacing: 0; text-transform: none; color: var(--fr-stil); } .portal-contact-card-v1473 .validation-message.is-ok { color: var(--fr-open-t); } .portal-contact-card-v1473 .validation-message.is-fout { color: var(--fr-dicht-t); } .portal-contact-card-v1473 input.is-valid, .portal-contact-card-v1473 textarea.is-valid { border-color: var(--fr-groen); } .portal-contact-card-v1473 input.is-invalid, .portal-contact-card-v1473 textarea.is-invalid { border-color: var(--fr-rood); } .portal-contact-card-v1473 .success, .portal-contact-card-v1473 .alert { margin: 0 0 1.1rem; padding: 0.8rem 1rem; border-radius: var(--fr-hoek-klein); font: 500 0.9rem/1.5 var(--fr-sans); border: 1px solid transparent; } .portal-contact-card-v1473 .success { background: var(--fr-open-b); color: var(--fr-open-t); } .portal-contact-card-v1473 .alert { background: var(--fr-dicht-b); color: var(--fr-dicht-t); } .portal-contact-card-v1473 .eyebrow { font: 400 0.75rem/1.4 var(--fr-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fr-stil); margin-bottom: 0.4rem; } .portal-contact-card-v1473 .lead { font: 400 0.9375rem/1.6 var(--fr-sans); color: var(--fr-stil); } .portal-content-card-v147 { background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek); padding: 1.6rem 1.8rem; } .portal-content-card-v147 h1, .portal-content-card-v147 h2, .portal-content-card-v147 h3 { font-family: var(--fr-serif); color: var(--fr-tekst); } .hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .portal-panel-v147, .portal-quick-panel-v147, .portal-maker-card-v149 { background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek); padding: 1.2rem 1.4rem; margin-bottom: 1rem; } .portal-panel-v147 h2, .portal-quick-panel-v147 h2, .portal-maker-card-v149 h2, .portal-maker-card-v149 h3 { font-family: var(--fr-serif); color: var(--fr-tekst); margin: 0 0 0.6rem; } .portal-feature-grid-v147 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; } .portal-link-list-v147, .portal-local-list-v147 { list-style: none; margin: 0; padding: 0; } .portal-link-list-v147 li, .portal-local-list-v147 li { border-bottom: 1px solid var(--fr-rand); } .portal-link-list-v147 li:last-child, .portal-local-list-v147 li:last-child { border-bottom: 0; } .portal-link-list-v147 a, .portal-local-list-v147 a { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.15rem; font: 500 0.9rem/1.4 var(--fr-sans); text-decoration: none; } .portal-maker-copy-v149 { font: 400 0.9375rem/1.65 var(--fr-sans); color: var(--fr-stil); max-width: 64ch; } .portal-maker-icon-v147 { width: 40px; height: 40px; border-radius: var(--fr-hoek-klein); background: var(--fr-tint); color: var(--fr-blauw); display: inline-flex; align-items: center; justify-content: center; } .portal-maker-image-v149 img { max-width: 100%; border-radius: var(--fr-hoek); } .portal-maker-links-v149 { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.9rem; } .portal-maker-tags-v149 { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; } .portal-maker-tags-v149 span { font: 400 0.6875rem/1.4 var(--fr-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-stil); border: 1px solid var(--fr-rand); border-radius: 999px; padding: 0.25rem 0.6rem; } .cms-image-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 16, 26, 0.6); display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .cms-image-modal-card { background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek); padding: 1rem; max-width: 90vw; max-height: 88vh; overflow: auto; } .cms-image-modal-close { background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek-klein); color: var(--fr-tekst); font: 400 1rem/1 var(--fr-sans); width: 2.2rem; height: 2.2rem; cursor: pointer; } .mt-4 { margin-top: 1.5rem; } .mb-4 { margin-bottom: 1.5rem; } .portal-slide-content-v20 .fr-clubs-plaats { display: inline; margin-left: auto; font: 400 0.6875rem/1.4 var(--fr-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-stil); } .fr-paneel-weer .portal-slide-content-v20 { padding: 12px 16px 18px; } .fr-body .fr-paneel-weer .pw-top { display: none; } .fr-body .pw-widget { border-radius: var(--fr-hoek); border: 0; background: var(--fr-voet); color: var(--fr-voet-tekst); overflow: hidden; } .fr-body .pw-widget .pw-sky { border-radius: var(--fr-hoek) var(--fr-hoek) 0 0; } .fr-body .pw-widget .pw-title { font: 700 0.75rem/1.4 var(--fr-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fr-voet-stil); } .fr-body .pw-widget .pw-temp { font-family: var(--fr-serif); font-weight: 700; color: #FFFFFF; } .fr-body .pw-widget .pw-desc { font-family: var(--fr-sans); font-weight: 400; color: var(--fr-voet-stil); } .fr-body .pw-widget .pw-panel { background: var(--fr-voet); border: 0; border-top: 1px solid var(--fr-voet-lijn); border-radius: 0; color: var(--fr-voet-tekst); } .fr-body .pw-widget .pw-row { border-bottom: 0; padding: 0.12rem 0; } .fr-body .pw-widget .pw-row > span { font: 400 0.8125rem/1.5 var(--fr-sans); color: var(--fr-voet-stil); } .fr-body .pw-widget .pw-row > b { font: 600 0.8125rem/1.5 var(--fr-sans); color: #FFFFFF; } .fr-body .pw-widget .pw-alert, .fr-body .pw-widget .pw-fact { border-radius: var(--fr-hoek-klein); font: 400 0.8125rem/1.5 var(--fr-sans); color: var(--fr-voet-stil); border-top: 1px solid var(--fr-voet-lijn); } .fr-body .pw-widget .pw-alert { background: color-mix(in srgb, #FFFFFF 7%, var(--fr-voet)); margin-top: 0.5rem; padding: 0.45rem 0.6rem; } .fr-body .pw-widget .pw-alert svg, .fr-body .pw-widget .pw-alert i { color: var(--fr-geel); } .fr-body .pw-widget .pw-knmi { border-radius: var(--fr-hoek-klein); } .fr-body .pw-widget .pw-geo { border-radius: var(--fr-hoek-klein); } .fr-body .pw-widget .pw-foot { background: var(--fr-voet); border-radius: var(--fr-hoek-klein); } .fr-body .pw-widget.pw-skin-kaart { background: var(--pw-kaart-vlak); color: var(--pw-kaart-inkt); border: 1px solid var(--pw-kaart-rand); } .fr-body .pw-widget.pw-skin-kaart :is(.pw-title,.pw-desc) { color: #FFFFFF; } .fr-body .pw-widget.pw-skin-kaart .pw-row > span { color: var(--pw-kaart-zacht); } .fr-body .pw-widget.pw-skin-kaart .pw-row > b { color: var(--pw-kaart-inkt); } .fr-body .pw-widget.pw-skin-kaart .pw-panel { background: var(--pw-kaart-vlak); border-top-color: var(--pw-kaart-rand); color: var(--pw-kaart-inkt); } .fr-body .pw-widget.pw-skin-kaart .pw-alert, .fr-body .pw-widget.pw-skin-kaart .pw-fact { color: var(--pw-kaart-zacht); border-top-color: var(--pw-kaart-rand); } .fr-body .pw-widget.pw-skin-kaart .pw-alert { background: var(--pw-kaart-paneel); } .fr-body .pw-widget.pw-skin-kaart .pw-foot { background: var(--pw-kaart-vlak); } .fr-body .pw-widget.pw-skin-kaart .pw-clock, .fr-body .pw-widget.pw-skin-kaart .pw-updated, .fr-body .pw-widget.pw-skin-kaart .pw-geo, .fr-body .pw-widget.pw-skin-kaart .pw-geo-txt { color: var(--pw-kaart-accent); } .fr-zoek-paneel { padding: 0 18px 12px; } .fr-stichtingsjaren { margin: 0; background: var(--fr-voet); background-image: repeating-linear-gradient(105deg, rgba(233, 236, 240, 0.04) 0 1px, transparent 1px 6rem); color: var(--fr-voet-stil); text-align: center; font: 400 0.875rem/1.5 var(--fr-sans); padding: 1.4rem 2rem 0; } .fr-stichtingsjaren span { display: inline-block; width: 100%; border-bottom: 1px solid var(--fr-voet-lijn); padding-bottom: 0.9rem; } .letterschaal { --letterschaal-lijn: var(--fr-rand); --letterschaal-vlak: var(--fr-kaart); --letterschaal-inkt: var(--fr-tekst); --letterschaal-aan: var(--fr-blauw); --letterschaal-aan-inkt: var(--fr-knoptekst); --letterschaal-hover: var(--fr-rand); } .fr-extern { font-size: 0.85em; color: var(--fr-stil); } .fr-alleen-hoorbaar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
body.fr-body, body.fr-body * { overflow-wrap: anywhere; } [data-fr-head] { width: 100%; max-width: var(--fr-max); margin: 0 auto; padding: 0 1.25rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 1rem; min-height: 86px; } [data-fr-nav] { display: flex; justify-content: center; align-self: stretch; align-items: stretch; gap: 4px; flex-wrap: wrap; } [data-fr-nav] a { position: relative; display: inline-flex; align-items: center; padding: 10px 14px 16px; margin-bottom: -1px; font: 600 0.95rem/1.2 var(--fr-sans); color: var(--fr-tekst); text-decoration: none; white-space: nowrap; } [data-fr-nav] a:hover, [data-fr-nav] a.is-hier { color: var(--fr-groen); } [data-fr-nav] a.is-hier::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 4px; background: var(--fr-terra); } [data-fr-acties] { justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem; flex-wrap: wrap; } .fr-header { background: var(--fr-bg); border-bottom: 1px solid var(--fr-groen); } .kh-kopknoppen { display: flex; align-items: center; gap: 10px; } .kh-kopknoppen > * { flex: none; } .kh-hdr-zoek, .kh-ctrl, .kh-login, .kh-kop-instellingen { box-sizing: border-box; height: 36px; border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek-knop); font: 700 0.82rem/1 var(--fr-sans); } .kh-hdr-zoek { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; background: var(--fr-kaart); color: var(--fr-tekst); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.15s; } .kh-hdr-zoek kbd { font: 700 0.7rem/1 var(--fr-sans); color: var(--fr-stil); background: none; border: 1px solid var(--fr-rand); border-radius: 3px; padding: 2px 5px; } .kh-ctrl { display: inline-flex; overflow: hidden; background: var(--fr-kaart); } .kh-ctrl button { appearance: none; box-sizing: border-box; height: 100%; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; margin: 0; border: 0; background: transparent; color: var(--fr-tekst); font: inherit; cursor: pointer; transition: background 0.15s; } .kh-ctrl button + button { border-left: 1px solid var(--fr-rand); } .kh-ctrl button svg, .kh-hdr-zoek svg { width: 16px; height: 16px; flex: none; } .kh-ctrl .kh-letter-klein { font-size: 0.82rem; } .kh-ctrl .kh-letter-normaal { font-size: 0.95rem; } .kh-ctrl .kh-letter-groot { font-size: 1.08rem; } .kh-hdr-zoek:hover, .kh-ctrl button:hover { background: var(--fr-bg); color: var(--fr-tekst); } .kh-ctrl button[aria-pressed="true"] { background: var(--fr-groen); color: var(--fr-knoptekst); } .kh-hdr-zoek:focus-visible, .kh-ctrl button:focus-visible, .kh-login:focus-visible, .kh-kop-instellingen:focus-visible, .kh-terug:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: 2px; } .kh-login { display: inline-flex; align-items: center; padding: 0 16px; border-color: var(--fr-groen); background: var(--fr-groen); color: var(--fr-knoptekst); text-decoration: none; white-space: nowrap; transition: background 0.15s; } .kh-login:hover { background: color-mix(in srgb, var(--fr-groen) 85%, #000); color: var(--fr-knoptekst); } .kh-kop-instellingen { display: none; width: 36px; padding: 0; align-items: center; justify-content: center; background: var(--fr-kaart); color: var(--fr-tekst); cursor: pointer; } .kh-kop-instellingen svg { width: 18px; height: 18px; } .kh-terug { display: none; } @media (max-width: 1369px) { html:not([data-schaal="klein"]) [data-fr-head] { grid-template-columns: 1fr auto; min-height: 0; padding-top: 14px; row-gap: 4px; } html:not([data-schaal="klein"]) [data-fr-nav] { grid-row: 2; grid-column: 1 / -1; justify-self: start; margin-left: -14px; } } @media (max-width: 1279px) { html[data-schaal="klein"] [data-fr-head] { grid-template-columns: 1fr auto; min-height: 0; padding-top: 14px; row-gap: 4px; } html[data-schaal="klein"] [data-fr-nav] { grid-row: 2; grid-column: 1 / -1; justify-self: start; margin-left: -14px; } } @media (min-width: 1370px) and (max-width: 1569px) { html[data-schaal="groot"] [data-fr-head] { grid-template-columns: 1fr auto; min-height: 0; padding-top: 14px; row-gap: 4px; } html[data-schaal="groot"] [data-fr-nav] { grid-row: 2; grid-column: 1 / -1; justify-self: start; margin-left: -14px; } } @media (max-width: 1024px) { [data-fr-nav], .kh-ctrl, .kh-hdr-zoek kbd { display: none; } html body.dorps-app .fr-header [data-fr-head] { min-height: 72px; padding-top: 0; padding-bottom: 0; } body.dorps-app .kh-kop-instellingen { display: inline-flex; } } @media (max-width: 1024px) and (hover: none) and (pointer: coarse) { body.dorps-app .kh-hdr-zoek, body.dorps-app .kh-kop-instellingen, body.dorps-app .kh-login { height: 44px; min-width: 44px; } .kh-terug { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; color: var(--fr-tekst); } .khz-esc { min-width: 44px; min-height: 44px; justify-content: center; } .khz-sug button { min-height: 44px; } } @media (max-width: 719px) { html[data-schaal="klein"] body.dorps-app .kh-hdr-zoek, html[data-schaal="klein"] body.dorps-app .kh-kop-instellingen { min-width: calc(44px / var(--letterschaal, 1) + .02px); min-height: calc(44px / var(--letterschaal, 1) + .02px); flex-shrink: 0; } } @media (max-width: 719px) { body.dorps-app .fr-header { position: sticky; top: 0; z-index: 1000; padding-top: env(safe-area-inset-top, 0px); background: var(--fr-bg); } html body.dorps-app .fr-header [data-fr-head] { flex-wrap: nowrap; gap: 2px; min-height: 58px; padding: 0 6px 0 16px; } .fr-merk-sub, .kh-login { display: none; } .kh-kopknoppen { gap: 2px; } body.dorps-app .kh-hdr-zoek, body.dorps-app .kh-kop-instellingen, .kh-terug { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--fr-tekst); } body.dorps-app .kh-hdr-zoek svg, body.dorps-app .kh-kop-instellingen svg { width: 22px; height: 22px; } .kh-hdr-zoek-tekst { display: none; } .kh-hdr-zoek:active, .kh-kop-instellingen:active, .kh-terug:active { background: var(--fr-kaart); } html body.dorps-app .fr-header [data-fr-head]:has(.kh-terug) { padding-left: 4px; } html { scroll-padding-top: calc(58px + env(safe-area-inset-top, 0px)); } html[data-schaal="klein"] { scroll-padding-top: calc(54px + env(safe-area-inset-top, 0px)); } html[data-schaal="groot"] { scroll-padding-top: calc(67px + env(safe-area-inset-top, 0px)); } } .fr-snelnav ul, .fr-clubs ul, .fr-112-lijst { list-style: none; margin: 0; padding: 0; } .fr-snelnav a, .fr-snelnav li > span { display: flex; align-items: center; gap: 0.7rem; height: 2.6rem; padding: 0 0.6rem; border-left: 3px solid transparent; border-radius: var(--fr-hoek-klein); font: 500 0.9375rem/1.3 var(--fr-sans); color: var(--fr-tekst); text-decoration: none; transition: background 0.15s; } .fr-snelnav a:hover { background: var(--fr-bg); color: var(--fr-tekst); } .fr-snelnav li.is-hier a { border-left-color: var(--fr-groen); background: var(--fr-bg); color: var(--fr-tekst); } .fr-teken { flex: none; font-size: 18px; line-height: 1; opacity: 0.85; width: 18px; text-align: center; } .fr-rail-meer { display: inline-block; margin-top: 0.3rem; font: 600 0.875rem/1.4 var(--fr-sans); color: var(--fr-blauw); text-decoration: none; } .fr-rail-meer:hover { text-decoration: underline; } .fr-112 { padding: 0.75rem 0.85rem; } .fr-112-lijst li { display: flex; gap: 0.5rem; padding: 0.42rem 0; border-bottom: 1px solid var(--fr-rand); align-items: baseline; } .fr-112-lijst li:last-child { border-bottom: 0; padding-bottom: 0.1rem; } .fr-112-tijd { flex: none; font: 400 0.75rem/1.6 var(--fr-mono); color: var(--fr-stil); padding-top: 0.15rem; } .fr-112-stip { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 2px; } .fr-112-tekst { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.45rem; } .fr-112-dienst { display: flex; align-items: center; gap: 0.4rem; font: 600 0.875rem/1.4 var(--fr-sans); color: var(--fr-tekst); } .fr-112-plaats { display: flex; align-items: center; gap: 0.4rem; font: 400 0.8125rem/1.5 var(--fr-sans); color: var(--fr-stil); } .fr-112-plaats::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 999px; background: var(--fr-ww); } .fr-112-bron { margin: 0; padding-top: 0.4rem; font: 400 0.6875rem/1.45 var(--fr-sans); color: var(--fr-stil); opacity: 0.75; } .fr-clubs { padding: 0.85rem 0.7rem; max-height: calc(100svh - 2rem); overflow: auto; scrollbar-width: thin; } .fr-clubs-lijst { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.45rem; } .fr-clubs-groep { min-width: 0; } .fr-clubs-plaatskop { font: 700 0.625rem/1.4 var(--fr-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fr-stil); padding: 0.2rem 0.55rem 0.15rem; } .fr-clubs ul { display: flex; flex-direction: column; gap: 1px; } .fr-clubs a, .fr-clubs li > span { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.55rem; border-left: 3px solid transparent; border-radius: 6px; font: 500 0.9rem/1.4 var(--fr-sans); color: var(--fr-tekst); text-decoration: none; transition: background 0.15s; } .fr-clubs a:hover { background: var(--fr-tint); color: var(--fr-tekst); } .fr-clubs a[aria-current="page"] { border-left-color: var(--fr-geel); background: var(--fr-tint); } .fr-clubs-stip { flex: none; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--fr-stil); } .fr-clubs-naam { min-width: 0; } .fr-clubs-plaats { display: none; } .fr-clubs-meer { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; padding: 0.45rem 0.55rem; border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek-klein); background: transparent; color: var(--fr-blauw); font: 600 0.875rem/1.4 var(--fr-sans); cursor: pointer; text-align: left; transition: background 0.15s; } .fr-clubs-meer:hover { background: var(--fr-tint); } .fr-clubs.is-ingeklapt .fr-clubs-groep:not(:first-of-type) { display: none; } .fr-clubs-meer .fr-clubs-meer-dicht { display: none; } .fr-clubs:not(.is-ingeklapt) .fr-clubs-meer .fr-clubs-meer-open { display: none; } .fr-clubs:not(.is-ingeklapt) .fr-clubs-meer .fr-clubs-meer-dicht { display: inline; } [data-fr-rail] .fr-kaart { border-radius: var(--fr-hoek-knop); } [data-fr-rail] .fr-kicker { font-weight: 800; } .fr-snelnav ul { display: flex; flex-direction: column; gap: 2px; margin-top: 0.5rem; } .fr-112 .fr-kicker { color: var(--fr-tekst); } .fr-112-lijst { display: flex; flex-direction: column; margin-top: 0.35rem; } .fr-112 .fr-112-lijst li { padding: 9px 0; border-bottom: 1px solid var(--fr-rand); } .fr-112 .fr-112-tekst { flex-direction: column; align-items: flex-start; gap: 2px; } .fr-112 .fr-112-stip { width: 7px; height: 7px; border-radius: 1px; } .fr-112 .fr-112-plaats::before { width: 5px; height: 5px; background: var(--fr-groen); } .fr-112 .fr-rail-meer { margin-top: 10px; } .fr-112-stip.is-rood { background: var(--fr-rood); } .fr-112-stip.is-amber { background: var(--fr-amber); } .fr-112-stip.is-blauw { background: var(--fr-blauw); } .fr-112-stip.is-groen { background: var(--fr-groen); } .fr-112-stip.is-grijs { background: var(--fr-stil); } .fr-clubs .fr-clubs-stip { width: 6px; height: 6px; background: var(--fr-tekst); } .fr-weertekens { position: absolute; width: 0; height: 0; overflow: hidden; } .fr-clublijst-naam { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-wrap: wrap; } .fr-clubs-vlag { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: var(--fr-bg); color: var(--fr-stil); font: 800 0.58rem/1 var(--fr-sans); vertical-align: 0.1em; } .fr-clublijst-vlag { padding: 0.1rem 0.45rem; border: 1px solid var(--fr-rand); border-radius: 999px; font: 500 0.6875rem/1.5 var(--fr-sans); color: var(--fr-stil); text-transform: none; letter-spacing: 0; } .fr-112-groep[hidden], .fr-briefjes[hidden], .fr-briefje[hidden], .fr-agenda-blok[hidden], .fr-agenda-regel[hidden], .fr-clubgroep[hidden], .fr-clubs-groep[hidden] { display: none; } @media (min-width: 1280px) and (max-width: 1439px) { html[data-schaal="normaal"] .fr-clubs, html[data-schaal="groot"] .fr-clubs { max-height: none; } html[data-schaal="normaal"] .fr-clubs-lijst, html[data-schaal="groot"] .fr-clubs-lijst { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; align-items: start; } } @media (min-width: 1440px) and (max-width: 1599px) { html[data-schaal="groot"] .fr-clubs { max-height: none; } html[data-schaal="groot"] .fr-clubs-lijst { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; align-items: start; } } @media (max-width: 1279px) { .fr-clubs { max-height: none; } .fr-clubs-lijst { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; align-items: start; } .fr-clubs.is-ingeklapt .fr-clubs-lijst { grid-template-columns: 1fr 1fr; } .fr-clubs-meer { grid-column: 1 / -1; } } @media (max-width: 1024px) { .fr-clubs-lijst { grid-template-columns: 1fr; } .fr-clubs.is-ingeklapt .fr-clubs-lijst { grid-template-columns: 1fr; } } @media (max-width: 719px) { .fr-snelnav { display: none; } [data-lr-112kol] > li:nth-of-type(n+3) { display: none; } } .portal-bottom-nav-v20 { display: none; } .portal-slide-panel-v20 { position: fixed; inset: 0; z-index: 1060; visibility: hidden; pointer-events: none; transition: visibility 0s .28s; } .portal-slide-panel-v20.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s 0s; } .portal-slide-backdrop-v20 { position: absolute; inset: 0; background: rgba(10, 16, 26, 0.6); opacity: 0; transition: opacity .28s cubic-bezier(.4, 0, .2, 1); } .portal-slide-panel-v20.is-open .portal-slide-backdrop-v20 { opacity: 1; } .portal-slide-body-v20 { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78vh; display: flex; flex-direction: column; background: var(--fr-kaart); border-top: 1px solid var(--fr-rand); border-radius: var(--fr-hoek) var(--fr-hoek) 0 0; transform: translateY(100%); transition: transform .28s cubic-bezier(.4, 0, 1, 1); will-change: transform; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } .portal-slide-panel-v20.is-open .portal-slide-body-v20 { transform: translateY(0); transition: transform .28s cubic-bezier(.22, .61, .36, 1); } .portal-slide-handle-v20 { width: 44px; height: 4px; margin: 10px auto 4px; border-radius: 2px; background: var(--fr-rand3); } .portal-slide-header-v20 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 18px 12px; border-bottom: 1px solid var(--fr-rand); } .portal-slide-header-v20 strong { font: 700 0.75rem/1.4 var(--fr-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fr-stil); } .portal-slide-close-v20 { border: 1px solid var(--fr-rand); background: var(--fr-kaart); color: var(--fr-tekst); border-radius: var(--fr-hoek-klein); width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .portal-slide-content-v20 { overflow-y: auto; padding: 4px 18px 18px; overscroll-behavior: contain; } .portal-slide-content-v20 a, .portal-slide-content-v20 > span { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.6rem; border-radius: var(--fr-hoek-klein); font: 600 0.9375rem/1.3 var(--fr-sans); color: var(--fr-tekst); text-decoration: none; border-left: 3px solid transparent; } .portal-slide-content-v20 a:hover { background: var(--fr-tint); color: var(--fr-tekst); } .portal-slide-content-v20 a[aria-current="page"] { border-left-color: var(--fr-geel); background: var(--fr-tint); color: var(--fr-blauw); } .portal-slide-content-v20 > span { justify-content: space-between; } @media (max-width: 1024px) { html body .kh-onderbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; justify-content: center; padding: 6px max(4px, calc((100% - 480px) / 2)) calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--fr-kaart); border-top: 1px solid var(--fr-rand); } html body .kh-onderbalk .portal-bottom-nav-item-v20 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--fr-stil); font: 600 0.72rem/1 var(--fr-sans); letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; } html body .kh-onderbalk .portal-bottom-nav-item-v20 > span:last-child { white-space: nowrap; overflow: visible; } .kh-onderbalk .dorps-balkicoon { position: relative; display: grid; place-items: center; width: 60px; height: 32px; border-radius: 16px; transition: background 0.2s; } .kh-onderbalk .dorps-balkicoon svg { width: 23px; height: 23px; } html body .kh-onderbalk .is-active, html body .kh-onderbalk [data-kh-hier], html body .kh-onderbalk [aria-expanded="true"] { color: var(--fr-groen); font-weight: 800; } .kh-onderbalk .is-active .dorps-balkicoon, .kh-onderbalk [data-kh-hier] .dorps-balkicoon, .kh-onderbalk [aria-expanded="true"] .dorps-balkicoon { background: color-mix(in srgb, var(--fr-groen) 14%, transparent); } .kh-onderbalk .is-active svg, .kh-onderbalk [data-kh-hier] svg, .kh-onderbalk [aria-expanded="true"] svg { stroke-width: 2.1; } .kh-onderbalk .portal-bottom-nav-item-v20:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: -2px; border-radius: 12px; } .kh-onderbalk .kh-nieuw112 .dorps-balkicoon::after { content: ""; position: absolute; top: 3px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: #C0392B; border: 2px solid var(--fr-kaart); box-sizing: content-box; } html body:has(.kh-onderbalk) { padding-bottom: 0; } html body.dorps-app footer.site-footer-v10 { padding-bottom: calc(var(--cms-nav-height, 72px) + 12px); } html body .dorps-meer:not(.kh-instellingen) .portal-slide-body-v20 { background: var(--fr-bg); padding-top: env(safe-area-inset-top, 0px); } .dorps-meer .portal-slide-handle-v20 { display: none; } .kh-meer-kop { justify-content: flex-end; gap: 2px; min-height: 58px; padding: 0 6px 0 16px; border-bottom: 0; } .kh-meer-kopruimte { flex: 1; } .kh-meer-kopknop { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--fr-tekst); cursor: pointer; } .kh-meer-kopknop:active { background: var(--fr-kaart); } .kh-meer-kopknop:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: 2px; } html body .dorps-meer:not(.kh-instellingen) .portal-slide-content-v20, html body .dorps-meer:not(.kh-instellingen) .kh-meer-kop { width: 100%; max-width: 480px; margin-inline: auto; box-sizing: border-box; } .kh-onderbalk:has([aria-expanded="true"]) .is-active { color: var(--fr-stil); font-weight: 600; } .kh-onderbalk:has([aria-expanded="true"]) .is-active .dorps-balkicoon { background: transparent; } .kh-onderbalk:has([aria-expanded="true"]) .is-active svg { stroke-width: 1.7; } } html body .kh-meer.portal-slide-content-v20 { padding: 0 0 24px; } html body .kh-meer .kh-meer-titel { margin: 0; padding: 10px 20px 14px; font: 700 2rem/1.15 var(--fr-serif); letter-spacing: -0.015em; color: var(--fr-tekst); } .kh-meer-groep { margin: 0 0 24px; } .kh-meer-groep h3 { margin: 0 20px 8px; font: 800 0.74rem/1.3 var(--fr-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-stil); } .kh-meer-blok { border-block: 1px solid var(--fr-rand); background: var(--fr-kaart); } html body .kh-meer .kh-meer-rij { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; box-sizing: border-box; margin: 0; padding: 10px 16px 10px 20px; border: 0; border-radius: 0; background: transparent; color: var(--fr-tekst); font: inherit; text-align: left; text-decoration: none; cursor: pointer; list-style: none; } .kh-meer .kh-meer-rij::-webkit-details-marker { display: none; } html body .kh-meer .kh-meer-rij:hover, .kh-meer .kh-meer-rij:active { background: var(--fr-bg); color: var(--fr-tekst); } .kh-meer .kh-meer-rij[aria-current="page"] { background: color-mix(in srgb, var(--fr-groen) 8%, transparent); } .kh-meer .kh-meer-rij:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: -2px; } .kh-meer-tegel { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; } .kh-meer-tekst { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; margin-bottom: -10px; padding-bottom: 10px; border-bottom: 1px solid var(--fr-rand); } .kh-meer-blok > :last-child .kh-meer-tekst, .kh-meer-blok > .kh-meer-uitklap:last-child > summary .kh-meer-tekst { border-bottom: 0; } .kh-meer-tekst strong { display: block; font: 700 0.97rem/1.3 var(--fr-sans); } .kh-meer-tekst span { display: block; margin-top: 2px; font: 400 0.8rem/1.35 var(--fr-sans); color: var(--fr-stil); overflow-wrap: anywhere; } .kh-meer-badge { padding: 2px 8px; border-radius: 999px; background: var(--fr-bg); font: 800 0.74rem/1.4 var(--fr-sans); color: var(--fr-stil); font-variant-numeric: tabular-nums; } .kh-meer-staart { display: grid; place-items: center; flex: none; color: var(--fr-stil); } .kh-meer-uitklap[open] > summary .kh-meer-staart { transform: rotate(90deg); } .kh-meer-clubs { list-style: none; margin: 0; padding: 0 16px 10px 72px; } .kh-meer-clubs li a, .kh-meer-clubs li > span { display: flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--fr-rand); border-radius: 0; font: 600 0.92rem/1.3 var(--fr-sans); color: var(--fr-tekst); text-decoration: none; } .kh-meer-clubs li:last-child a, .kh-meer-clubs li:last-child > span { border-bottom: 0; } .kh-meer-voet { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 16px; font: 400 0.78rem/1.4 var(--fr-sans); color: var(--fr-stil); } .kh-meer-beta { padding: 3px 10px; border-radius: 999px; background: var(--fr-tekst); color: var(--fr-bg); font-weight: 800; } .kh-tint-groen { color: var(--fr-groen); background: color-mix(in srgb, var(--fr-groen) 13%, transparent); } .kh-tint-water { color: var(--fr-geel); background: color-mix(in srgb, var(--fr-geel) 14%, transparent); } .kh-tint-pan { color: var(--fr-terra); background: color-mix(in srgb, var(--fr-terra) 14%, transparent); } .kh-tint-rood { color: var(--kh-rood-teken, #B03A2E); background: color-mix(in srgb, #B03A2E 12%, transparent); } .kh-tint-blauw { color: var(--kh-blauw-teken, #2E5A8C); background: color-mix(in srgb, #2E5A8C 13%, transparent); } .kh-tint-goud { color: var(--kh-goud-teken, #9A7424); background: color-mix(in srgb, #C9962E 16%, transparent); } .kh-tint-inkt { color: var(--fr-tekst); background: var(--fr-bg); } html[data-thema="donker"], html[data-thema="auto"][data-auto-stand="nacht"] { --kh-rood-teken: #E88A7E; --kh-blauw-teken: #8FB2DD; --kh-goud-teken: #D9B35C; } @media (prefers-color-scheme: dark) { html[data-thema="auto"]:not([data-auto-stand]) { --kh-rood-teken: #E88A7E; --kh-blauw-teken: #8FB2DD; --kh-goud-teken: #D9B35C; } } .kh-als-app [data-kh-installeer] { display: none; } @media (display-mode: standalone) { [data-kh-installeer] { display: none; } } html body .kh-instellingen.portal-slide-panel-v20 { bottom: 0; z-index: 1200; } html body .kh-instellingen .portal-slide-backdrop-v20 { background: rgba(12, 18, 16, 0.45); } html body .kh-instellingen .portal-slide-body-v20 { left: 0; right: 0; margin-inline: auto; width: 100%; max-width: 480px; height: auto; max-height: 90dvh; box-sizing: border-box; padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 26px 26px 0 0; background: var(--fr-kaart); color: var(--fr-tekst); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18); transform: translateY(100%); opacity: 1; transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1); } html body .kh-instellingen.is-open .portal-slide-body-v20 { transform: translateY(0); } .kh-instellingen .portal-slide-handle-v20 { width: 40px; height: 5px; margin: 12px auto 14px; border-radius: 3px; background: var(--fr-rand); } .kh-instellingen .portal-slide-header-v20 { padding: 0 0 12px; border: 0; gap: 8px; } .kh-instellingen .portal-slide-header-v20 h2 { flex: 1; margin: 0; font: 700 1.4rem/1.2 var(--fr-serif); color: var(--fr-tekst); } html body .kh-instellingen .kh-venster-sluit { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 22px; background: var(--fr-bg); color: var(--fr-tekst); cursor: pointer; } html body .kh-instellingen .portal-slide-content-v20 { padding: 0; overflow-y: auto; } .kh-inst-kop { margin: 18px 0 8px; font: 800 0.74rem/1.3 var(--fr-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-stil); } .kh-inst-kop:first-child { margin-top: 4px; } .kh-inst-tegels { display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--fr-bg); } .kh-inst-tegels button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 0 6px; border: 2px solid transparent; border-radius: 12px; background: transparent; color: var(--fr-tekst); font: 700 0.82rem/1.2 var(--fr-sans); cursor: pointer; } .kh-inst-tegels button, .kh-inst-tegels button * { overflow-wrap: normal; } @media (max-width: 299px) { .kh-inst-tegels:not(.kh-inst-letters) { grid-template-columns: 1fr; } .kh-inst-tegels:not(.kh-inst-letters) button { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 48px; padding: 0 14px; } } .kh-inst-tegels button[aria-pressed="true"] { background: var(--fr-kaart); color: var(--fr-groen); border-color: var(--fr-groen); } .kh-inst-tegels button:focus-visible { outline: 2px solid var(--fr-tekst); outline-offset: 2px; } .kh-inst-letters button { min-height: 52px; font-weight: 800; } .kh-inst-letters .kh-letter-klein { font-size: 0.9rem; } .kh-inst-letters .kh-letter-normaal { font-size: 1.15rem; } .kh-inst-letters .kh-letter-groot { font-size: 1.45rem; } html body .kh-instellingen .kh-inst-rij { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--fr-rand); border-radius: 0; color: var(--fr-tekst); text-decoration: none; } .kh-inst-rij > span { flex: 1; } .kh-inst-rij strong { display: block; font: 700 0.95rem/1.3 var(--fr-sans); } .kh-inst-rij span span { font: 400 0.8rem/1.35 var(--fr-sans); color: var(--fr-stil); } .kh-instellingen button.kh-inst-rij { width: 100%; background: transparent; text-align: left; font: inherit; cursor: pointer; } .kh-instellingen button.kh-inst-rij:focus-visible { outline: 2px solid var(--fr-tekst); outline-offset: 2px; } .kh-inst-uitklap svg { flex: none; color: var(--fr-stil); transition: transform 0.2s; } .kh-inst-uitklap[aria-expanded="true"] svg { transform: rotate(90deg); } .kh-home-uitleg { margin: 10px 0 2px; font-size: 0.88rem; color: var(--fr-stil); } .kh-inst-rij > .kh-schakel, .kh-schakel { position: relative; flex: none; width: 50px; height: 30px; border-radius: 15px; background: var(--fr-rand); transition: background 0.2s; } .kh-schakel::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s; } [aria-checked="true"] > .kh-schakel { background: var(--fr-groen); } [aria-checked="true"] > .kh-schakel::after { transform: translateX(20px); } .kh-inst-alles { width: 100%; min-height: 50px; margin-top: 14px; border: 1px solid var(--fr-rand); border-radius: 14px; background: transparent; color: var(--fr-tekst); font: 800 0.95rem/1.2 var(--fr-sans); cursor: pointer; } .kh-inst-alles:focus-visible { outline: 2px solid var(--fr-tekst); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .kh-schakel, .kh-schakel::after, .kh-inst-uitklap svg { transition: none; } } .kh-inst-uitleg { margin-top: 14px; } .kh-inst-uitleg p { margin: 0 0 8px; font-size: 0.95rem; color: var(--fr-stil); } .kh-inst-uitleg ol { list-style: none; counter-reset: kh-stap; margin: 0; padding: 0; } .kh-inst-uitleg li { counter-increment: kh-stap; display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--fr-rand); font-size: 0.95rem; } .kh-inst-uitleg li::before { content: counter(kh-stap); display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--fr-groen); color: var(--fr-knoptekst); font: 800 0.85rem/1 var(--fr-sans); } .khz-d { border: 0; padding: 0; margin: 0; max-width: none; max-height: none; width: 100%; height: 100%; background: transparent; color: var(--fr-tekst); font-family: var(--fr-sans); } .khz-d::backdrop { background: rgba(12, 18, 16, 0.5); } .khz-p { position: relative; display: flex; flex-direction: column; width: min(640px, calc(100% - 32px)); max-height: 76vh; margin: 10vh auto 0; overflow: hidden; background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); animation: khz-in 0.18s ease both; } @keyframes khz-in { from { opacity: 0; transform: translateY(-6px) scale(0.99); } to { opacity: 1; transform: none; } } .khz-k { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px; border-bottom: 1px solid var(--fr-rand); color: var(--fr-stil); } .khz-k:focus-within { border-bottom: 2px solid var(--fr-groen); } .khz-k input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fr-tekst); font: inherit; font-size: 1.08rem; } .khz-k input::-webkit-search-cancel-button { display: none; } .khz-esc { display: inline-flex; align-items: center; border: 1px solid var(--fr-rand); border-radius: 5px; background: transparent; color: var(--fr-stil); font: 700 0.72rem/1 var(--fr-sans); padding: 5px 7px; cursor: pointer; } .khz-esc svg { display: none; } .khz-r { overflow-y: auto; padding: 6px 0 10px; } .khz-g { margin: 12px 16px 4px; font: 800 0.68rem/1.3 var(--fr-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-stil); } .khz-i { display: flex; align-items: center; gap: 12px; margin: 0 8px; padding: 9px 10px; border-radius: 7px; color: var(--fr-tekst); text-decoration: none; } .khz-i[aria-selected="true"], .khz-i:hover { background: color-mix(in srgb, var(--fr-groen) 11%, transparent); color: var(--fr-tekst); } .khz-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 7px; background: var(--fr-bg); color: var(--fr-groen); } .khz-ic-rood { color: var(--kh-rood-teken, #B03A2E); background: color-mix(in srgb, #B03A2E 11%, transparent); } .khz-tekst { min-width: 0; } .khz-t { display: block; font: 700 0.93rem/1.3 var(--fr-sans); } .khz-s { display: block; font: 400 0.8rem/1.35 var(--fr-sans); color: var(--fr-stil); } .khz-t mark { padding: 0 1px; border-radius: 2px; background: color-mix(in srgb, var(--fr-terra) 22%, transparent); color: inherit; } .khz-sug { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 16px 8px; } .khz-sug button { padding: 6px 12px; border: 1px solid var(--fr-rand); border-radius: 999px; background: var(--fr-bg); color: var(--fr-tekst); font: 600 0.85rem/1.2 var(--fr-sans); cursor: pointer; } .khz-leeg { padding: 28px 16px; text-align: center; color: var(--fr-stil); font-size: 0.9rem; } .khz-leeg strong { display: block; margin-bottom: 4px; color: var(--fr-tekst); } .khz-v { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--fr-rand); font-size: 0.74rem; color: var(--fr-stil); } .khz-v kbd { margin-right: 4px; padding: 0 5px; border: 1px solid var(--fr-rand); border-radius: 4px; background: none; color: inherit; font: 700 0.74rem/1.4 var(--fr-sans); } .khz-i:focus-visible, .khz-esc:focus-visible, .khz-sug button:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: 2px; } @media (max-width: 640px) { .khz-p { width: 100%; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); } .khz-v { display: none; } .khz-k { padding-right: 4px; } .khz-esc { justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; color: var(--fr-tekst); } .khz-esc span { display: none; } .khz-esc svg { display: block; } .khz-sug button { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .khz-p { animation: none; } } .fr-voet-jas { margin-top: auto; } .fr-body .site-footer-builder-v14516 { --footer-bg: var(--fr-voet); --footer-text: var(--fr-voet-tekst); --footer-link: var(--fr-voet-tekst); --footer-link-hover: #FFFFFF; --footer-border: var(--fr-voet-lijn); --footer-border-top-width: 0px; --footer-border-top-color: transparent; } .fr-body .site-footer-v10 { background: repeating-linear-gradient(105deg, rgba(233, 236, 240, 0.04) 0 1px, transparent 1px 6rem), var(--fr-voet); color: var(--fr-voet-tekst); border-top: 0; font-family: var(--fr-sans); } .fr-body .site-footer-inner-v10 { max-width: none; padding-left: 2rem; padding-right: 2rem; } .fr-body .site-footer-v10 .site-footer-brand-row-v20 strong, .fr-body .site-footer-v10 .site-footer-about-v20 h2, .fr-body .site-footer-v10 .site-footer-brand-name-v20 { font-family: var(--fr-serif); font-weight: 700; color: #FFFFFF; } .fr-body .site-footer-v10 .site-footer-connect-label-v20, .fr-body .site-footer-v10 .site-footer-col-v20 > h2, .fr-body .site-footer-v10 .site-footer-col-title-v20 { font: 700 0.75rem/1.4 var(--fr-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fr-voet-stil); } .fr-body .site-footer-v10 a { color: var(--fr-voet-tekst); text-decoration: none; } .fr-body .site-footer-v10 a:hover { color: #FFFFFF; } .fr-body .site-footer-v10 .site-footer-bottom { border-top-color: var(--fr-voet-lijn); color: var(--fr-voet-stil); font-size: 0.8125rem; } .fr-body .site-footer-v10 .site-footer-logo-v14516 { background: var(--fr-tint); color: #FFFFFF; border-radius: var(--fr-hoek-klein); font-family: var(--fr-serif); } .kh-voet-jas { --kh-voet-goot: clamp(16px, 1.4vw, 20px); } .kh-voet-groetrij, html body.dorps-app .site-footer-builder-v14516 { background-color: var(--fr-voet); } .kh-voet-groetrij { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 30px; padding: 36px var(--kh-voet-goot) 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: var(--fr-voet-tekst); } .kh-voet-groet { margin: 0; font: italic 600 clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem)/1.2 var(--fr-serif); color: #fff; } .kh-voet-motto { margin: 0; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--fr-voet-stil); } .kh-voet-motto b { font-weight: 700; color: var(--fr-voet-tekst); } html body.dorps-app .site-footer-builder-v14516 { border-top: 0; box-shadow: none; } html body.dorps-app .site-footer-builder-v14516 .site-footer-inner-v10 { padding: 0 var(--kh-voet-goot, clamp(16px, 1.4vw, 20px)); } html body.dorps-app .site-footer-columns-v20 { gap: 32px; padding: 40px 0 26px; border-bottom: 0; } html body.dorps-app .site-footer-columns-v20:has(> :nth-child(4)) { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); } html body.dorps-app .site-footer-col-v20 { gap: 0; } html body.dorps-app .kh-voet-merk { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--fr-voet-tekst); text-decoration: none; } html body.dorps-app .site-footer-about-v20 .site-footer-brand-row-v20 { display: block; } html body.dorps-app .site-footer-about-v20 p { max-width: 44ch; font-size: 0.88rem; line-height: 1.6; color: var(--fr-voet-tekst); } html body.dorps-app .site-footer-v10 .site-footer-connect-label-v20 { margin-bottom: 12px; font: 800 0.76rem/1.4 var(--fr-sans); letter-spacing: 0.09em; text-transform: uppercase; color: #fff; opacity: 1; } html body.dorps-app .site-footer-v10 .site-footer-connect-label-v20::before { content: ""; display: inline-block; width: 16px; height: 3px; margin-right: 8px; vertical-align: 2px; background: var(--fr-voet-accent, var(--fr-terra)); } html body.dorps-app .site-footer-v10 .site-footer-legal-items-v20 { display: flex; flex-direction: column; gap: 7px; columns: auto; font-size: 0.88rem; } html body.dorps-app .site-footer-v10 .site-footer-legal-items-v20 a { display: block; margin: 0; font-weight: 400; color: var(--fr-voet-tekst); text-decoration: underline; text-underline-offset: 3px; } html body.dorps-app .site-footer-v10 .site-footer-legal-items-v20 a:hover { color: #fff; } html body.dorps-app .site-footer-builder-v14516 .site-footer-social-v20 { gap: 10px; margin: 0 0 14px; } html body.dorps-app .site-footer-builder-v14516 .site-footer-social-v20 a { width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 50%; background: transparent; --brand: #fff; font-size: 1.05rem; transform: none; } html body.dorps-app .site-footer-builder-v14516 .site-footer-social-v20 a:hover, html body.dorps-app .site-footer-builder-v14516 .site-footer-social-v20 a:focus-visible { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); transform: none; } html body.dorps-app .site-footer-contact-v20 { margin: 0; } html body.dorps-app .site-footer-v10 .site-footer-contact-v20 a { display: inline-flex; align-self: flex-start; align-items: center; gap: 9px; min-height: 40px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--fr-hoek-knop); font: 600 0.85rem/1.2 var(--fr-sans); color: var(--fr-voet-tekst); text-decoration: none; } html body.dorps-app .site-footer-v10 .site-footer-contact-v20 a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } html body.dorps-app .site-footer-bottom-v14516 { gap: 8px 22px; margin: 0 !important; padding: 14px 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.14) !important; font-size: 0.78rem; color: var(--fr-voet-stil); } html body.dorps-app .site-footer-bottom-v14516 a { font-weight: 700; color: var(--fr-voet-stil); text-decoration: underline; text-underline-offset: 3px; } html body.dorps-app .site-footer-bottom-v14516 a:hover { color: #fff; } html body.dorps-app .site-footer-v10 a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 900px) { html body.dorps-app .site-footer-builder-v14516 .site-footer-columns-v20, html body.dorps-app .site-footer-builder-v14516 .site-footer-columns-v20:has(> :nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; } } @media (max-width: 719px) { html body.dorps-app .site-footer-v10 .site-footer-legal-items-v20 { gap: 0; } html body.dorps-app .site-footer-v10 .site-footer-legal-items-v20 a { display: flex; align-items: center; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; } html body.dorps-app .site-footer-builder-v14516 .site-footer-social-v20 a { width: 44px; height: 44px; } html body.dorps-app .site-footer-v10 .site-footer-contact-v20 a { min-height: 44px; } html body.dorps-app .site-footer-bottom-v14516 a { display: inline-flex; align-items: center; min-height: 44px; } } @media (max-width: 520px) { html body.dorps-app .site-footer-builder-v14516 .site-footer-columns-v20, html body.dorps-app .site-footer-builder-v14516 .site-footer-columns-v20:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1fr); } } .fr-hero-datum { margin-top: 0; } @media (max-width: 719px) { .fr-hero { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .kh-sec { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .kh-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--fr-tekst); } #fr-main .kh-sechead h2 { margin: 0; min-width: 0; font: 600 1.35rem/1.2 var(--fr-serif); color: var(--fr-tekst); } .kh-sechead-meer { flex: none; display: inline-flex; align-items: center; min-height: 32px; font: 600 0.88rem/1.2 var(--fr-sans); color: var(--fr-groen); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .kh-sechead-meer:hover { text-decoration-thickness: 2px; } .kh-sechead-regel { flex: none; font-size: 0.8rem; color: var(--fr-stil); } .kh-kaart, .kh-lijstkaart, .kh-nieuwskaart, .kh-handig-tegel, .kh-112-kaart, .kh-bezoek { min-width: 0; background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek-knop); } .kh-kaart { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; } .kh-klik { position: relative; transition: background-color 0.15s, border-color 0.15s; } .kh-klik-a { color: inherit; text-decoration: none; } .kh-klik-a::after { content: ""; position: absolute; inset: 0; border-radius: var(--fr-hoek-knop); } .kh-agenda-regel .kh-klik-a::after, .kh-112-rij .kh-klik-a::after { border-radius: 0; } .kh-klik:hover { background-color: color-mix(in srgb, var(--fr-groen) 7%, var(--fr-kaart)); border-color: var(--fr-groen); } .kh-klik:hover .kh-klik-a { color: var(--fr-groen); } .kh-klik-a:focus-visible { outline: none; } .kh-klik-a:focus-visible::after { outline: 2px solid var(--fr-groen); outline-offset: -2px; } .kh-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .kh-kaart-soort, .kh-nieuws-label { margin: 0; font: 800 0.7rem/1.35 var(--fr-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--fr-groen); overflow-wrap: anywhere; } #fr-main .kh-kaart-titel, #fr-main .kh-agenda-titel { margin: 0; font: 700 1rem/1.3 var(--fr-sans); color: var(--fr-tekst); overflow-wrap: anywhere; } .kh-kaart-tekst { margin: 0; font-size: 0.86rem; line-height: 1.45; color: var(--fr-stil); } .kh-kaart-tekst.is-open { font-weight: 700; color: var(--fr-groen); } .kh-uitlabel { align-self: flex-start; margin-top: 6px; padding: 3px 6px; border: 1px solid currentColor; border-radius: var(--fr-hoek-klein); font: 800 0.66rem/1 var(--fr-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fr-terra); } .kh-lijstkaart { padding: 2px 18px; } .kh-agenda-regel { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; margin: 0 -18px; padding: 12px 18px; border-top: 1px solid var(--fr-rand); } .kh-agenda-regel:first-child { border-top: 0; } .kh-agenda-wanneer { margin: 0; font: 800 0.7rem/1.35 var(--fr-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--fr-terra); } .kh-agenda-plek { margin: 0; max-width: 14rem; font-size: 0.82rem; line-height: 1.4; text-align: right; color: var(--fr-stil); } .kh-nieuws-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .kh-nieuwskaart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; } .kh-nieuws-foto { display: grid; place-items: center; width: 136px; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek-klein); background: color-mix(in srgb, var(--fr-groen) 12%, var(--fr-kaart)); color: var(--fr-groen); } .kh-nieuws-foto img { display: block; width: 100%; height: 100%; object-fit: cover; } .kh-nieuws-foto img.nieuws-bronlogo { object-fit: contain; padding: 10px; background: #fff; } .kh-nieuws-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .kh-nieuws-tijd { margin-left: 4px; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: none; color: var(--fr-stil); } .kh-nieuws-kop { font: 700 1rem/1.3 var(--fr-sans); color: var(--fr-tekst); overflow-wrap: anywhere; } .kh-nieuws-bron { font-size: 0.76rem; line-height: 1.4; color: var(--fr-stil); } .kh-nieuws-bijschrift { overflow-wrap: anywhere; } .kh-nieuws-bijschrift svg { margin-right: 4px; vertical-align: -2px; } .kh-nowrap { white-space: nowrap; } .kh-nieuws-bron svg { display: inline-block; vertical-align: 0; } @media (max-width: 640px), (min-width: 1200px) and (max-width: 1799px) { .kh-nieuws-foto { width: 88px; } } @media (min-width: 1200px) { .kh-nieuws-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .kh-prikvoet { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .kh-prikvoet-noot { font-size: 0.8rem; color: var(--fr-stil); } .kh-leeg { margin: 0; padding: 16px 18px; border: 1px dashed var(--fr-rand); border-radius: var(--fr-hoek-knop); color: var(--fr-stil); } .kh-knop { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 40px; padding: 10px 18px; border: 1px solid var(--fr-groen); border-radius: var(--fr-hoek-knop); background: var(--fr-groen); color: var(--fr-knoptekst); font: 700 0.9rem/1.2 var(--fr-sans); text-align: center; text-decoration: none; } .kh-knop:hover { background: color-mix(in srgb, var(--fr-groen) 86%, var(--fr-tekst)); color: var(--fr-knoptekst); } .kh-knop-lijn { background: transparent; color: var(--fr-groen); } .kh-knop-lijn:hover { background: color-mix(in srgb, var(--fr-groen) 8%, transparent); color: var(--fr-groen); } .kh-knop:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: 2px; } .kh-handig-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } @media (min-width: 560px) { html:not([data-schaal="groot"]) .kh-handig-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 640px) { html[data-schaal="groot"] .kh-handig-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1740px) { html:not([data-schaal="groot"]) .kh-handig-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1980px) { html[data-schaal="groot"] .kh-handig-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .kh-handig-tegel { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 10px 14px; align-items: start; padding: 16px 18px; } .kh-handig-icoon { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; } .kh-handig-tekst { min-width: 0; } .kh-handig-tekst .kh-klik-a { display: block; font: 700 1rem/1.25 var(--fr-sans); color: var(--fr-tekst); } .kh-handig-sub { display: block; margin-top: 3px; font-size: 0.8rem; line-height: 1.4; color: var(--fr-stil); } .kh-handig-actie { grid-column: 2; align-self: end; display: inline-flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--fr-rand); font: 800 0.85rem/1.2 var(--fr-sans); font-variant-numeric: tabular-nums; color: var(--fr-groen); } .kh-handig-actie.is-tel { font-size: 0.98rem; white-space: nowrap; } .kh-handig-actie.is-rood { color: var(--kh-rood-teken, #B03A2E); } .kh-112-kaart { overflow: hidden; } .kh-112-dag { margin: 0; padding: 8px 18px; border-bottom: 1px solid var(--fr-rand); background: var(--fr-bg); font: 800 0.72rem/1.3 var(--fr-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-stil); } .kh-112-lijst + .kh-112-dag { border-top: 1px solid var(--fr-rand); } .kh-112-lijst { list-style: none; margin: 0; padding: 0; } .kh-112-rij { display: grid; grid-template-columns: 44px 22px minmax(0, 1fr); gap: 0 12px; align-items: start; padding: 12px 18px; } .kh-112-rij:not([hidden]) ~ .kh-112-rij:not([hidden]) { border-top: 1px solid var(--fr-rand); } .kh-112-tijd { padding-top: 3px; font: 0.78rem/1.4 var(--fr-mono); font-variant-numeric: tabular-nums; color: var(--fr-stil); } .kh-112-teken { display: grid; place-items: center; width: 22px; height: 22px; font-size: 15px; line-height: 1; } .kh-112-kern { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .kh-112-tekst { display: flex; align-items: baseline; gap: 8px; font: 700 1rem/1.35 var(--fr-sans); color: var(--fr-tekst); } .kh-112-regel { min-width: 0; overflow-wrap: anywhere; } .kh-prio { flex: none; padding: 1px 6px; border: 1px solid var(--fr-rand); border-radius: 3px; background: var(--fr-bg); font: 800 0.66rem/1.4 var(--fr-sans); color: var(--fr-stil); } .kh-prio.is-p1 { color: var(--kh-rood-teken, #B03A2E); } .kh-112-sub { font-size: 0.78rem; line-height: 1.4; color: var(--fr-stil); } .kh-bezoek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px; padding: 20px 22px; } .kh-bezoek-tekst { flex: 1 1 18rem; min-width: 0; } #fr-main .kh-bezoek-tekst h2 { margin: 0 0 6px; font: 600 1.3rem/1.2 var(--fr-serif); color: var(--fr-tekst); } .kh-bezoek-tekst p { margin: 0; max-width: 48ch; font-size: 0.92rem; color: var(--fr-stil); } .kh-bezoek-knoppen { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; } .kh-knmi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; padding: 10px 14px; border: 1px solid; border-radius: var(--fr-hoek-knop); font-size: 0.88rem; line-height: 1.4; color: var(--fr-tekst); } .kh-knmi.is-geel { border-color: #C9A000; background: color-mix(in srgb, #F2C200 22%, var(--fr-kaart)); } .kh-knmi.is-oranje { border-color: #D26A00; background: color-mix(in srgb, #F28C00 24%, var(--fr-kaart)); } .kh-knmi.is-rood { border-color: #B8281C; background: color-mix(in srgb, #D8261A 22%, var(--fr-kaart)); } .kh-knmi-code { font-weight: 800; } .kh-knmi-bron { margin-left: auto; font: 700 0.7rem/1.4 var(--fr-sans); letter-spacing: 0.08em; color: var(--fr-tekst); } @media (max-width: 719px) { .kh-sechead-meer { position: relative; } .kh-sechead-meer::after { content: ""; position: absolute; inset: -6px -4px; } .kh-knop { min-height: 44px; } } @media (max-width: 640px) { .kh-raster:not(.kh-raster-vast) { grid-template-columns: minmax(0, 1fr); } .kh-agenda-regel { grid-template-columns: 82px minmax(0, 1fr); } .kh-agenda-plek { grid-column: 2; max-width: none; text-align: left; } } @media (max-width: 359px) { .kh-raster-vast { grid-template-columns: minmax(0, 1fr); } .kh-112-rij { grid-template-columns: 44px minmax(0, 1fr); } .kh-112-teken { display: none; } } @media (max-width: 299px) { .kh-nieuwskaart { grid-template-columns: minmax(0, 1fr); gap: 10px; } .kh-nieuws-foto { width: 100%; } } .kh-nu { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2; display: grid; justify-items: start; row-gap: 1px; max-width: min(15rem, calc(100% - 9rem)); padding: 0.45rem 0.75rem 0.5rem; border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek-knop); background: color-mix(in srgb, var(--fr-kaart) 84%, transparent); color: var(--fr-tekst); font: 600 0.72rem/1.3 var(--fr-sans); pointer-events: none; } .kh-nu-kop { font: 800 0.6rem/1.3 var(--fr-sans); letter-spacing: 0.14em; color: var(--fr-groen); } .kh-nu-klok { display: flex; align-items: baseline; gap: 0.35rem; } .kh-nu-tijd { font: 600 1.3rem/1.1 var(--fr-serif); font-variant-numeric: tabular-nums; } .kh-nu-dagdeel, .kh-nu-datum, .kh-nu-sub { font-size: 0.68rem; color: var(--fr-stil); } .kh-nu-weer { display: flex; align-items: center; gap: 0.3rem; min-width: 0; width: 100%; margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--fr-rand); } .kh-nu-teken { flex: none; } .kh-nu-temp { flex: none; font: 600 1.05rem/1 var(--fr-serif); } .kh-nu-oms { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @media (min-width: 720px) { .kh-open-telling, .kh-open-voet { display: none; } } @media (max-width: 719px) { .kh-open { position: relative; z-index: 3; margin-inline: -1.25rem; padding: 0.9rem 1.25rem 0; gap: 0.6rem; background: var(--fr-kaart); border-top: 1px solid var(--fr-rand); border-bottom: 1px solid var(--fr-rand); border-radius: 1.1rem 1.1rem 0 0; } .kh-open .kh-sechead { align-items: center; gap: 0.3rem 0.5rem; flex-wrap: wrap; padding: 0; border: 0; } .kh-open .kh-sechead-meer { display: none; } .kh-open-telling { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; margin-left: auto; font: 600 0.72rem/1 var(--fr-sans); color: var(--fr-stil); white-space: nowrap; } #fr-main .kh-open .kh-sechead h2 { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 1.15rem; } .kh-open .kh-sechead h2::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--fr-open-stip); } .kh-open-rail { position: relative; margin-inline: -1.25rem; } .kh-open-rail::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2.2rem; pointer-events: none; background: linear-gradient(to right, transparent, var(--fr-kaart)); } .kh-open .kh-raster { display: flex; gap: 0.7rem; padding: 0 1.25rem 0.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 1.25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .kh-open .kh-raster::-webkit-scrollbar { display: none; } .kh-open .kh-kaart { position: relative; flex: 0 0 auto; width: 12.5rem; gap: 0; padding: 0.7rem 0.8rem; border-radius: 0.8rem; background: var(--fr-bg); scroll-snap-align: start; } .kh-open .kh-klik-a::after { border-radius: 0.8rem; } .kh-open .kh-klik:hover { background-color: color-mix(in srgb, var(--fr-groen) 7%, var(--fr-bg)); } #fr-main .kh-open .kh-kaart-titel { order: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 1rem/1.2 var(--fr-serif); } .kh-open .kh-kaart-tekst { order: 1; margin-top: 0.25rem; font: 600 0.78rem/1.3 var(--fr-sans); color: var(--fr-stil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kh-open .kh-kaart-tekst.is-open { color: var(--fr-open-t); } .kh-open .kh-open-woord { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .kh-open .kh-kaart-tekst.is-dicht::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.3rem; border: 1.5px solid currentColor; border-radius: 50%; vertical-align: 0.05em; } .kh-open .kh-kaart-soort { order: 2; margin-top: 0.15rem; font: 400 0.7rem/1.4 var(--fr-sans); letter-spacing: 0; text-transform: none; color: var(--fr-stil); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; } .kh-open .kh-uitlabel { order: 3; } .kh-open-voet { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 44px; margin-inline: -1.25rem; padding: 0.7rem 1.25rem; border-top: 1px solid var(--fr-rand); background: var(--fr-bg); font: 700 0.85rem/1.3 var(--fr-sans); color: var(--fr-groen); text-decoration: none; } .kh-open-voet:hover { background: color-mix(in srgb, var(--fr-groen) 7%, var(--fr-bg)); } .kh-open-voet:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: -2px; } .kh-open-zonder-voet { padding-bottom: 0.9rem; } .kh-open-voet-pijl { font-size: 1.2rem; line-height: 1; } .kh-nu { top: 0.45rem; left: 0.4rem; display: inline-flex; align-items: center; gap: 0.3rem; max-width: calc(100% - 7.5rem); padding: 0.15rem 0.55rem 0.15rem 0.4rem; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--fr-kaart) 86%, transparent); font: 600 0.78rem/1.3 var(--fr-sans); } .kh-nu-kop, .kh-nu-dagdeel, .kh-nu-datum, .kh-nu-sub { display: none; } .kh-nu-weer { order: 1; width: auto; margin: 0; padding: 0; border: 0; } .kh-nu-klok { order: 2; flex: none; } .kh-nu-tijd { font: inherit; } .kh-nu-temp { font: 600 0.95rem/1.1 var(--fr-serif); } .kh-nu:has(.kh-nu-weer) .kh-nu-klok::before { content: "·"; margin-right: 0.3rem; color: var(--fr-stil); } } .fr-rubriek-kop h1 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); } .fr-rubriek-intro { font-size: 1.05rem; color: var(--fr-tekst); } body:has(.dorps-onderbalk) #fr-main .kh-112-pagina .fr-rubriek-kop h1 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); } body:has(.dorps-onderbalk) #fr-main .kh-112-pagina .fr-rubriek-intro { font-size: 1.05rem; line-height: 1.55; } .fr-chip:hover { border-color: var(--fr-groen); } .fr-chip:focus-visible, .fr-bronkiezer summary:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: 2px; } .kh-filters .fr-chip-stip { width: 7px; height: 7px; } .kh-stip-brandweer { background: var(--fr-terra); } .kh-stip-ambulance { background: #C98F2A; } .kh-stip-politie { background: var(--fr-geel); } .kh-stip-overig { background: var(--fr-stil); } @media (max-width: 640px) { .kh-filters { flex-wrap: wrap; overflow-x: visible; } } #fr-main .kh-daglabel { margin: 22px 0 8px; font: 700 0.9rem/1.3 var(--fr-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fr-tekst); } .kh-112-rij.heeft-venster { transition: background-color 0.15s; } .kh-112-rij.heeft-venster:hover { background-color: color-mix(in srgb, var(--fr-groen) 7%, var(--fr-kaart)); } .kh-112-rij .fr-112-regel-knop:focus-visible { outline-color: var(--fr-groen); } .kh-leeg-keuze, .kh-leeg-blok { margin: 14px 0 0; padding: 26px 20px; border: 1px dashed var(--fr-stil); border-radius: var(--fr-hoek-knop); font-size: 0.92rem; text-align: center; color: var(--fr-stil); } .kh-leeg-blok { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-block: 34px; } .kh-leeg-blok b { color: var(--fr-tekst); } #fr-main .stad-verantwoording { position: relative; display: grid; gap: 10px; margin: 22px 0 0; padding: 16px 18px; border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek-knop); background: var(--fr-kaart); font: 400 0.92rem/1.55 var(--fr-sans); color: var(--fr-tekst); } #fr-main .stad-verantwoording::before { content: ""; position: absolute; top: -1px; left: 14px; width: 26px; height: 3px; background: var(--fr-groen); } #fr-main .stad-verantwoording h2 { margin: 0; font: 700 1rem/1.3 var(--fr-sans); letter-spacing: 0; color: var(--fr-tekst); } #fr-main .stad-verantwoording p { margin: 0; } #fr-main .stad-verantwoording-contact { padding-top: 0; border-top: 0; } #fr-main .stad-verantwoording-bronnen { padding: 0; background: none; font-size: 0.75rem; color: var(--fr-stil); } #fr-main .stad-verantwoording-label { color: inherit; } #fr-main .stad-verantwoording .stad-melding-app { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; } #fr-main .stad-verantwoording .stad-melding-storing { margin: 0; font: inherit; } #fr-main .bcm-leeg-waarde { font-style: italic; color: var(--fr-stil); } #fr-main .bcm-card__status.bcm-leeg-waarde { font-size: 0.8rem; } #fr-main .bcm-chip, #fr-main .bcm-toggle, #fr-main .bcm-select { border-radius: 999px; } #fr-main .bcm-chip:hover, #fr-main .bcm-toggle:hover, #fr-main .bcm-select:hover { border-color: var(--fr-groen); } .da-agenda .da-chip { min-height: 36px; padding: 0 16px; font: 600 0.86rem/1 var(--fr-sans); border-radius: 999px; } .da-agenda .da-chip:hover { border-color: var(--fr-groen); } .da-agenda .da-chip:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: 2px; } @media (max-width: 719px) { .da-agenda .da-chip { min-height: 44px; } } @media (max-width: 719px) { .kh-voet-merk { min-height: 44px; } .fr-chip { height: auto; min-height: 44px; } #fr-main .bcm-plan__cta { min-height: 44px; } #fr-main .bcm-block .bcm-btn { min-height: 44px; } #fr-main .bcm-block__claim-cta { display: inline-flex; align-items: center; min-height: 44px; } } body .stad-venster-kop { font: 600 0.95rem/1.5 var(--fr-mono); } .kh-home-leeg { display: none; } @media (max-width: 1024px) { html[data-kh-home-uit~="weer"] [data-kh-home="weer"], html[data-kh-home-uit~="ondernemers"] [data-kh-home="ondernemers"], html[data-kh-home-uit~="agenda"] [data-kh-home="agenda"], html[data-kh-home-uit~="nieuws"] [data-kh-home="nieuws"], html[data-kh-home-uit~="prikbord"] [data-kh-home="prikbord"], html[data-kh-home-uit~="verenigingen"] [data-kh-home="verenigingen"], html[data-kh-home-uit~="handig"] [data-kh-home="handig"], html[data-kh-home-uit~="m112"] [data-kh-home="m112"], html[data-kh-home-uit~="bezoek"] [data-kh-home="bezoek"] { display: none; } html[data-kh-home-leeg] .kh-home-leeg { display: block; padding: 24px 20px; border: 1px dashed var(--fr-rand); border-radius: 18px; text-align: center; color: var(--fr-stil); } } .kh-home-leeg strong { display: block; margin-bottom: 4px; color: var(--fr-tekst); font: 700 1rem/1.3 var(--fr-sans); } .kh-home-leeg p { margin: 0; } .kh-home-leeg button { min-height: 44px; margin-top: 14px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--fr-groen); color: var(--fr-knoptekst); font: 800 0.95rem/1.2 var(--fr-sans); cursor: pointer; } .kh-home-leeg button:focus-visible { outline: 2px solid var(--fr-tekst); outline-offset: 2px; } @media (max-width: 719px) { .fr-overons-kaarten, .fr-colofon-feiten, .fr-tweeluik, .fr-auth-rij, .fr-modal-kaart, .fr-modal-legenda { grid-template-columns: minmax(0, 1fr); } .fr-modal-kaart { max-height: 92svh; } .fr-modal-schijf { width: 220px; height: 220px; } .fr-modal-schijf svg { width: 220px; height: 220px; } .fr-modal-links { padding: 1.5rem 1.25rem 1.25rem; } .fr-modal-rechts { padding: 1.4rem 1.25rem 1.5rem; } .fr-briefjes, .fr-clubdetail-feiten, .fr-veld-rij { grid-template-columns: minmax(0, 1fr); } .fr-titel { font-size: 1.85rem; } .fr-artikel .fr-titel { font-size: 1.85rem; } .fr-hist-uitgelicht-links a { flex: 1 1 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } .portal-contact-card-v1473 h1 { font-size: 1.5rem; margin: 0 0 0.3rem; } #fr-main .fr-over-waarden { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); } #fr-main .fr-weetjes-rij { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } body .portal-contact-card-v1473 .form-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } #fr-main .fr-hist-uitgelicht-links { flex: 1 1 auto; min-width: 0; } @media (max-width: 719px) { .fr-ww-kijk { min-width: 44px; min-height: 44px; } .fr-formulier button[type="submit"], #btncontact { min-height: 44px; } .fr-auth-wissel .fr-auth-naar-home { display: inline-flex; align-items: center; min-height: 44px; } .fr-checkregel { min-height: 44px; align-items: center; } .fr-checkregel input { width: 22px; height: 22px; margin-top: 0; } .fr-vangnet-knop { min-height: 44px; } .ci-maker-links a { min-height: 44px; } #fr-main .fr-hist-uitgelicht-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } }
:root { --jd-bg: #FAF7F0; --jd-surface: #FFFFFF; --jd-ink: #22304A; --jd-blauw: #1E4C8F; --jd-blauw-h: #173C72; --jd-golf: #8FB2E0; --jd-muted: #5C6880; --jd-line: #E6E0D2; --jd-footer: #12294F; --jd-on-accent: #FFFFFF; --jd-footer-ink: #D6E2F2; --jd-footer-muted: #9FB6D4; --jd-roze: #D84A84; --jd-rood: #C6392E; --jd-geel: #E3A63C; --jd-geel-t: #8A5E14; --jd-groen: #4A7B52; --jd-groen-t: #3C6343; --jd-oranje: #DC7A35; --jd-geel-zacht: #F0C04A; --jd-rood-op-donker: #E8857A; --jd-em: var(--jd-roze); --jd-streep: repeating-linear-gradient(90deg, rgba(250, 247, 240, .4) 0 1px, transparent 1px 2.2rem), linear-gradient(90deg, #C6392E 0 9%, #E8A4C4 9% 18%, #E3A63C 18% 30%, #DC7A35 30% 39%, #D84A84 39% 51%, #C6392E 51% 60%, #F0C04A 60% 73%, #E8A4C4 73% 82%, #4A7B52 82% 100%); --jd-serif: "Newsreader", Georgia, "Times New Roman", serif; --jd-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --jd-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --jd-r-s: 8px; --jd-r: 10px; --jd-r-l: 12px; --fr-bg: var(--jd-bg); --fr-kaart: var(--jd-surface); --fr-tekst: var(--jd-ink); --fr-stil: var(--jd-muted); --fr-rand: var(--jd-line); --fr-blauw: var(--jd-blauw); --fr-blauwh: var(--jd-blauw-h); --fr-geel: var(--jd-geel); --fr-groen: var(--jd-blauw); --fr-terra: var(--jd-rood); --fr-rood: var(--jd-rood); --fr-amber: var(--jd-geel); --fr-note: #FFFDF6; --fr-ph: #EFE9DA; --fr-tint: rgba(30, 76, 143, 0.08); --fr-knoptekst: var(--jd-on-accent); --fr-voet: var(--jd-footer); --fr-voet-tekst: var(--jd-footer-ink); --fr-voet-stil: var(--jd-footer-muted); --fr-voet-lijn: rgba(233, 237, 230, 0.14); --fr-badge-t: #3A2B08; --fr-rand3: #D8D0BC; --fr-groen-t: var(--jd-groen-t); --fr-open-stip: var(--jd-groen); --fr-voet-accent: var(--jd-geel); --fr-rand2: var(--fr-rand); --fr-lijn: var(--fr-rand); --fr-dubbel: var(--fr-tekst); --fr-kop: var(--fr-tekst); --fr-tekst2: var(--fr-stil); --fr-tekst3: var(--fr-stil); --fr-stil2: var(--fr-stil); --fr-messing: var(--jd-geel); --fr-messingdonker: var(--jd-geel-t); --fr-kicker: var(--fr-stil); --fr-badge-b: var(--jd-golf); --fr-link: var(--jd-blauw); --fr-knop: var(--jd-blauw); --fr-knophover: var(--fr-blauwh); --fr-actie: var(--jd-blauw); --fr-actiehover: var(--fr-blauwh); --fr-actietekst: var(--fr-knoptekst); --fr-nacht: var(--fr-voet); --fr-open-t: var(--fr-groen-t); --fr-open-b: color-mix(in srgb, var(--jd-blauw) 16%, transparent); --fr-open-r: color-mix(in srgb, var(--jd-blauw) 16%, transparent); --fr-dicht-t: var(--fr-rood); --fr-dicht-b: color-mix(in srgb, var(--fr-rood) 14%, transparent); --fr-dicht-r: color-mix(in srgb, var(--fr-rood) 14%, transparent); --fr-op-tint: var(--fr-messingdonker); --fr-cat-winkel: var(--fr-messingdonker); --fr-cat-horeca: var(--jd-rood); --fr-cat-zorg: var(--fr-groen-t); --fr-cat-sport: var(--jd-blauw); --fr-cat-dienst: #A33A2E; --fr-cat-verblijf: var(--jd-geel-t); --fr-tint-winkel: color-mix(in srgb, var(--jd-golf) 14%, transparent); --fr-tint-horeca: color-mix(in srgb, var(--jd-rood) 12%, transparent); --fr-tint-zorg: color-mix(in srgb, var(--jd-blauw) 12%, transparent); --fr-tint-sport: var(--fr-tint); --fr-tint-dienst: color-mix(in srgb, var(--jd-rood) 8%, transparent); --fr-tint-verblijf: color-mix(in srgb, var(--jd-blauw) 8%, transparent); --fr-sd-t: var(--fr-messingdonker); --fr-mm-t: var(--fr-groen-t); --fr-ko-t: #A33A2E; --fr-ww: var(--jd-blauw); --fr-radius: var(--jd-r-l); --fr-vlak: var(--fr-kaart); --fr-papier: var(--fr-kaart); --fr-serif: var(--jd-serif); --fr-sans: var(--jd-sans); --fr-mono: var(--jd-mono); --fr-rail-links: 18rem; --fr-rail-rechts: 20rem; --fr-gap: 0px; --fr-max: 100%; --fr-hoek: var(--jd-r-l); --fr-hoek-knop: var(--jd-r); --fr-hoek-klein: var(--jd-r-s); color-scheme: light; } html[data-thema="donker"], html[data-thema="auto"][data-auto-stand="nacht"] { --jd-bg: #0F1626; --jd-surface: #182238; --jd-ink: #E9EDF6; --jd-blauw: #8FB4E8; --jd-blauw-h: #AECBF2; --jd-golf: #22395F; --jd-muted: #9CA8C0; --jd-line: #2B3A57; --jd-footer: #0A1220; --jd-on-accent: #0E1524; --jd-footer-ink: #D6E2F2; --jd-footer-muted: #9FB6D4; --jd-roze: #F08BB5; --jd-rood: #E8857A; --jd-geel: #E2B45C; --jd-geel-t: #E5C071; --jd-groen: #84B183; --jd-groen-t: #A3CBA0; --jd-oranje: #E39A66; --jd-geel-zacht: #E3AE4F; --jd-rood-op-donker: #E8857A; --fr-note: #20293E; --fr-ph: #1E2739; --fr-tint: rgba(143, 180, 232, 0.12); --fr-rand3: #3A4A6A; --fr-badge-t: #0E1524; --fr-cat-dienst: #E39A66; --fr-cat-verblijf: var(--jd-geel-t); --fr-sd-t: var(--jd-geel-t); --fr-mm-t: var(--jd-groen-t); --fr-ko-t: #E39A66; color-scheme: dark; } @media (prefers-color-scheme: dark) { html[data-thema="auto"]:not([data-auto-stand]) { --jd-bg: #0F1626; --jd-surface: #182238; --jd-ink: #E9EDF6; --jd-blauw: #8FB4E8; --jd-blauw-h: #AECBF2; --jd-golf: #22395F; --jd-muted: #9CA8C0; --jd-line: #2B3A57; --jd-footer: #0A1220; --jd-on-accent: #0E1524; --jd-footer-ink: #D6E2F2; --jd-footer-muted: #9FB6D4; --jd-roze: #F08BB5; --jd-rood: #E8857A; --jd-geel: #E2B45C; --jd-geel-t: #E5C071; --jd-groen: #84B183; --jd-groen-t: #A3CBA0; --jd-oranje: #E39A66; --jd-geel-zacht: #E3AE4F; --jd-rood-op-donker: #E8857A; --fr-note: #20293E; --fr-ph: #1E2739; --fr-tint: rgba(143, 180, 232, 0.12); --fr-rand3: #3A4A6A; --fr-badge-t: #0E1524; --fr-cat-dienst: #E39A66; --fr-cat-verblijf: var(--jd-geel-t); --fr-sd-t: var(--jd-geel-t); --fr-mm-t: var(--jd-groen-t); --fr-ko-t: #E39A66; color-scheme: dark; } } @media (max-width: 719px) { body.site-theme-julianadorp .fr-header .fr-merk { flex: 1 1 auto; gap: 8px; min-height: 44px; } body.site-theme-julianadorp .fr-header .fr-merk-naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fr-merkteken { width: 30px; height: 30px; } html { scroll-padding-top: calc(64px + env(safe-area-inset-top, 0px)); } html[data-schaal="klein"] { scroll-padding-top: calc(60px + env(safe-area-inset-top, 0px)); } html[data-schaal="groot"] { scroll-padding-top: calc(74px + env(safe-area-inset-top, 0px)); } } .fr-header::after { content: ""; display: block; height: 6px; background: var(--jd-streep); } .fr-medaille { position: relative; flex: none; width: 150px; height: 150px; border-radius: 999px; border: 1px solid var(--fr-rand); background: var(--fr-kaart); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: border-color 0.15s ease; color: var(--fr-tekst); } .fr-medaille:hover { border-color: var(--jd-em); } .fr-medaille > svg { position: absolute; inset: 0; margin: auto; } .fr-medaille-ring { stroke: var(--fr-rand); fill: none; } .fr-medaille-golf { stroke: var(--jd-golf); opacity: 0.9; } .fr-medaille-golf.is-diep { stroke: var(--fr-blauw); opacity: 0.5; } .fr-medaille-bol { transition: transform 0.35s ease; } .fr-medaille:hover .fr-medaille-bol { transform: translateY(-2px); } .fr-medaille-zeil { fill: var(--fr-blauw); opacity: 0.55; stroke: none; } .fr-medaille-tekst { position: relative; display: flex; flex-direction: column; align-items: center; background: var(--fr-kaart); border-radius: 999px; padding: 0.7rem 1.1rem; } .fr-medaille-jaar { font: 700 1.5rem/1 var(--fr-serif); color: var(--fr-tekst); } .fr-medaille-sub { font: 400 0.5625rem/1.4 var(--fr-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fr-stil); margin-top: 0.25rem; } @media (prefers-reduced-motion: reduce) { .fr-medaille:hover .fr-medaille-bol { transform: none; } } .fr-modal-schijf .fr-medaille-ring { stroke: rgba(214, 226, 242, 0.3); fill: none; } .fr-modal-schijf .fr-medaille-golf { stroke: rgba(214, 226, 242, 0.4); } .fr-modal-schijf .fr-medaille-golf.is-diep { stroke: rgba(214, 226, 242, 0.22); } @media (max-width: 1024px) { html[data-kh-home-uit~="weer"] .fr-medaille { display: none; } } .jd-gemeente { display: flex; flex-direction: column; gap: 0.6rem; } .jd-gemeente-regel { margin: 0; padding-left: 0.8rem; border-left: 3px solid var(--fr-geel); font: 400 0.9rem/1.55 var(--fr-sans); color: var(--fr-stil); } .jd-gemeente-regel strong { color: var(--fr-tekst); font-weight: 700; } .jd-gemeente-melding { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 1rem; border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek-knop); background: var(--fr-kaart); } .jd-gemeente-teken { flex: none; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--fr-hoek-knop); background: color-mix(in srgb, var(--fr-geel) 22%, transparent); color: var(--fr-messingdonker); font-size: 0.9rem; } .jd-gemeente-melding-kop { display: block; font: 700 0.9rem/1.4 var(--fr-sans); color: var(--fr-tekst); } .jd-gemeente-melding-tekst { display: block; font: 400 0.8125rem/1.5 var(--fr-sans); color: var(--fr-stil); } .fr-dorpsgezicht { margin-top: 0; } .fr-scene-kader { margin-top: 0.4rem; border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek); background: var(--fr-kaart); overflow: hidden; box-shadow: 0 26px 44px -22px rgba(18, 41, 79, 0.28); } .fr-scene { position: relative; background: linear-gradient(180deg, #C9DFF0 0%, #EAF2F7 34%, #93B5DB 34.5%, #6E96C6 52%, #EBDCBD 52.5%, #E3D3B0 62%, #CFD9B4 62.5%, #A9C08C 100%); } html[data-thema="donker"] .fr-scene, html[data-thema="auto"][data-auto-stand="nacht"] .fr-scene { background: linear-gradient(180deg, #0E1A2E 0%, #16263F 34%, #1B3454 34.5%, #16283F 52%, #2A2E33 52.5%, #262A2F 62%, #222B26 62.5%, #1A2320 100%); } @media (prefers-color-scheme: dark) { html[data-thema="auto"]:not([data-auto-stand]) .fr-scene { background: linear-gradient(180deg, #0E1A2E 0%, #16263F 34%, #1B3454 34.5%, #16283F 52%, #2A2E33 52.5%, #262A2F 62%, #222B26 62.5%, #1A2320 100%); } } .fr-scene-doek { display: block; width: 100%; height: auto; aspect-ratio: 1268 / 450; } @media (hover: hover) { .fr-scene-doek { cursor: pointer; } .fr-scene-kader.is-groot .fr-scene-doek { cursor: pointer; } } .fr-scene-voet { border-top: 1px solid var(--fr-rand); padding: 0.7rem 1.1rem 0.75rem; } .fr-scene-voet .fr-tijdreis { margin-top: 0.5rem; } .fr-scene-voet .fr-tijdreis-tekst { margin-top: 0; max-width: 52rem; } .fr-scene-voet .fr-scene-onderschrift { margin-top: 0.5rem; } .fr-scene-bediening { position: absolute; top: 0.7rem; right: 0.7rem; display: flex; gap: 0.4rem; z-index: 2; } .fr-scene-knop.fr-scene-demo { display: none; } .fr-scene-knop { display: inline-flex; position: relative; align-items: center; gap: 0.4rem; border: 1px solid var(--fr-rand); background: var(--fr-kaart); color: var(--fr-tekst); font: 700 0.8125rem/1 var(--fr-sans); padding: 0.45rem 0.7rem; border-radius: 999px; cursor: pointer; box-shadow: 0 2px 8px rgba(18, 41, 79, 0.18); transition: background 0.15s ease, opacity 0.15s ease; } .fr-scene-knop:hover { background: var(--fr-tint); } .fr-scene-knop i { font-size: 0.95rem; line-height: 1; } .fr-scene-kantel { display: none; } @media (hover: hover) { .fr-scene-bediening { pointer-events: none; } .fr-scene-knop { opacity: 0; } .fr-scene-knop:focus-visible { opacity: 1; pointer-events: auto; } } @media (hover: none) { .fr-scene-bediening { pointer-events: auto; } .fr-scene-knop { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .fr-demo-wissel > canvas, .fr-demo-wissel > svg, .fr-demo-wissel.fr-scene-doek { transition: opacity 0.35s ease; } .fr-demo-wissel.is-wisselen > canvas, .fr-demo-wissel.is-wisselen > svg, .fr-demo-wissel.fr-scene-doek.is-wisselen { opacity: 0.25; } } .fr-demo-streep { position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.28rem; height: 3px; border-radius: 999px; background: color-mix(in srgb, currentColor 22%, transparent); overflow: hidden; } .fr-demo-streep > span { display: block; height: 100%; width: 0; border-radius: inherit; background: currentColor; transform-origin: left center; } @media (prefers-reduced-motion: no-preference) { .fr-demo-streep > span { transition: width 0.2s linear; } } .fr-vensterkop { display: none; } @media (min-width: 901px) { .fr-scene-kader.is-groot .fr-vensterkop { display: flex; align-items: center; flex: 0 0 auto; margin-top: auto; margin-bottom: 0.9rem; padding-right: 12rem; } .fr-scene-kader.is-groot .fr-merk-venster { color: #FFFFFF; } .fr-scene-kader.is-groot .fr-merk-venster .fr-merk-naam { color: #FFFFFF; } .fr-scene-kader.is-groot .fr-merk-venster .fr-merk-sub { color: rgba(255, 255, 255, 0.72); } .fr-scene-kader.is-groot .fr-merk-venster:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 3px; border-radius: 6px; } } .fr-venstervoet { display: none; } .fr-scene-kader.is-groot .fr-venstervoet { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; margin-top: 1rem; text-align: left; } .fr-venstervoet-merk { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; border-radius: 999px; } .fr-venstervoet-credit { font: 400 1rem/1.5 var(--fr-sans); color: rgba(255, 255, 255, 0.72); } .fr-venstervoet-credit strong { color: #FFFFFF; font-weight: 600; } .fr-venstervoet-merk:hover .fr-venstervoet-credit, .fr-venstervoet-merk:focus-visible .fr-venstervoet-credit { color: #FFFFFF; } .fr-venstervoet-merk:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 3px; } .fr-venstervoet-logo { width: 42px; height: 42px; flex: 0 0 auto; object-fit: contain; padding: 3px; border-radius: 50%; background: var(--jd-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); } .fr-venstervoet-knoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; } .fr-venstervoet-knop { border: 1px solid rgba(255, 255, 255, 0.45); background: transparent; color: #FFFFFF; font: 700 0.85rem/1.4 var(--fr-sans); padding: 0.45rem 0.9rem; border-radius: var(--fr-hoek-knop); cursor: pointer; transition: background 0.15s ease; } .fr-venstervoet-knop:hover { background: rgba(255, 255, 255, 0.14); } .fr-venstervoet-weetjes { display: none; } @media (max-width: 1024px) { .fr-scene-kader.is-groot .fr-venstervoet-weetjes { display: inline-block; } } @media (max-height: 520px) { .fr-scene-kader.is-groot .fr-venstervoet { margin-top: 0.6rem; justify-content: flex-end; } .fr-scene-kader.is-groot .fr-venstervoet-merk { display: none; } } .fr-scene-kader.is-groot { position: fixed; inset: 0; z-index: 92; margin: 0; display: flex; flex-direction: column; justify-content: flex-start; border: none; border-radius: 0; box-shadow: none; background: rgba(9, 15, 28, 0.92); padding: clamp(1rem, 4vw, 3rem); overflow: auto; } .fr-scene-kader.is-groot .fr-scene-doek { aspect-ratio: 1268 / 506; } @media (max-width: 900px) and (orientation: portrait) { .fr-scene-kader.is-groot .fr-scene-doek { aspect-ratio: 1 / 1; } } @media (max-width: 900px) and (orientation: landscape) { .fr-scene-kader.is-groot .fr-scene-doek { aspect-ratio: 12 / 5; } } .fr-scene-kader.is-groot .fr-scene { width: min(100%, calc((100svh - 9.5rem) * 1268 / 506)); margin-inline: auto; border-radius: 12px; overflow: hidden; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55); } .fr-scene-kader.is-groot .fr-scene:last-child { margin-block-end: auto; } .fr-scene-kader.is-groot .fr-scene-voet { border-top: none; padding: 0.9rem 0 0; margin-top: 0; margin-bottom: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.25rem; text-align: left; } .fr-scene-kader.is-groot .fr-tijdreis { justify-content: flex-end; margin-top: 0; flex: 0 1 auto; } .fr-scene-kader.is-groot .fr-tijdreis-tekst { display: block; flex: 1 1 18rem; margin: 0; max-width: 46rem; color: rgba(255, 255, 255, 0.82); } .fr-scene-kader.is-groot .fr-tijdreis-tekst strong, .fr-scene-kader.is-groot .fr-tijdreis-kop { color: #FFFFFF; } .fr-scene-kader.is-groot .fr-scene-onderschrift { display: none; } .fr-scene-kader.is-groot .fr-tijdknop { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.08); color: #FFFFFF; } .fr-scene-kader.is-groot .fr-tijdknop:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.7); } .fr-scene-kader.is-groot .fr-tijdknop.is-aan, .fr-scene-kader.is-groot .fr-tijdknop[aria-pressed="true"] { background: var(--fr-blauw); border-color: var(--fr-blauw); color: var(--fr-knoptekst); } .fr-scene-kader.is-groot .fr-tijdknop .fr-tijdknop-jaar { color: rgba(255, 255, 255, 0.75); } .fr-scene-kader.is-groot .fr-tijdknop[aria-pressed="true"] .fr-tijdknop-jaar { color: var(--fr-knoptekst); opacity: 0.85; } .fr-scene-kader.is-groot .fr-scene-bediening { position: fixed; top: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-top, 0px)); right: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-right, 0px)); pointer-events: auto; } .fr-scene-kader.is-groot .fr-scene-knop { opacity: 1; pointer-events: auto; } @media (min-width: 901px) { .fr-scene-kader.is-groot .fr-scene-demo { display: inline-flex; } .fr-scene-kader.is-groot .fr-scene-demo[hidden] { display: none; } } .fr-scene-kader.is-groot .fr-scene-demo[aria-pressed="true"] { background: var(--fr-blauw); border-color: var(--fr-blauw); color: var(--fr-knoptekst); } @media (max-height: 520px) { .fr-scene-kader.is-groot .fr-scene-voet { padding-top: 0.6rem; } .fr-scene-kader.is-groot .fr-tijdreis-tekst { display: none; } .fr-scene-kader.is-groot .fr-vensterkop { display: none; } .fr-scene-kader.is-groot .fr-tijdreis { justify-content: center; flex: 1 1 auto; } .fr-scene-kader.is-groot .fr-tijdreis { gap: 0.3rem; margin-top: 0; } .fr-scene-kader.is-groot .fr-tijdknop { padding: 0.3rem 0.6rem; font-size: 0.7rem; min-height: 32px; } .fr-scene-kader.is-groot .fr-tijdknop > span:not(.fr-tijdknop-jaar) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } @media (max-width: 900px) { .fr-scene-kader.is-groot .fr-scene-kantel { display: inline-flex; } } body.jd-scene-vast { overflow: hidden; } .fr-tijdreis { display: flex; gap: 0.45rem; margin-top: 0.85rem; flex-wrap: wrap; } .fr-tijdknop { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.45rem 0.85rem; border: 1px solid var(--fr-rand); border-radius: 999px; background: var(--fr-kaart); color: var(--fr-tekst); font: 700 0.8125rem/1.3 var(--fr-sans); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .fr-tijdknop:hover { border-color: var(--fr-blauw); } .fr-tijdknop.is-aan, .fr-tijdknop[aria-pressed="true"] { border-color: var(--jd-em); background: var(--fr-tint); color: var(--fr-blauw); } .fr-tijdknop-jaar { font: 700 0.6875rem/1 var(--fr-mono); letter-spacing: 0.06em; text-transform: uppercase; } .fr-tijdreis-tekst { margin: 0.55rem 0 0; font: 400 0.875rem/1.55 var(--fr-sans); color: var(--fr-stil); max-width: 46rem; } .fr-tijdreis-tekst strong { color: var(--fr-tekst); } .fr-tijdreis-tekst strong::after { content: " · "; font-weight: 400; color: var(--fr-stil); } @media (prefers-reduced-motion: reduce) { .fr-scene-doek { transition: none; } } @media (max-width: 719px) { .fr-scene-knop { padding: 0.4rem 0.6rem; font-size: 0.75rem; } .fr-scene-voet { padding: 0.6rem 0.9rem 0.7rem; } .fr-tijdreis { gap: 0.35rem; } .fr-tijdknop { padding: 0.42rem 0.6rem; font-size: 0.75rem; gap: 0.3rem; min-height: 36px; } .fr-tijdknop-jaar { font-size: 0.625rem; } .fr-tijdreis-tekst { font-size: 0.8125rem; } } .fr-scene-kader.is-groot .jd-nu { top: 1rem; left: 1rem; } @media (max-width: 900px) { .fr-scene-kader.is-groot .jd-nu { top: 3.4rem; } } .wxk-zon { fill: var(--jd-geel-zacht); stroke: #C98A2E; stroke-width: 1; } .wxk-straal { fill: none; stroke: var(--jd-geel); stroke-width: 1.8; stroke-linecap: round; } .wxk-maan { fill: #F5E9C8; stroke: var(--jd-geel); stroke-width: 1.3; stroke-linejoin: round; } .wxk-wolk { fill: color-mix(in srgb, var(--jd-golf) 18%, #fff); stroke: var(--jd-blauw); stroke-width: 1.3; stroke-linejoin: round; } .wxk-wolk-achter { fill: color-mix(in srgb, var(--jd-golf) 45%, #fff); stroke: var(--jd-blauw); stroke-width: 1.1; stroke-linejoin: round; } .wxk-wolk.wxk-wolk-donker { fill: color-mix(in srgb, var(--jd-golf) 70%, #fff); } .wxk-druppel { fill: none; stroke: #3F86BA; stroke-width: 1.8; stroke-linecap: round; } .wxk-vlok { fill: #fff; stroke: var(--jd-blauw); stroke-width: 0.9; } .wxk-flits { fill: var(--jd-geel); stroke: #B97A22; stroke-width: 0.8; stroke-linejoin: round; } .wxk-mist { fill: none; stroke: var(--jd-muted); stroke-width: 1.8; stroke-linecap: round; } .kh-tint-water { color: var(--jd-blauw); background: color-mix(in srgb, var(--jd-golf) 24%, transparent); } .kh-stip-politie { background: var(--jd-blauw); } .kh-kaart-tekst.is-open { color: var(--fr-open-t); } .fr-body { --portal-open-dot: var(--fr-open-stip); } .fr-briefje-cat[data-cat="te-koop"], .fr-briefje-cat[data-cat="aangeboden"] { background: color-mix(in srgb, var(--fr-open-stip) 16%, transparent); } .fr-dorpsgezicht + .kh-knmi { margin-top: -1.5rem; } @media (max-width: 719px) { .fr-dorpsgezicht { margin-inline: -1.25rem; margin-top: -1.6rem; } .fr-scene-kader:not(.is-groot) { margin-top: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; } .fr-scene-kader:not(.is-groot) .fr-scene-doek { aspect-ratio: 1268 / 540; } .fr-scene-kader:not(.is-groot) .fr-scene-voet { display: none; } .fr-venstervoet-knoppen { justify-content: center; } .fr-dorpsgezicht + .kh-open { margin-top: calc(-2.5rem - 1.4rem); } } .fr-golflijn { display: block; width: 100%; height: 2.75rem; margin-bottom: -1px; } .fr-golf-licht { fill: var(--jd-golf); opacity: 0.5; } .fr-golf-diep { fill: var(--fr-voet); } html body.site-theme-julianadorp .kh-voet-merk .fr-merkteken { width: 38px; height: 38px; } html body.site-theme-julianadorp .kh-voet-merk .fr-merkteken path { stroke: currentColor; } html body.site-theme-julianadorp .kh-voet-merk .fr-merkteken path[fill="var(--jd-geel)"] { fill: var(--jd-geel); } html body.site-theme-julianadorp .kh-voet-merk .fr-merk-naam { font: 700 1.4rem/1 var(--jd-serif); color: #fff; } html body.site-theme-julianadorp .kh-voet-merk .fr-merk-staart { color: var(--jd-geel-zacht); } html body.site-theme-julianadorp .kh-voet-merk:hover .fr-merk-naam { text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 1024px) { html[data-kh-home-uit~="weer"] .fr-dorpsgezicht + .kh-knmi { margin-top: 0; } } @media (max-width: 719px) { html[data-kh-home-uit~="weer"] .fr-dorpsgezicht + .kh-open { margin-top: 0; } }
body:not(.site-theme-julianadorp) *:not(:focus):not(:focus-visible), body:not(.site-theme-julianadorp) *::before, body:not(.site-theme-julianadorp) *::after { box-shadow: none !important; } .site-footer-builder-v14516{ width:100%; padding:0; border-top:var(--footer-border-top-width,1px) solid var(--footer-border-top-color,var(--footer-border)); background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.08)),var(--footer-bg); color:var(--footer-text); box-shadow:0 -18px 42px rgba(5,13,28,.14); } .site-footer-builder-v14516 .site-footer-inner-v10{ width:100%; max-width:none; padding:0 clamp(18px,3vw,42px) 18px; } .site-footer-columns-v20{ display:grid; grid-template-columns:var(--footer-cols,1fr); align-items:start; gap:clamp(24px,3vw,56px); padding:26px 0 20px; border-bottom:1px solid var(--footer-border); } .site-footer-col-v20{ min-width:0; display:flex; flex-direction:column; gap:10px; } .site-footer-col-about-v20 .site-footer-logo-v14516{margin-bottom:2px} .site-footer-brand-row-v20{display:flex;align-items:center;gap:14px} .site-footer-brand-row-v20 .site-footer-logo-v14516{flex:0 0 auto;margin-bottom:0} .site-footer-brand-row-v20 h2{margin:0} .site-footer-logo-v14516{ width:var(--footer-logo-size,58px); height:var(--footer-logo-size,58px); display:grid; place-items:center; padding:0; overflow:hidden; border:1px solid var(--footer-logo-frame-color,var(--footer-border)); border-radius:14px; background:rgba(255,255,255,.08); box-shadow:none; } .site-footer-logo-noframe{border:0!important;background:transparent!important} .site-footer-logo-noframe::before,.site-footer-logo-noframe::after{display:none!important} .site-footer-logo-v14516 strong{color:var(--footer-link);font-size:1.9rem;font-weight:950;line-height:1} .site-footer-logo-v14516 img{width:100%;height:100%;object-fit:contain;transform-origin:center;will-change:transform} .site-footer-builder-v14516 h2{margin:0 0 8px;color:var(--footer-text);font-size:.96rem;font-weight:850} .site-footer-builder-v14516 p{margin:0;color:color-mix(in srgb,var(--footer-text) 78%,transparent);line-height:1.62} .site-footer-col-about-v20 p,.site-footer-col-newsletter-v20 p{max-width:35ch} .site-footer-legal-items-v20{columns:19ch 2;column-gap:28px;font-size:.9rem} .site-footer-legal-items-v20 a,.site-footer-legal-items-v20 span{display:block;break-inside:avoid;margin-bottom:8px} .site-footer-legal-v1030 a,.site-footer-legal-v1030 span,.site-footer-bottom-v14516 a{color:var(--footer-link);text-decoration:none;font-weight:760} .site-footer-legal-v1030 a:hover,.site-footer-bottom-v14516 a:hover{color:var(--footer-link-hover);text-decoration:underline} .site-footer-bottom-v14516{ display:flex!important; flex-wrap:wrap; align-items:center; justify-content:space-between!important; gap:6px 18px; margin:16px 0 0!important; padding-top:0!important; border-top:0!important; color:color-mix(in srgb,var(--footer-text) 72%,transparent); font-size:.88rem; } .site-footer-bottom-v14516 p{flex:0 1 auto;margin:0} .footer-heart{color:var(--footer-heart,#e5342f)!important;font-size:1.08em;font-weight:950} .site-footer-newsletter-v20{display:flex;flex-direction:column;gap:8px} .site-footer-newsletter-v20 strong{color:var(--footer-text);font-size:.96rem;font-weight:850} .site-footer-newsletter-row-v20{display:flex;gap:8px;max-width:360px} .site-footer-newsletter-row-v20 input{flex:1 1 auto;min-width:0;min-height:44px;border-radius:12px} .site-footer-newsletter-row-v20 button{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 16px; white-space:nowrap; background:#2563eb; color:#fff; border:1px solid #2563eb; border-radius:12px; min-height:44px; font-weight:800; } .site-footer-newsletter-row-v20 button:hover{background:#1e40af;border-color:#1e40af} .site-footer-social-v20{display:flex;flex-wrap:wrap;gap:10px} .site-footer-social-v20 a{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; border:1px solid color-mix(in srgb,var(--footer-border) 80%,white 20%); background:rgba(255,255,255,.08); color:var(--brand,var(--footer-link)); font-size:1.15rem; text-decoration:none; transition:background .28s ease,border-color .28s ease,color .28s ease,transform .28s ease,box-shadow .28s ease; } .site-footer-social-v20 a:hover,.site-footer-social-v20 a:focus-visible{ color:#fff; border-color:var(--brand,#2563eb); background:var(--brand-bg,var(--brand,#2563eb)); transform:translateY(-3px); box-shadow:0 10px 22px var(--brand-glow,rgba(37,99,235,.45)); } .site-footer-social-facebook{--brand:#1877f2;--brand-glow:rgba(24,119,242,.45)} .site-footer-social-instagram{--brand:#dc2743;--brand-bg:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);--brand-glow:rgba(220,39,67,.45)} .site-footer-social-youtube{--brand:#ff0000;--brand-glow:rgba(255,0,0,.4)} .site-footer-social-whatsapp{--brand:#25d366;--brand-glow:rgba(37,211,102,.45)} .site-footer-builder-v14516 .site-footer-social-v20 a{color:var(--brand,var(--footer-link))!important} .site-footer-builder-v14516 .site-footer-social-v20 a:hover,.site-footer-builder-v14516 .site-footer-social-v20 a:focus-visible{color:#fff!important} @media(prefers-reduced-motion:reduce){.site-footer-social-v20 a{transition:none}.site-footer-social-v20 a:hover,.site-footer-social-v20 a:focus-visible{transform:none}} .site-footer-contact-v20{display:flex;flex-direction:column;gap:6px;margin-top:4px} .site-footer-contact-v20 a{display:inline-flex;align-items:center;gap:8px;min-height:32px;color:var(--footer-link);text-decoration:none;font-weight:700;font-size:.9rem} .site-footer-contact-v20 a:hover{color:var(--footer-link-hover)} .site-footer-connect-label-v20{display:block;font-size:.75rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--footer-link);margin-bottom:2px;opacity:.9} .site-footer-builder-v14516 .footer-align-left{text-align:left} .site-footer-builder-v14516 .footer-align-center{text-align:center} .site-footer-builder-v14516 .footer-align-right{text-align:right} @media(min-width:701px) and (max-width:1279.98px){ .site-footer-columns-v20.site-footer-columns-4-v20{grid-template-columns:repeat(2,minmax(0,1fr))} .site-footer-columns-4-v20 .site-footer-legal-items-v20{columns:1} } @media(max-width:700px){ .site-footer-columns-v20{display:flex;flex-direction:column;gap:22px;padding:20px 0 16px} .site-footer-col-v20{width:100%} .site-footer-col-about-v20 p,.site-footer-col-newsletter-v20 p{max-width:none} .site-footer-newsletter-row-v20{flex-direction:column;max-width:none} .site-footer-newsletter-row-v20 input,.site-footer-newsletter-row-v20 button{width:100%} .site-footer-legal-items-v20{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px} .site-footer-legal-items-v20 a,.site-footer-legal-items-v20 span{ display:inline-flex; align-items:center; min-height:44px; margin-bottom:0; padding:0 15px; border-radius:999px; border:1px solid color-mix(in srgb,var(--footer-border) 82%,white 18%); background:rgba(255,255,255,.06); } .site-footer-contact-v20 a{min-height:44px} .site-footer-bottom-v14516{flex-direction:column;align-items:flex-start;justify-content:flex-start!important;gap:4px;text-align:left;font-size:.82rem} .site-footer-bottom-v14516 p{width:100%} .site-footer-builder-v14516 .footer-align-right{text-align:left} }
[hidden] { display: none !important; } main[tabindex="-1"]:focus { outline: none; } .portal-zoek__label { display: block; margin-bottom: .45rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--portal-muted, #6b7280); } .portal-zoek__verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .portal-zoek__rij { display: flex; align-items: stretch; border: 1px solid var(--portal-border, #d5d8de); border-radius: 8px; background: var(--portal-surface, #fff); overflow: hidden; } .portal-zoek__rij:focus-within { border-color: var(--portal-primary, #14213d); box-shadow: 0 0 0 3px color-mix(in srgb, var(--portal-primary, #14213d) 18%, transparent); } .portal-zoek__veld, .portal-zoek__plaats { min-width: 0; padding: .6rem .7rem; border: 0; background: transparent; color: var(--portal-text, #1f2430); font: inherit; font-size: .95rem; } .portal-zoek__veld { flex: 1 1 auto; } .portal-zoek__veld:focus, .portal-zoek__plaats:focus { outline: none; } .portal-zoek__plaats { flex: 0 0 auto; max-width: 42%; border-left: 1px solid var(--portal-border, #d5d8de); color: var(--portal-muted, #6b7280); cursor: pointer; } .portal-zoek__knop { flex: 0 0 auto; padding: 0 .85rem; border: 0; background: var(--portal-primary, #14213d); color: #fff; cursor: pointer; font-size: 1rem; } .portal-zoek__knop:hover { filter: brightness(1.12); } .portal-zoek__uitleg { margin: .45rem 0 0; color: var(--portal-muted, #6b7280); font-size: .8rem; line-height: 1.5; } .portal-zoek--pagina { margin: 0 0 1.4rem; } .portal-zoek--pagina .portal-zoek__veld { font-size: 1.05rem; padding: .75rem .85rem; } .portal-zoek-telling, .portal-zoek-melding { margin: 0 0 1rem; color: var(--portal-muted, #6b7280); font-size: .95rem; } .portal-zoek-treffers { display: flex; flex-direction: column; gap: 10px; } .portal-zoek-treffer { display: grid; gap: .3rem; padding: 14px 16px; border: 1px solid var(--portal-border, #d5d8de); border-radius: 8px; background: var(--portal-surface, #fff); text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .portal-zoek-treffer:hover { border-color: var(--portal-primary, #14213d); transform: translateY(-1px); } .portal-zoek-treffer__kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; } .portal-zoek-treffer__titel { color: var(--portal-heading, var(--portal-text, #1f2430)); font-weight: 600; font-size: 1.02rem; } .portal-zoek-treffer__soort { padding: .1rem .45rem; border-radius: 999px; background: var(--portal-primary-soft, rgba(0, 0, 0, .06)); color: var(--portal-primary, #14213d); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .portal-zoek-treffer__tekst { color: var(--portal-text, #1f2430); font-size: .92rem; line-height: 1.6; } .portal-zoek-treffer__plaats { color: var(--portal-muted, #6b7280); font-size: .8rem; } .portal-zoek { container: portal-zoek / inline-size; } .portal-zoek.portal-search-v20 { container-type: normal; } @container portal-zoek (max-width: 460px) { .portal-zoek__rij { flex-wrap: wrap; } .portal-zoek__veld { flex: 1 1 100%; } .portal-zoek__plaats { flex: 1 1 0; max-width: none; border-left: 0; border-top: 1px solid var(--portal-border, #d5d8de); } .portal-zoek__knop { border-top: 1px solid var(--portal-border, #d5d8de); } } @media (prefers-reduced-motion: reduce) { .portal-zoek-treffer { transition: none; } .portal-zoek-treffer:hover { transform: none; } } .fr-over-blok { margin: 2.4rem 0 0; } .fr-over-kop { margin: 0 0 .5rem; font-family: var(--portal-font-serif, var(--portal-font-sans)); font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 600; color: var(--portal-heading, var(--portal-text)); } .fr-over-lead { margin: 0 0 1.1rem; color: var(--portal-muted); font-size: .96rem; line-height: 1.6; } .fr-over-cijferrij { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .fr-over-cijfer { display: flex; flex-direction: column; gap: .2rem; padding: 16px 18px; border: 1px solid var(--portal-border); border-radius: 10px; background: var(--portal-surface, #fff); text-decoration: none; } a.fr-over-cijfer:hover { border-color: var(--portal-primary); } .fr-over-cijfer-getal { font-family: var(--portal-font-serif, var(--portal-font-sans)); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--portal-primary); } .fr-over-cijfer-label { color: var(--portal-muted); font-size: .86rem; line-height: 1.45; } .fr-over-waarden { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .fr-over-waarde, .fr-over-verhaal-kaart { padding: 18px; border: 1px solid var(--portal-border); border-radius: 10px; background: var(--portal-surface, #fff); } .fr-over-waarde h3 { margin: 0 0 .4rem; font-size: 1.02rem; font-weight: 600; color: var(--portal-heading, var(--portal-text)); } .fr-over-waarde p { margin: 0; color: var(--portal-text); font-size: .93rem; line-height: 1.65; } .fr-over-verhaal-kaart { display: flex; gap: 16px; align-items: flex-start; } .fr-over-verhaal-logo { flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain; padding: 4px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); } .fr-over-verhaal-tekst { min-width: 0; } .fr-over-verhaal-tekst p { margin: 0 0 .7rem; color: var(--portal-text); font-size: .98rem; line-height: 1.7; } .fr-over-verhaal-tekst .fr-over-verhaal-naam { margin: 0; font-family: var(--portal-font-serif, var(--portal-font-sans)); font-style: italic; font-weight: 600; color: var(--portal-heading, var(--portal-text)); } @media (max-width: 540px) { .fr-over-verhaal-kaart { flex-direction: column; gap: 12px; } } .fr-over-stappen { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .fr-over-stappen li { display: flex; gap: .9rem; align-items: flex-start; } .fr-over-stapnr { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--portal-primary); color: #fff; font-weight: 700; font-size: .9rem; } .fr-over-staptekst { display: flex; flex-direction: column; gap: .15rem; } .fr-over-staptekst strong { color: var(--portal-heading, var(--portal-text)); font-size: 1rem; } .fr-over-staptekst span { color: var(--portal-text); font-size: .93rem; line-height: 1.6; } .fr-contact-routelink { margin: .7rem 0 0; } .fr-contact-routelink a { color: var(--portal-primary); font-size: .9rem; font-weight: 600; text-decoration: none; } .fr-contact-routelink a:hover { text-decoration: underline; } .fr-contact-faq { display: grid; gap: 8px; } .fr-contact-vraag { border: 1px solid var(--portal-border); border-radius: 10px; background: var(--portal-surface, #fff); } .fr-contact-vraag > summary { padding: 14px 16px; color: var(--portal-heading, var(--portal-text)); font-weight: 600; font-size: .96rem; cursor: pointer; list-style: none; } .fr-contact-vraag > summary::-webkit-details-marker { display: none; } .fr-contact-vraag > summary::after { content: '+'; float: right; margin-left: 1rem; color: var(--portal-primary); font-weight: 700; } .fr-contact-vraag[open] > summary::after { content: '\2212'; } .fr-contact-vraag > p { margin: 0; padding: 0 16px 14px; color: var(--portal-text); font-size: .93rem; line-height: 1.65; } .fr-contact-verwachting .fr-over-lead { max-width: 62ch; } .fr-weetjes-rij { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .fr-weetje { padding: 18px; border: 1px solid var(--portal-border); border-left: 3px solid var(--portal-primary); border-radius: 10px; background: var(--portal-surface, #fff); } .fr-weetje h3 { margin: 0 0 .4rem; font-family: var(--portal-font-serif, var(--portal-font-sans)); font-size: 1.05rem; font-weight: 600; color: var(--portal-heading, var(--portal-text)); } .fr-weetje p { margin: 0; color: var(--portal-text); font-size: .93rem; line-height: 1.7; } .fr-auth-tweeluik { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; } @media (max-width: 900px) { .fr-auth-tweeluik { grid-template-columns: minmax(0, 1fr); } } .fr-auth-zij { padding: 20px; border: 1px solid var(--portal-border); border-radius: 12px; background: var(--portal-surface-soft, var(--portal-surface, #fff)); } .fr-auth-zij-kop { margin: 0 0 .8rem; font-family: var(--portal-font-serif, var(--portal-font-sans)); font-size: 1.15rem; font-weight: 600; color: var(--portal-heading, var(--portal-text)); } .fr-auth-voordelen { margin: 0 0 1.1rem; padding: 0; list-style: none; display: grid; gap: .8rem; } .fr-auth-voordelen li { display: flex; flex-direction: column; gap: .15rem; } .fr-auth-voordelen strong { color: var(--portal-heading, var(--portal-text)); font-size: .97rem; } .fr-auth-voordelen span { color: var(--portal-muted); font-size: .89rem; line-height: 1.6; } .fr-auth-regels h3 { margin: 0 0 .5rem; font-size: .95rem; font-weight: 600; color: var(--portal-heading, var(--portal-text)); } .fr-auth-regels ul { margin: 0 0 1rem; padding-left: 1.1rem; display: grid; gap: .4rem; } .fr-auth-regels li { color: var(--portal-text); font-size: .89rem; line-height: 1.6; } .fr-auth-privacy { margin: 0; padding-top: .9rem; border-top: 1px solid var(--portal-border); color: var(--portal-muted); font-size: .84rem; line-height: 1.6; } .fr-auth-kicker { margin: .8rem 0 0; } .fr-ww-hulp { margin: .5rem 0 0; } .fr-ww-eisen, .fr-ww-adviezen { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; } .fr-ww-eisen li { display: flex; align-items: center; gap: .5rem; color: var(--portal-text); font-size: .88rem; } .fr-ww-vink { flex: 0 0 auto; display: inline-block; width: 16px; height: 16px; border: 1.5px solid var(--portal-border, #d5d8de); border-radius: 4px; position: relative; } .fr-ww-eisen li.is-goed .fr-ww-vink { border-color: var(--portal-primary, var(--local-brand, var(--fr-link, #4b3fdb))); background: var(--portal-primary, var(--local-brand, var(--fr-link, #4b3fdb))); } .fr-ww-eisen li.is-goed .fr-ww-vink::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .fr-ww-verplicht { flex: 0 0 auto; margin-left: auto; color: var(--portal-muted); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow-wrap: normal; } .fr-ww-advies-kop { margin: .8rem 0 .35rem; color: var(--portal-muted); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; } .fr-ww-adviezen li { padding-left: 1.1rem; position: relative; color: var(--portal-muted); font-size: .85rem; line-height: 1.55; } .fr-ww-adviezen li::before { content: '·'; position: absolute; left: .35rem; } .fr-ww-adviezen li.is-goed { color: var(--portal-text); } .fr-ww-sterkte { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; } .fr-ww-sterkte[hidden] { display: none; } .fr-ww-sterkte-balk { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--portal-border, #d5d8de); overflow: hidden; } .fr-ww-sterkte-balk > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--portal-primary, var(--local-brand, var(--fr-link, #4b3fdb))); transition: width .2s ease; } .fr-ww-sterkte.is-zwak .fr-ww-sterkte-balk > span { background: #b23b3b; } .fr-ww-sterkte.is-matig .fr-ww-sterkte-balk > span { background: #c07a2c; } .fr-ww-sterkte-tekst { color: var(--portal-muted); font-size: .78rem; white-space: nowrap; } .fr-ww-wikkel { position: relative; display: block; } .fr-ww-wikkel > input { width: 100%; padding-right: 5.2rem; } .fr-ww-kijk { position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); padding: .25rem .55rem; border: 1px solid var(--portal-border, #d5d8de); border-radius: 6px; background: transparent; color: var(--portal-muted); font: inherit; font-size: .78rem; cursor: pointer; } .fr-ww-kijk:hover { color: var(--portal-primary, var(--local-brand, var(--fr-link, #4b3fdb))); border-color: var(--portal-primary, var(--local-brand, var(--fr-link, #4b3fdb))); } .portal-auth-form-v148 button.fr-ww-kijk, body[class*="site-theme-"] .portal-auth-form-v148 button.fr-ww-kijk { width: auto; min-height: 0; height: auto; padding: .25rem .55rem; line-height: 1.3; border: 1px solid var(--portal-border, var(--border, rgba(100,116,139,.28))); border-radius: 6px; background: transparent; color: var(--portal-muted, var(--ink-3, #64748b)); font-size: .78rem; font-weight: 600; } .portal-auth-form-v148 button.fr-ww-kijk:hover, body[class*="site-theme-"] .portal-auth-form-v148 button.fr-ww-kijk:hover { background: transparent; color: var(--portal-primary, var(--link, var(--accent-2, #4b3fdb))); border-color: var(--portal-primary, var(--link, var(--accent-2, #4b3fdb))); } @media (prefers-reduced-motion: reduce) { .fr-ww-sterkte-balk > span { transition: none; } } html:has(.portal-slide-panel-v20.is-open), body:has(.portal-slide-panel-v20.is-open) { overscroll-behavior-y: none; } .portal-passkey-2fa-v159{display:grid;gap:12px;margin-bottom:4px} .portal-otp-v160{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:4px; } .portal-auth-form-v148 input.portal-otp-vak-v160, body[class*="site-theme-"] .portal-auth-form-v148 input.portal-otp-vak-v160{ width:100%; min-width:0; padding:10px 0; text-align:center; font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; } .portal-auth-form-v148 input.portal-otp-echt-v160, body[class*="site-theme-"] .portal-auth-form-v148 input.portal-otp-echt-v160{ position:absolute; width:1px; min-width:0; height:1px; min-height:0; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .portal-otp-onder-v160{ display:grid; gap:2px; justify-items:start; } .portal-otp-status-v160{ min-height:1.2em; margin:0; } .portal-auth-form-v148 button.portal-otp-wissel-v160, body[class*="site-theme-"] .portal-auth-form-v148 button.portal-otp-wissel-v160{ justify-self:start; min-height:auto; padding:0; border:0; background:none; color:var(--local-brand,var(--fr-link,var(--accent-2,#4b3fdb))); font:inherit; font-size:13px; font-weight:700; text-decoration:underline; cursor:pointer; } .portal-auth-form-v148 button.portal-otp-wissel-v160:hover, body[class*="site-theme-"] .portal-auth-form-v148 button.portal-otp-wissel-v160:hover{ background:none; text-decoration:none; } @media(max-width:400px){ .portal-otp-v160{gap:6px} .portal-auth-form-v148 input.portal-otp-vak-v160, body[class*="site-theme-"] .portal-auth-form-v148 input.portal-otp-vak-v160{font-size:19px;padding:9px 0} } .portal-auth-card-v148 label.portal-remember-v149, body[class*="site-theme-"] .portal-auth-card-v148 label.portal-remember-v149{ display:flex; flex-direction:row; align-items:flex-start; gap:0.55rem; font-family:inherit; font-size:0.875rem; font-weight:400; line-height:1.5; letter-spacing:normal; text-transform:none; }
:root { --letterschaal: 1; } html[data-schaal="klein"] { --letterschaal: .93; } html[data-schaal="normaal"] { --letterschaal: 1; } html[data-schaal="groot"] { --letterschaal: 1.14; } .letterschaal, .theme-switch { display: inline-flex; gap: 1px; background: var(--letterschaal-lijn, rgba(128, 128, 128, .35)); border: 1px solid var(--letterschaal-lijn, rgba(128, 128, 128, .35)); border-radius: 5px; overflow: hidden; } .letterschaal button, .theme-switch button { border: 0; background: var(--letterschaal-vlak, transparent); color: var(--letterschaal-inkt, inherit); min-width: 34px; height: 32px; padding: 0 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; line-height: 1; border-radius: 0; } .letterschaal button > span, .theme-switch button > i { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; line-height: 1; } .letterschaal button[data-letterschaal="klein"] > span { font-size: 11px; } .letterschaal button[data-letterschaal="normaal"] > span { font-size: 14px; } .letterschaal button[data-letterschaal="groot"] > span { font-size: 17px; } .letterschaal button[aria-pressed="true"], .theme-switch button[aria-pressed="true"] { background: var(--letterschaal-aan, #2c6ab0); color: var(--letterschaal-aan-inkt, #fff); } .letterschaal button:hover:not([aria-pressed="true"]), .theme-switch button:hover:not([aria-pressed="true"]) { background: var(--letterschaal-hover, rgba(128, 128, 128, .18)); } @media (prefers-reduced-motion: reduce) { .letterschaal button, .theme-switch button { transition: none; } } .letterschaal-in-kop { align-items: center; margin-left: .75rem; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/newsreader-latin.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/newsreader-italic-latin.woff2") format("woff2"); } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/instrument-sans-latin.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-var.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin.woff2") format("woff2"); } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/assets/fonts/fraunces-latin.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/manrope-latin-var.woff2") format("woff2"); } @font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/public-sans-latin.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/eb-garamond-latin-var.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/eb-garamond-italic-latin-var.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/archivo-italic-latin-var.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/space-mono-latin.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/space-mono-bold-latin.woff2") format("woff2"); } @font-face { font-family: "Bitter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/bitter-latin-var.woff2") format("woff2"); } @font-face { font-family: "Bitter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/bitter-italic-latin-var.woff2") format("woff2"); } @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-var.woff2") format("woff2"); } @font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/source-sans-3-italic-latin-var.woff2") format("woff2"); }
html.cms-panel-open, html.cms-panel-open body { overscroll-behavior: none; } @media (max-width: 991.98px) { body:has(.portal-bottom-nav-v20), body:has(lh-bottom-nav) { padding-bottom: calc(var(--cms-nav-height, 70px) + 12px); } body .we-balk:not(.we-balk--kop) { bottom: calc(var(--cms-nav-height, 0px) + 10px); } html.cms-panel-open .we-balk { visibility: hidden; pointer-events: none; } body .letterschaal button, body .theme-switch button, body theme-toggle button { min-width: 44px; min-height: 44px; } body .portal-bottom-nav-v20, body .lh-bottom-nav { padding-left: max(4px, env(safe-area-inset-left)); padding-right: max(4px, env(safe-area-inset-right)); padding-bottom: max(5px, env(safe-area-inset-bottom)); } body .portal-bottom-nav-item-v20, body .lh-bn-item { min-height: 60px; } body .portal-slide-panel-v20 { bottom: var(--cms-nav-height, 0px); transition: visibility 0s .3s; } body .portal-slide-panel-v20.is-open { transition-delay: 0s; } body .portal-slide-panel-v20 .portal-slide-body-v20 { box-sizing: border-box; height: var(--cms-panel-height, calc(100dvh - var(--cms-nav-height, 0px))); max-height: var(--cms-panel-height, calc(100dvh - var(--cms-nav-height, 0px))); border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: max(12px, env(safe-area-inset-bottom)); padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); opacity: 0; transform: translateY(100%); transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .24s ease; } body .portal-slide-panel-v20 .lh-menu-body { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); } body .portal-slide-panel-v20.is-open .portal-slide-body-v20 { opacity: 1; transform: translateY(0); } body .portal-slide-content-v20 { min-height: 0; scrollbar-width: none; } body .portal-slide-content-v20::-webkit-scrollbar { display: none; } body .portal-slide-link-v20, body .lh-menu-link { min-height: 48px; } body .portal-slide-link-v20 { padding-top: 9px; padding-bottom: 9px; } body .portal-slide-content-v20[data-meer-onder] { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.75rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 2.75rem), transparent); } body .portal-slide-header-v20 { touch-action: pan-x; } body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]), body select, body textarea { font-size: max(16px, 1em); min-height: 44px; } } .dorps-instellingen-knop { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; padding: 0; border: 1px solid var(--fr-rand, #aaa); border-radius: 12px; background: var(--fr-kaart); color: var(--fr-tekst); cursor: pointer; } .dorps-desktop-voorkeuren { display: none; } @media (min-width: 1025px) { .dorps-desktop-voorkeuren + .dorps-instellingen-knop { display: none; } .dorps-desktop-voorkeuren { display: flex; align-items: center; gap: 10px; } .dorps-desktop-voorkeuren .letterschaal { margin: 0; } } .dorps-instellingen-knop svg { width: 22px; height: 22px; } .cms-compacte-voorkeuren { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 8px; } .cms-compacte-voorkeuren .letterschaal, .cms-compacte-voorkeuren .theme-switch { display: flex; width: 100%; min-width: 0; margin: 0; box-sizing: border-box; } .cms-compacte-voorkeuren .letterschaal button, .cms-compacte-voorkeuren .theme-switch button { flex: 1; min-width: 44px; min-height: 44px; padding: 0; } @media (max-width: 1024px) { .dorps-linkerrail { display: none; } .dorps-instellingen .portal-slide-close-v20 { display: none; } .dorps-instellingen .dorps-menugroep { margin-bottom: 12px; } } @media (max-width: 991.98px) { .lodewijk-pwa-weergave .portal-slide-close-v20 { display: none; } } .dorps-instellingen .dorps-plaatskop { font: 600 15px/1.4 var(--fr-sans, sans-serif); margin: 20px 4px 10px; } .dorps-instellingen .dorps-menugroep > span { display: block; padding: 14px; } .dorps-instellingen .portal-slide-content-v20 { scrollbar-width: none; } .dorps-instellingen .portal-slide-close-v20 { flex: 0 0 44px; width: 44px; height: 44px; font-size: 22px; } @media (min-width: 1025px) { body .dorps-instellingen .portal-slide-body-v20 { left: auto; width: min(420px, 100%); height: var(--cms-panel-height, 100dvh); max-height: var(--cms-panel-height, 100dvh); padding-bottom: 16px; border-radius: 0; } } .dorps-meer .portal-slide-header-v20 strong { font: 700 26px/1.3 var(--fr-sans, sans-serif); text-transform: none; letter-spacing: 0; color: var(--fr-tekst); } .dorps-meer .portal-slide-content-v20 { padding: 14px 16px 24px; } .dorps-meer h2 { font: 600 16px/1.4 var(--fr-sans, sans-serif); color: var(--fr-tekst); margin: 24px 4px 10px; } .dorps-meer .dorps-menugroep { border: 1px solid var(--fr-rand, #aaa); border-radius: 16px; overflow: hidden; background: var(--fr-bg); } .dorps-meer .dorps-menugroep a { min-height: 54px; box-sizing: border-box; padding: 14px; gap: 12px; font: 400 16px/1.4 var(--fr-sans, sans-serif); } .dorps-meer .dorps-menugroep a:last-child { border-bottom: 0; } .dorps-meer .dorps-menugroep a > span { flex: 1; min-width: 0; overflow-wrap: anywhere; } .dorps-meer .dorps-menugroep small { display: block; font-size: 13px; margin-top: 3px; } .dorps-meer .dorps-menugroep .bi-chevron-right { font-size: 12px; } .dorps-meer .fr-zoek-paneel { width: 100%; box-sizing: border-box; margin: 24px 0 0; padding: 0; } .dorps-meer .portal-zoek__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .dorps-meer .portal-zoek__uitleg { display: none; } @media (max-width: 1024px) { body:has(.dorps-onderbalk) .fr-header [data-fr-head] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } body:has(.dorps-onderbalk) .fr-merk { flex: 1 1 150px; min-width: 0; } body:has(.dorps-onderbalk) .fr-merk-naam { padding-right: 0; min-height: 0; white-space: normal; overflow: visible; display: block; overflow-wrap: anywhere; } body:has(.dorps-onderbalk) [data-fr-acties] { position: static; margin: 0 0 0 auto; flex: 0 0 auto; } body:has(.dorps-onderbalk) .fr-merk-sub { white-space: normal; } body:has(.dorps-onderbalk) .fr-bezoek-tekst { min-width: 0; overflow-wrap: anywhere; } body:has(.dorps-onderbalk) .pbm-kaart { box-sizing: border-box; width: auto; left: 12px; right: 12px; margin-left: auto; bottom: calc(var(--cms-nav-height, 70px) + 12px); max-height: calc(var(--cms-panel-height, 100dvh) - 24px); overflow-y: auto; } body .dorps-onderbalk { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } body .dorps-onderbalk .portal-bottom-nav-item-v20 { min-width: 0; min-height: 64px; padding: 8px 1px; gap: 6px; font: 500 11px/1.2 var(--fr-sans, sans-serif); letter-spacing: 0; text-transform: none; } body .dorps-onderbalk .portal-bottom-nav-item-v20 > span { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; overflow: visible; } .dorps-onderbalk .portal-bottom-nav-item-v20 i { width: 36px; padding: 3px 0; border-radius: 16px; text-align: center; } .dorps-onderbalk .is-active i, .dorps-onderbalk [aria-expanded="true"] i { background: #ffffff20; } } @media (min-width: 992px) and (max-width: 1024px) { body:has(.dorps-onderbalk) { padding-bottom: calc(var(--cms-nav-height, 70px) + 12px); } body .dorps-meer { bottom: var(--cms-nav-height, 0px); } body .dorps-meer .portal-slide-body-v20 { box-sizing: border-box; height: var(--cms-panel-height, calc(100dvh - var(--cms-nav-height, 0px))); max-height: var(--cms-panel-height, calc(100dvh - var(--cms-nav-height, 0px))); border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: 12px; opacity: 0; transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .24s ease; } body .dorps-meer.is-open .portal-slide-body-v20 { opacity: 1; transform: translateY(0); } body .dorps-meer .portal-slide-content-v20 { min-height: 0; scrollbar-width: none; } html.cms-panel-open body:has(.dorps-onderbalk) .we-balk { visibility: hidden; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { body .portal-slide-panel-v20, body .portal-slide-panel-v20 .portal-slide-body-v20, body .portal-slide-panel-v20 .portal-slide-backdrop-v20 { transition: none; } } @media (min-width: 1025px) { html[data-schaal] body [data-fr-body]:has(> .dorps-linkerrail):has(> main + aside) { grid-template-columns: clamp(12rem, 19vw, 18rem) minmax(0, 1fr) clamp(13rem, 21vw, 20rem); } html[data-schaal] body [data-fr-body] > aside[data-fr-rail]:last-child { grid-column: auto; border-top: 0; border-left: 1px solid var(--fr-rand); } html[data-schaal] body [data-fr-body] > aside[data-fr-rail]:is(:first-child, :last-child) .fr-rail-inhoud { position: sticky; top: 1rem; } html[data-schaal] body [data-fr-body] > aside[data-fr-rail]:last-child .fr-clubs-lijst { column-count: 1; grid-template-columns: minmax(0, 1fr); } [data-fr-rail] > .fr-rail-inhoud:not(.dorps-rail-onder) { max-height: max(5rem, calc(100dvh - var(--dorps-rail-top, 10rem) - 1rem)); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; } [data-fr-rail] > .fr-rail-inhoud::-webkit-scrollbar { display: none; } [data-fr-rail] > .fr-rail-inhoud > * { flex-shrink: 0; } } .fr-agenda-lijst .fr-agenda-regel { display: block; padding: 0; } .fr-agenda-activiteit { display: grid; grid-template-columns: minmax(4.5rem, max-content) minmax(0, 1fr); gap: 1rem; padding: 1rem 0; color: var(--fr-tekst); text-decoration: none; } a.fr-agenda-activiteit:hover { background: var(--fr-kaart); } a.fr-agenda-activiteit:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; } .fr-agenda-activiteit .fr-agenda-datum { width: auto; min-width: 4.5rem; padding: .5rem; align-self: start; } .fr-agenda-datum strong { white-space: nowrap; } .fr-agenda-activiteit .fr-agenda-tekst { display: flex; flex-direction: column; min-width: 0; gap: .3rem; } .fr-agenda-activiteit .fr-agenda-titel { font-size: 1.125rem; font-weight: 700; } .fr-agenda-wanneer { font-size: .8125rem; color: var(--fr-stil); } .fr-agenda-tijd { font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; } .fr-agenda-bron { font-size: .75rem; text-decoration: underline; text-underline-offset: .2em; } .fr-agenda-blok > h2 { padding: .75rem 0; border-bottom: 2px solid var(--fr-rand); } .fr-agenda-inhoud { white-space: pre-line; font-size: .9375rem; line-height: 1.6; }