:root {
  --color1: #7F242A;
  --color2: #D25755;
  --color3: #42644F;
  --color4: #F8F2E5;
  --color5: #F9FBF3;
  --color6: #FFFEFD;
  --color7: #6A4128;
  --color8: #3F5B48;
  --color9: #C8504A;
  --color10: #2F5AA8;
  --color11: #857A60;
  --color12: #8B6A66;
  --color13: #C46F2A;
  --color14: #7E2A84;
  --color15: #C4A97A;
  --color16: #EDE4D3;
  --fontColor1: #03090D;
  --fontColor2: #F8F2E5;
  --fontColor3: #7D7D79;
  --fontColor4: #383B3D;
  --fontColor5: #161511;
  --fontColor6: #FCF1F0;
  --fontFamily1: "Figtree", Helvetica, Arial, sans-serif;
  --fontFamily2: "Anton", Impact, sans-serif;
  --fontFamily3: "Montserrat", Helvetica, Arial, sans-serif;
  --fontFamily4: "Pinyon Script", cursive;
  --em: calc(clamp(1100px, 100vw, 1920px) / 108);
  --bodyFontSize: 1.125rem;
  --labelSize: .875rem;
  --h1Size: 6.3rem;
  --h2Size: 6.3rem;
  --h3Size: 2.55rem;
  --h4Size: 4.8rem;
  --h5Size: 3rem;
  --borderColor1: rgba(3, 9, 13, .15);
  --borderRadius1: .375rem;
  --borderRadius2: .5rem;
  --borderRadius3: 100px;
  --headerColor: rgba(3, 9, 13, .19);
  --textSmall: 46rem;
  --space5: .375rem;
  --space15: 1.125rem;
  --space20: 1.5rem;
  --space40: 2.5rem;
  --space80: 6rem;
  --space100: 7.5rem;
  --easeUit: cubic-bezier(.215, .61, .355, 1);
  --easeZacht: cubic-bezier(.25, .46, .45, .94);
}

html {font-size: var(--em);}
body {font-family: var(--fontFamily1); font-weight: 500; color: var(--fontColor1); background: var(--color4); font-size: var(--bodyFontSize); line-height: 1.2; overflow-x: hidden; position: relative; -webkit-font-smoothing: antialiased;}
body * {text-wrap: balance;}
p {margin: 0 0 1em 0;}
p:last-child {margin-bottom: 0;}
a, a:link, a:visited, a:hover {color: inherit; text-decoration: none; transition: .3s all ease;}
::selection {background: var(--color1); color: var(--fontColor2);}

textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select {font-family: var(--fontFamily1); font-size: 16px; font-weight: 500; letter-spacing: 0; color: inherit; background: transparent; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: .4rem 0 .9rem 0; margin: 0; box-sizing: border-box; width: 100%; outline: 0; transition: .3s all ease;}
textarea:focus, input:focus, select:focus {border-bottom-color: var(--color2); box-shadow: none;}
textarea::placeholder, input::placeholder {color: currentColor; opacity: .5; text-transform: none;}
select {-webkit-appearance: none; appearance: none; padding-right: 2rem; cursor: pointer;}
select option {color: var(--fontColor1);}
textarea {min-height: 9rem; resize: vertical;}
input[type="date"]::-webkit-calendar-picker-indicator {opacity: .8; cursor: pointer;}
.formulier2 .formulierElementen {display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem 2.6rem;}
.formulier2 .formulierElementen .element .elementTitel {font-family: var(--fontFamily1); font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; margin-bottom: .9rem;}
.formulier2 .formulierElementen .element .elementVeld {position: relative;}
.formulier2 .formulierElementen .element .elementVeld:has(select)::after {content: "\f078"; font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: .9rem; position: absolute; right: .2rem; top: 50%; transform: translateY(-70%); pointer-events: none;}
.formulier2 .formulierElementen .element {min-width: 0;}
.formulier2 .formulierElementen .element:has(textarea) {grid-column: 1 / -1;}

h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover,
h2, h3, h4, h5, h2 a, h3 a, h2 a:link, h3 a:link, h2 a:visited, h3 a:visited, h2 a:hover, h3 a:hover {font-family: var(--fontFamily2); font-weight: 400; color: inherit; text-transform: uppercase; line-height: .92; letter-spacing: 0; margin: 0 0 .25em 0; text-decoration: none;}
p + h1, p + h2, p + h3, p + h4, p + h5 {margin-top: 0;}
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: var(--h1Size);}
h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2Size);}
h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: var(--h3Size);}
p.label {font-family: var(--fontFamily3); font-size: var(--labelSize); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; line-height: 1; margin: 0 0 var(--space15) 0;}

a.knop {display: inline-flex; align-items: center; gap: .7rem; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; font-family: var(--fontFamily3); font-size: var(--labelSize); font-weight: 500; letter-spacing: .05em; line-height: 1; text-transform: uppercase; color: var(--fontColor1); transition: .3s all ease;}
a.knop::after {content: "\f061"; font-family: "Font Awesome 5 Pro"; font-weight: 400; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--fontColor1); color: var(--color4); transition: .3s all ease;}
a.knop:hover {color: var(--fontColor4); background: none;}
a.knop:hover::after {background: var(--fontColor4);}
a.knop.extern::after {transform: rotate(-30deg);}
a.knop[href=""] {display: none;}
.vak.color1 a.knop, .vak.color2 a.knop, .vak.color3 a.knop, .vak.fotoTekst a.knop, .vak.blokken .blok a.knop {color: var(--fontColor2);}
.vak.color1 a.knop::after, .vak.color2 a.knop::after, .vak.color3 a.knop::after, .vak.fotoTekst a.knop::after, .vak.blokken .blok a.knop::after {background: var(--fontColor2); color: var(--fontColor1);}
.vak.color1 a.knop:hover::after, .vak.color2 a.knop:hover::after, .vak.color3 a.knop:hover::after, .vak.fotoTekst a.knop:hover::after {background: var(--fontColor1); color: var(--fontColor2);}
button, .formulierVersturen input {font-family: var(--fontFamily3); font-size: var(--labelSize); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; background: var(--fontColor1); color: var(--color4); border: 0; border-radius: var(--borderRadius3); padding: .9rem 1.6rem; cursor: pointer; transition: .3s all ease;}
button:hover, .formulierVersturen input:hover {background: var(--fontColor4); color: var(--color4);}

.extrabovenkantHolder, .bovenkantHolder .zoekenHolder, .bovenkantHolder .shopitems, .bovenkantHolder .winkelmenuHolder, .bovenkantHolder .resMenuHolder, .bovenkantHolder .resMenu, .resMenuHolderBg, .resMenubalk {display: none !important;}
.bovenkantHolder {position: fixed; top: 1rem; max-width: 900px; left: 1.5rem; right: 1.5rem; z-index: 1000; width: auto; height: 3.75rem; margin: 0 auto; padding: 0; border: 0; border-radius: var(--borderRadius1); background: var(--headerColor); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); transition: .3s all ease;}
.bovenkantHolder .bovenkant {position: static; display: flex; align-items: center; justify-content: space-between; height: 100%; min-height: 0; max-width: none; margin: 0; padding: 0; box-sizing: border-box;}
.bovenkantHolder .bovenkant a.reserveren {display: flex; align-items: center; height: 100%; padding: 0 1.1rem; font-family: var(--fontFamily3); font-size: .75rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--color6);}
.bovenkantHolder .bovenkant a.reserveren:hover {opacity: .6;}
.bovenkantHolder .bovenkant a.logo {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; line-height: 0; z-index: 2;}
.bovenkantHolder .bovenkant a.logo img {height: 1.875rem; width: auto; margin: 0; transition: .3s all ease;}
.bovenkantHolder .bovenkant button.menuKnop {display: flex; flex-direction: column; justify-content: center; gap: .375rem; width: auto; height: 100%; margin: 0; padding: 0 1.4rem; background: none; border-radius: 0;}
.bovenkantHolder .bovenkant button.menuKnop .lijn {display: block; width: 1.8rem; height: 2px; background: var(--color6); transition: .3s all ease;}
.bovenkantHolder .bovenkant button.menuKnop .tekst {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);}
.bovenkantHolder.menuOpen {background: var(--color6);}
.bovenkantHolder.menuOpen .bovenkant a.reserveren {color: var(--fontColor1);}
.bovenkantHolder.menuOpen .bovenkant a.logo img {filter: brightness(0);}
.bovenkantHolder.menuOpen .bovenkant button.menuKnop .lijn {background: var(--fontColor1);}
.bovenkantHolder.menuOpen .bovenkant button.menuKnop .lijn:first-child {transform: translateY(4px) rotate(45deg);}
.bovenkantHolder.menuOpen .bovenkant button.menuKnop .lijn:nth-child(2) {transform: translateY(-4px) rotate(-45deg);}

.bovenkantHolder .menuPaneel {position: absolute; top: calc(100% + .375rem); left: 0; right: 0; height: 0; opacity: 0; overflow: hidden; visibility: hidden; background: var(--color6); border-radius: var(--borderRadius1); text-align: center;}
.bovenkantHolder .menuPaneel.open {visibility: visible;}
.bovenkantHolder .menuPaneel .art-nav {display: block; float: none; margin: 0; padding: 1.5rem 0 0 0;}
.bovenkantHolder .menuPaneel ul.art-menu, .bovenkantHolder .menuPaneel ul.menuExtra {display: flex; flex-direction: column; align-items: center; gap: .75rem; position: static; float: none; height: auto; margin: 0; padding: 0; list-style: none; background: none;}
.bovenkantHolder .menuPaneel ul.art-menu > li {display: block; float: none; margin: 0; padding: 0; overflow: hidden; background: none; border: 0;}
.bovenkantHolder .menuPaneel ul.art-menu > li > ul, .bovenkantHolder .menuPaneel ul.art-menu li .l, .bovenkantHolder .menuPaneel ul.art-menu li .r {display: none;}
.bovenkantHolder .menuPaneel ul.art-menu > li > a, .bovenkantHolder .menuPaneel ul.menuExtra li a {display: block; height: auto; padding: .25rem 0; background: none; border: 0; line-height: 1;}
.bovenkantHolder .menuPaneel ul.art-menu > li > a .t, .bovenkantHolder .menuPaneel ul.menuExtra li a {font-family: var(--fontFamily3); font-size: .875rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--fontColor1); padding: 0; background: none; line-height: 1;}
.bovenkantHolder .menuPaneel ul.art-menu > li > a:hover .t, .bovenkantHolder .menuPaneel ul.art-menu > li > a.active .t, .bovenkantHolder .menuPaneel ul.menuExtra li a:hover {color: var(--color2);}
.bovenkantHolder .menuPaneel ul.menuExtra {margin-top: 2.25rem;}
.bovenkantHolder .menuPaneel ul.menuExtra li a::after {content: "\f062"; font-family: "Font Awesome 5 Pro"; font-weight: 400; font-size: .7em; display: inline-block; margin-left: .35em; transform: rotate(45deg);}
.bovenkantHolder .menuPaneel .menuFoto {position: relative; height: 23.25rem; margin: 1.5rem .6rem .6rem .6rem; border-radius: var(--borderRadius1); overflow: hidden; line-height: 0;}
.bovenkantHolder .menuPaneel .menuFoto img {width: 100%; height: 100%; object-fit: cover;}
.bovenkantHolder .menuPaneel .menuFoto img.menuLogo {position: absolute; left: 50%; top: 50%; width: auto; height: 2.5rem; transform: translate(-50%, -50%);}

.art-Sheet {max-width: none; padding: var(--space100) var(--space20); box-sizing: border-box;}
.art-Sheet:has(.vak) {padding: 0 !important;}
.art-Sheet .art-sidebar1, .art-Sheet .art-sidebar2, .art-Sheet .breadcrumbs {display: none;}
.art-Sheet .art-content, .art-Sheet .art-content article {padding: 0; margin: 0;}
.art-Sheet .art-content article:has(.lijst.detail) > .vak:not(:has(.lijst.detail)) {display: none;}

.vak {position: relative;}
.vak .inhoud {max-width: none; margin: 0; padding: var(--space100) var(--space20); box-sizing: border-box; position: relative;}
.vak.color1 {background-color: var(--color1); color: var(--fontColor2);}
.vak.color2 {background-color: var(--color2); color: var(--fontColor2);}
.vak.color3 {background-color: var(--color3); color: var(--fontColor2);}
.vak.color4 {background-color: var(--color4); color: var(--fontColor1);}
.vak.color5 {background-color: var(--color5); color: var(--fontColor1);}
.vak .parallax, .HeaderHolder .lijst.paginakop > .item .parallax {position: absolute; inset: 0; overflow: hidden;}
.vak .parallax img, .HeaderHolder .lijst.paginakop > .item .parallax img {position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; transform: scale(1.15); will-change: transform;}

.vak.hero {height: 75rem; min-height: 100svh; overflow: hidden; background-color: var(--heroKleur, var(--color1)); color: var(--fontColor2);}
.vak.hero .heroTitel {position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none;}
.vak.hero .heroTitel h1 {text-align: center; margin: 0; max-width: 28.5rem; text-wrap: wrap;}
.vak.hero .heroTitel h1 .regel {display: block; overflow: clip; padding: .1em 0; margin: -.1em 0;}
.vak.hero .heroTitel h1 .regelBinnen {display: block;}

.vak.fotoTekst {height: 100vh; min-height: 45rem; max-height: 75rem; overflow: hidden; color: var(--fontColor2);}
.vak.fotoTekst .parallax::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%); pointer-events: none;}
.vak.fotoTekst .inhoud {z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space40) 2.7rem 3.75rem 2.7rem;}
.vak.fotoTekst .inhoud p.label {margin-bottom: 1.875rem;}
.vak.fotoTekst .inhoud h2 {max-width: 28.5rem;}
.vak.fotoTekst .inhoud > div:last-child {align-self: flex-end; width: 22.5rem; margin-right: 2.7rem;}
.vak.fotoTekst .inhoud > div:last-child p:not(:last-child) {margin-bottom: var(--space40);}

.vak.split {display: grid; grid-template-columns: 1fr 1fr; min-height: 72rem;}
.vak.split > .foto {position: relative; overflow: hidden;}
.vak.split > .foto img {position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover;}
.vak.split > .inhoud {display: flex; flex-direction: column; justify-content: space-between; padding: 2.125rem 1.375rem 4rem 1.375rem;}
.vak.split > .inhoud h2 {max-width: 39rem;}
.vak.split > .inhoud > div:last-child {max-width: 31rem;}
.vak.split > .inhoud > div:last-child p:not(:last-child) {margin-bottom: 3.3rem;}

.vak.intro .inhoud {display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--space20); padding: 5.5rem var(--space20) 6.5rem var(--space20);}
.vak.intro .inhoud > p.label:first-child {grid-column: 1 / 5; margin-top: .9rem;}
.vak.intro .inhoud > div {grid-column: 5 / 12;}
.vak.intro .inhoud > div h2 {font-size: var(--h4Size); max-width: 41rem;}
.vak.intro .inhoud > div h2 + p {max-width: 20.5rem; margin-top: var(--space40);}
.vak.intro .inhoud > div p:last-child {margin-top: 4.25rem;}

.vak.media .inhoud {display: grid; grid-template-columns: 12rem 30rem 1fr; gap: 0 1.95rem; padding: var(--space100) 2.7rem 15rem 2.7rem;}
.vak.media .inhoud > p.label:first-child {margin-top: 1rem;}
.vak.media .inhoud > .foto {line-height: 0; overflow: hidden;}
.vak.media .inhoud > .foto img {width: 100% !important; height: auto !important; aspect-ratio: 401 / 600; object-fit: cover;}
.vak.media .inhoud > div:last-child {display: flex; flex-direction: column; justify-content: space-between; margin-top: -.75rem;}
.vak.media .inhoud > div:last-child h2 {max-width: 28rem;}
.vak.media .inhoud > div:last-child > div p:not(:last-child) {max-width: 21rem; margin-bottom: 4.5rem;}

.vak.kaart {height: 60rem; min-height: 100vh; max-height: 75rem; overflow: hidden;}
.vak.kaart .inhoud {position: absolute; left: 0; right: 0; bottom: var(--space40); z-index: 1; display: flex; justify-content: space-between; gap: 2rem; width: 45rem; max-width: calc(100% - 3rem); min-height: 21.6rem; margin: 0 auto; padding: 1.2rem 1.6rem 1.7rem 1.6rem; border-radius: var(--borderRadius1); background: var(--color3); color: var(--fontColor2);}
.vak.kaart .inhoud > div:first-child {display: flex; flex-direction: column; justify-content: space-between;}
.vak.kaart .inhoud > div:first-child h2 {font-size: var(--h5Size); margin: 0; max-width: 13rem;}
.vak.kaart .inhoud > div:last-child {display: flex; flex-direction: column; justify-content: flex-end; gap: 2.4rem; width: 12.5rem;}
.vak.kaart .inhoud > div:last-child p {font-family: var(--fontFamily3); font-size: var(--labelSize); letter-spacing: .05em; text-transform: uppercase; line-height: 1; margin: 0;}
.vak.kaart .inhoud > div:last-child p:first-child {opacity: .5;}

.vak.tekst .inhoud {max-width: calc(var(--textSmall) + 3rem); margin: 0 auto;}
.vak.tekst .inhoud h2 {font-size: var(--h4Size); margin-top: .5em;}
.vak.tekst .inhoud h3 {margin-top: 1em;}
.vak.tekst .inhoud ul {margin: 0 0 1em 0; padding-left: 1.2em;}

.vak.blokken .inhoud {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 1.2rem; padding: var(--space80) 1.25rem;}
.vak.blokken .inhoud > h2, .vak.blokken .inhoud > p {grid-column: 1 / -1;}
.vak.blokken .inhoud > .blok {position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 560 / 700; padding: 1rem 1.5rem 2rem 1.5rem; border-radius: var(--borderRadius2); overflow: hidden; color: var(--fontColor2); text-align: center; box-sizing: border-box;}
.vak.blokken .inhoud > .blok > img {position: absolute; inset: 0; z-index: -1; width: 100% !important; height: 100% !important; object-fit: cover;}
.vak.blokken .inhoud > .blok::after {content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .45) 100%);}
.vak.blokken .inhoud > .blok h3 {margin: 0;}

.HeaderHolder {padding: 0; margin: 0;}
.HeaderHolder .HeaderExtra {display: none;}
.HeaderHolder .lijst.paginakop > .item {position: relative; display: flex; align-items: flex-end; height: 100vh; min-height: 40rem; max-height: 62rem; overflow: hidden; color: var(--fontColor2); background: var(--color1);}
.HeaderHolder .lijst.paginakop > .item::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .35) 100%); pointer-events: none;}
.HeaderHolder .lijst.paginakop > .item .tekst {position: relative; z-index: 1; padding: 0 2.7rem 3.75rem 2.7rem;}
.HeaderHolder .lijst.paginakop > .item .tekst h1 {margin: 0; max-width: 60rem;}
.HeaderHolder .lijst.paginakop > .item .tekst .intro {max-width: 26rem; margin-top: var(--space20);}
.HeaderHolder .lijst.paginakop > .item .tekst p:empty {display: none;}
.HeaderHolder .lijst.paginakop > .item.klein {justify-content: center; height: 30rem; min-height: 0; text-align: center;}
.HeaderHolder .lijst.paginakop > .item.klein::after {background: rgba(3, 9, 13, .35);}
.HeaderHolder .lijst.paginakop > .item.klein .tekst {padding: 0 var(--space20) 3.75rem var(--space20);}
.HeaderHolder .lijst.paginakop > .item.klein .tekst h1 {max-width: 46rem; margin: 0 auto; font-size: var(--h4Size);}
.HeaderHolder .lijst.paginakop > .item.klein .tekst p.label {margin-bottom: var(--space20);}

footer, .pageFooterHolder, .pageFooterKnoppenHolder {background: var(--color4);}
.pageFooterHolder .pageFooter {max-width: none; margin: 0 var(--space40); padding: 0; color: var(--fontColor1);}
.pageFooterHolder .pageFooter a {color: var(--fontColor1);}
.pageFooterHolder .pageFooter .footer {position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 5.25rem; padding: 2.75rem 0 6.8rem 0; border-bottom: 1px solid var(--borderColor1);}
.pageFooterHolder .pageFooter .footer::after {content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--borderColor1);}
.pageFooterHolder .pageFooter .footer .over {display: flex; gap: var(--space15); align-items: flex-end;}
.pageFooterHolder .pageFooter .footer .over img {flex-shrink: 0; width: 14.625rem !important; height: auto !important; aspect-ratio: 195 / 366; object-fit: cover; border-radius: var(--borderRadius1); margin: 0;}
.pageFooterHolder .pageFooter .footer .over p {max-width: 21rem; margin-bottom: 4.5rem;}
.pageFooterHolder .pageFooter .footer .over p:last-child {margin-bottom: 0;}
.pageFooterHolder .pageFooter .footer .kolommen {display: grid; grid-template-columns: 1fr 1fr; gap: var(--space20); padding-top: 4.3rem;}
.pageFooterHolder .pageFooter .footer .kolommen > div {display: flex; flex-direction: column;}
.pageFooterHolder .pageFooter .footer .kolommen p.label {color: var(--fontColor3); letter-spacing: .12em; margin-bottom: auto;}
.pageFooterHolder .pageFooter .footer .kolommen ul {display: flex; flex-direction: column; gap: 1.2rem; list-style: none; margin: 7rem 0 0 0; padding: 0;}
.pageFooterHolder .pageFooter .footer .kolommen ul li {font-family: var(--fontFamily3); font-size: var(--labelSize); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; line-height: 1; padding: 0; margin: 0;}
.pageFooterHolder .pageFooter .footer .kolommen ul li a:hover {color: var(--color2);}
.pageFooterHolder .pageFooter .footer .kolommen ul li.extern {margin-top: .6rem;}
.pageFooterHolder .pageFooter .footer .kolommen ul li.extern + li.extern {margin-top: 0;}
.pageFooterHolder .pageFooter .footer .kolommen ul li.extern a::after {content: "\f062"; font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 1.1em; display: inline-block; margin-left: .6em; transform: rotate(45deg);}
.pageFooterHolder .pageFooter .footer .kolommen .formulier2 {margin-top: 7rem;}
.pageFooterHolder .pageFooter .footer .kolommen .formulier2 .formulierElementen {grid-template-columns: 1fr; gap: 1.8rem; max-width: 22rem;}
.pageFooterHolder .pageFooter .footer .kolommen .formulierVersturen {margin-top: 1.8rem;}
.pageFooterHolder .pageFooter .footer .kolommen .formulierVersturen input, .pageFooterHolder .pageFooter .footer .kolommen .formulierVersturen button {background: none; color: var(--fontColor1); padding: 0; font-size: 1.05rem; border-radius: 0;}
footer .woordmerk {display: flex; justify-content: space-between; margin: 3.75rem var(--space40) 0 var(--space40);}
footer .woordmerk .letter {display: block; overflow: hidden; line-height: 0;}
footer .woordmerk svg {display: block; height: calc((100vw - 5rem) * .1925); width: auto; fill: var(--fontColor5);}
.pageFooterKnoppenHolder .pageFooterKnoppen {display: flex; justify-content: space-between; align-items: center; max-width: none; margin: 0 var(--space40); padding: var(--space40) 0; font-family: var(--fontFamily3); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--fontColor1); opacity: .6; border: 0;}
.pageFooterKnoppenHolder .pageFooterKnoppen a {color: var(--fontColor1);}
.pageFooterKnoppenHolder .pageFooterKnoppen a:hover {color: var(--color2);}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu {margin: 0;}

.laadscherm {position: fixed; inset: 0; z-index: 9999; animation: laadschermNoodstop .01s 8s forwards;}
body:not(:has(.vak.hero)) .laadscherm {display: none;}
html.laden body {overflow: hidden;}
@keyframes laadschermNoodstop {to {opacity: 0; visibility: hidden;}}
.laadscherm .laadscherm-vlak {position: absolute; inset: 0; background: var(--heroKleur, var(--color1));}
.laadscherm .laadscherm-beeldmerk {position: absolute; z-index: 1; left: 50%; top: 28.2%; width: 4.95rem; transform: translateX(-50%);}
.laadscherm .laadscherm-beeldmerk svg {display: block; width: 100%; height: auto; overflow: visible;}
.laadscherm .laadscherm-beeldmerk .lijn {fill: none; stroke: var(--fontColor6); stroke-width: 4; stroke-dasharray: 0 99999;}
.laadscherm .laadscherm-beeldmerk .vlak {fill: var(--fontColor6); opacity: 0;}
.laadscherm .laadscherm-woordmerk {position: absolute; z-index: 1; left: 2.475rem; right: 2.475rem; bottom: 2.95rem; display: flex; justify-content: space-between;}
.laadscherm .laadscherm-woordmerk .letter {display: block; overflow: hidden; line-height: 0;}
.laadscherm .laadscherm-woordmerk svg {display: block; height: calc((100vw - 4.95rem) * .1925); width: auto; fill: var(--fontColor6); transform: translateY(200%);}

.woord {display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; margin-bottom: -.04em;}
.woord .woordBinnen {display: inline-block; transform: translateY(110%); transition: transform 1s var(--easeUit);}
.toon .woord .woordBinnen {transform: translateY(0);}
.zoomVak {overflow: hidden;}
.zoomVak img.zoom {transform: scale(1.05); transition: transform 1.4s var(--easeZacht);}
.zoomVak img.zoom.toon {transform: scale(1);}
main, footer {transition: opacity .6s ease-in-out;}
html.vertrek main, html.vertrek footer {opacity: 0;}


@media screen and (max-width: 900px) {

  :root {
    --em: calc(clamp(680px, 100vw, 900px) / 52);
  }

  .bovenkantHolder {left: .5rem; right: .5rem; top: .5rem;}
  .bovenkantHolder .menuPaneel .art-nav {padding-top: 4rem;}
  .bovenkantHolder .menuPaneel ul.art-menu {gap: 1rem;}
  .bovenkantHolder .menuPaneel ul.menuExtra {padding-bottom: 4rem;}
  .bovenkantHolder .menuPaneel .menuFoto {display: none;}

  .vak.split {grid-template-columns: 1fr; min-height: 0;}
  .vak.split > .foto {order: 2; aspect-ratio: 360 / 430;}
  .vak.split > .inhoud {gap: 6rem; padding: 2.125rem var(--space20) 3rem var(--space20);}
  .vak.intro .inhoud {grid-template-columns: 1fr; gap: 3rem; padding: 3rem var(--space20);}
  .vak.intro .inhoud > p.label:first-child, .vak.intro .inhoud > div {grid-column: 1 / -1;}
  .vak.media .inhoud {grid-template-columns: 1fr; gap: 2rem; padding: 3rem var(--space20) 5rem var(--space20);}
  .vak.media .inhoud > div:last-child {gap: 2rem; margin-top: 0;}
  .vak.media .inhoud > div:last-child > div p:not(:last-child) {margin-bottom: 2rem;}
  .vak.kaart {height: auto; min-height: 0; max-height: none; padding-top: 19rem;}
  .vak.kaart .parallax {bottom: auto; height: 28rem;}
  .vak.kaart .inhoud {position: relative; bottom: auto; flex-direction: column; width: calc(100% - 1.5rem); max-width: none; margin: 0 auto .75rem auto;}
  .vak.kaart .inhoud > div:first-child {gap: 6rem;}
  .vak.blokken .inhoud {grid-template-columns: 1fr 1fr;}

  .pageFooterHolder .pageFooter, footer .woordmerk, .pageFooterKnoppenHolder .pageFooterKnoppen {margin-left: var(--space20); margin-right: var(--space20);}
  .pageFooterHolder .pageFooter .footer {grid-template-columns: 1fr; gap: 3rem;}
  .pageFooterHolder .pageFooter .footer::after {display: none;}
  .pageFooterHolder .pageFooter .footer .kolommen {padding-top: 0;}
  .pageFooterHolder .pageFooter .footer .kolommen ul, .pageFooterHolder .pageFooter .footer .kolommen .formulier2 {margin-top: 2rem;}
  footer .woordmerk svg {height: calc((100vw - 3rem) * .1925);}

}

@media screen and (max-width: 680px) {

  :root {
    --em: clamp(14px, calc(100vw / 22.5), 19px);
    --bodyFontSize: 1.05rem;
    --labelSize: .8rem;
    --h1Size: 2.5rem;
    --h2Size: 2.5rem;
    --h3Size: 1.5rem;
    --h4Size: 2rem;
    --h5Size: 1.5rem;
  }

  .bovenkantHolder {height: 2.875rem;}
  .bovenkantHolder .bovenkant a.logo img {height: 1.375rem;}
  .bovenkantHolder .bovenkant button.menuKnop {padding: 0 1rem;}
  .bovenkantHolder .bovenkant button.menuKnop .lijn {width: 1.5rem;}

  .vak.hero {height: 100svh; min-height: 40rem;}
  .vak.hero .heroTitel h1 {font-size: 2.9rem;}
  .vak.fotoTekst {height: auto; min-height: 45rem; max-height: none;}
  .vak.fotoTekst .inhoud {gap: 3rem; padding: 5.5rem var(--space20) var(--space40) var(--space20);}
  .vak.fotoTekst .inhoud > div:last-child {align-self: stretch; width: auto; margin-right: 0;}
  .vak.blokken .inhoud {grid-template-columns: 1fr;}

  .HeaderHolder .lijst.paginakop > .item {height: 75svh; min-height: 30rem;}
  .HeaderHolder .lijst.paginakop > .item .tekst {padding: 0 var(--space20) var(--space40) var(--space20);}
  .HeaderHolder .lijst.paginakop > .item.klein {height: 22rem;}

  .pageFooterHolder .pageFooter .footer {padding-bottom: 3rem;}
  .pageFooterHolder .pageFooter .footer .over {flex-direction: column; align-items: flex-start;}
  .pageFooterHolder .pageFooter .footer .over img {width: 60% !important;}
  .pageFooterHolder .pageFooter .footer .kolommen {grid-template-columns: 1fr;}
  .pageFooterHolder .pageFooter .footer .kolommen ul {display: grid; grid-template-columns: 1fr 1fr;}
  footer .woordmerk {margin-top: 2rem;}
  .formulier2 .formulierElementen {grid-template-columns: 1fr; gap: 2rem;}
  .pageFooterKnoppenHolder .pageFooterKnoppen {flex-direction: column; align-items: flex-start; gap: .75rem;}

  .laadscherm .laadscherm-beeldmerk {top: 35%; width: 3.5rem;}
  .laadscherm .laadscherm-woordmerk {left: var(--space20); right: var(--space20); bottom: 2.3rem;}
  .laadscherm .laadscherm-woordmerk svg {height: calc((100vw - 3rem) * .1925);}

}