@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-ExtraLight.ttf") format("truetype"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --gebroken-wit: #F2F0E9;
  --taupe: #24402F;
  --taupe-tekst: #5B6760;
  --taupe-donker: #17221C;
  --taupe-lijn: rgba(36, 64, 47, .2);
  --nacht: #17221C;
  --nacht-licht: #223029;
  --heide: #8B6FA3;
  --heide-licht: #B79CCB;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
::selection { background: var(--heide); color: var(--wit); }

.kop.vast { background: rgba(242, 240, 233, .9); }
.kop.donker.vast { background: rgba(23, 34, 28, .86); }
.held-boven { height: auto; min-height: 0; overflow: visible; background: var(--gebroken-wit); color: var(--taupe-donker); padding: calc(var(--kop, 7.2rem) + 2.8rem) 0 0; }
.held-boven .held-inhoud { position: relative; left: auto; right: auto; bottom: auto; max-width: none; padding: 0 var(--rand); text-align: center; }
.held-boven .held-inhoud .label { color: var(--taupe-tekst); margin-bottom: 1.2rem; }
.held-boven .held-titel { margin: 0 auto; color: var(--taupe); }
.held-boven .held-zin { max-width: 80rem; margin: 1.4rem auto 0; color: var(--taupe-tekst); text-wrap: balance; }
.held-boven .held-knoppen { justify-content: center; margin-top: 2rem; }
.held-boven .held-inhoud .knop-tekst { color: var(--taupe-donker); }
.held-boven .held-beeld { position: relative; inset: auto; overflow: hidden; margin-top: 3.2rem; height: calc(100svh - var(--kop, 7.2rem)); min-height: 44rem; }
.held-boven .held-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.held-beeld::after { display: none; }
@media (min-width: 1024px) { .held-boven .held-titel { font-size: 6.8rem; } }
.held-boven .held-beeld.held-vierkant { aspect-ratio: 4012 / 3531; height: auto; }
.held-boven .held-beeld.held-vierkant img { object-position: 50% 50%; }
@media (max-width: 649px) {
  .held-boven .held-beeld.held-vierkant { aspect-ratio: 4 / 5; height: auto; }
  .held-boven .held-beeld.held-vierkant img { object-position: 60% 78%; }
}
@media (max-width: 649px) {
  .held-boven { padding-top: calc(var(--kop, 7.2rem) + 3.2rem); }
  .held-boven .held-beeld { height: 72svh; min-height: 0; }
  .held-boven .held-beeld img { object-position: 46% 50%; }
}
.kop.op-held:not(.vast) { color: var(--taupe); }
.kop.op-held:not(.vast) .kop-inschrijven:hover { background: var(--nacht); border-color: var(--nacht); color: var(--wit); }

.intro-merk { font-size: 6.4rem; white-space: nowrap; }
@media (min-width: 650px) { .intro-merk { font-size: 11rem; } }
@media (min-width: 1024px) { .intro-merk { font-size: 15rem; } .intro-links { left: 6%; } .intro-rechts { right: 6%; } }
@media (orientation: portrait) {
  .intro-links { top: calc(50% - 6.4rem); }
  .intro-rechts { top: calc(50% + 6.4rem); }
}
@media (orientation: landscape) and (max-width: 1023px) {
  .intro-woord { left: 50%; right: auto; transform: translate(-50%, -50%); }
  .intro-links { top: calc(50% - 9rem); }
  .intro-rechts { top: calc(50% + 9rem); }
}

.kz { position: relative; padding: 8rem 0 0; background: var(--nacht); color: var(--wit); }
.kz-boven { margin-bottom: 3.2rem; padding: 0 var(--rand); }
@media (min-width: 1024px) { .kz-boven { padding: 0; } }
.kz-boven .label { color: rgba(255, 255, 255, .78); }
.kz-boven h2 { margin-top: 1.6rem; color: var(--wit); }
.kz-uitleg { margin: 1.2rem 0 0; font: 400 1.6rem/1.5 var(--sans); color: rgba(255, 255, 255, .74); }
@media (min-width: 1024px) {
  .kz { padding-top: 3rem; }
  .kz-boven { margin-bottom: 2rem; }
  .kz-boven h2 { margin-top: 1rem; font-size: 5.2rem; }
  .kz-boven { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "kop uitleg"; align-items: end; column-gap: 4rem; }
  .kz-boven .label { grid-area: label; }
  .kz-boven h2 { grid-area: kop; }
  .kz-uitleg { grid-area: uitleg; margin: 0 0 .8rem; text-align: right; }
}
.kz-uitleg-tik { display: none; }
@media (hover: none) { .kz-uitleg-muis { display: none; } .kz-uitleg-tik { display: inline; } }

.kz-blok { position: relative; margin: 0 auto; }
@media (min-width: 1024px) { .kz-blok { width: calc(100% - 2 * var(--rand)); } }
.kz-scroller { position: relative; }
.kz-beeld { position: relative; width: 100%; aspect-ratio: 2210 / 800; user-select: none; -webkit-user-select: none; }
.kz-beeld img { display: block; width: 100%; height: 100%; }
.kz-laag { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
@media (max-width: 899px) {
  .kz-scroller { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .kz-scroller::-webkit-scrollbar { display: none; }
  .kz-beeld { width: 280vw; }
}

.kz-raster { pointer-events: none; }
.kz-raster polygon {
  fill: none; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-width .25s var(--uit), stroke .25s var(--uit), opacity 1.1s var(--zacht);
}
.kz.is-binnen .kz-raster polygon {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.3s var(--uit) var(--vertraging, 0s), stroke-width .25s var(--uit), stroke .25s var(--uit), opacity 1.1s var(--zacht);
}
.kz { --rand-onder: 2.3px; --rand-boven: 1.1px; }
.kz-rand-onder { stroke: rgba(6, 10, 8, .32); stroke-width: calc(2.3px * var(--lijn, 1)); }
.kz-rand-boven { stroke: rgba(255, 255, 255, .96); stroke-width: calc(1.1px * var(--lijn, 1)); }
.kz-raster .is-aan .kz-rand-onder { stroke: rgba(6, 10, 8, .45); stroke-width: calc(3.8px * var(--lijn, 1)); }
.kz-raster .is-aan .kz-rand-boven { stroke: var(--wit); stroke-width: calc(2px * var(--lijn, 1)); }
.kz-raster .is-vast .kz-rand-onder { stroke: rgba(6, 10, 8, .5); stroke-width: calc(4.2px * var(--lijn, 1)); }
.kz-raster .is-vast .kz-rand-boven { stroke: var(--wit); stroke-width: calc(2.4px * var(--lijn, 1)); }
.kz-raster [data-status="verkocht"] .kz-rand-boven { stroke: rgba(255, 255, 255, .6); }

.kz-vlak { fill: rgba(255, 255, 255, 0); stroke: none; pointer-events: all; cursor: pointer; outline: none; transition: fill .35s var(--uit); }
.kz.is-scrolt .kz-vlak, .kz.is-scrolt .kz-weg-vlak { pointer-events: none; }
.kz-vlak.is-aan { fill: rgba(255, 255, 255, .26); transition-duration: .15s; }
.kz-vlak.is-vast, .kz-vlak:focus-visible { fill: rgba(255, 255, 255, .34); }
.kz-vlak.is-net { animation: kz-kies .8s var(--uit); }
@keyframes kz-kies { from { fill: rgba(255, 255, 255, .6); } }

.kz { --zacht: cubic-bezier(.33, 0, .2, 1); }
.kz-dim path { fill: rgba(14, 9, 7, .42); opacity: 0; pointer-events: none; transition: opacity 1.2s var(--zacht); }
.kz-beeld.is-spot .kz-dim path { opacity: 1; transition-duration: .85s; }
.kz-beeld.is-spot .kz-raster g:not(.is-aan) polygon { opacity: .4; transition-duration: .85s; }
.kz-beeld.is-spot .kz-vlak.is-aan { fill: rgba(255, 255, 255, .06); }
.kz-beeld.is-spot .kz-vlak.is-vast:not(.is-aan) { fill: rgba(255, 255, 255, 0); }
.kz-vlak { transition: fill .6s var(--zacht); }

.kz-weg-vlak { fill: rgba(6, 12, 9, .16); }
.kz-weg-label {
  position: absolute; z-index: 1; transform: translate(-50%, -50%); pointer-events: none;
  padding: .6rem 1.2rem .55rem; border-radius: 99rem;
  background: rgba(12, 20, 16, .46); -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), 0 .4rem 1.4rem rgba(4, 8, 6, .18);
  color: #FFFFFF; font: 500 1.05rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  transition: opacity .85s var(--zacht, ease);
}
.js .kz .kz-weg-label { opacity: 0; transition: opacity 1.2s var(--uit) 1.1s; }
.js .kz.is-binnen .kz-weg-label { opacity: 1; }
.js .kz.is-binnen .kz-beeld.is-spot .kz-weg-label { opacity: .35; transition: opacity .85s var(--zacht, ease); }
.kz-weg-label.is-smal { padding: .45rem .65rem .4rem; font-size: .9rem; letter-spacing: .06em; }
.js .kz.is-binnen .kz-weg-label.is-weg, .kz-weg-label.is-weg { opacity: 0; visibility: hidden; transition: opacity .3s var(--uit), visibility 0s linear .3s; }
.js .kz.is-binnen .kz-weg-label.is-weg.is-toon, .kz-weg-label.is-weg.is-toon { opacity: 1; visibility: visible; transition: opacity .3s var(--uit), visibility 0s; }

.kz-badge {
  position: absolute; left: 50%; top: 50%; z-index: 2; pointer-events: none;
  display: grid; place-items: center; min-width: 3rem; height: 3rem; padding: 0 .8rem; border-radius: 99rem;
  background: var(--nacht); color: var(--wit); font: 500 1.3rem/1 var(--sans);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 .6rem 1.6rem rgba(14, 9, 7, .4);
  opacity: 0; transform: translate(-50%, calc(-100% - .2rem)) scale(.6); transform-origin: 50% 100%;
  transition: opacity .25s var(--uit), transform .45s var(--uit), left .5s var(--uit), top .5s var(--uit);
}
.kz-badge.is-aan { opacity: 1; transform: translate(-50%, calc(-100% - .7rem)); }

.kz-blok { container: kz / inline-size; }
.kz-kaart { display: flex; flex-wrap: wrap; align-items: center; gap: 2.4rem 3.2rem; padding: 2.4rem var(--rand) 2.8rem; background: var(--nacht-licht); }
.kz-naam, .kz-midden, .kz-koop, .kz-foto { flex: 1 1 100%; min-width: 0; }
.kz-blader { display: flex; align-items: center; gap: 1.4rem; min-width: 0; }
.kz-titel { margin: 0; min-width: 0; font: 300 3.8rem/1 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
@media (min-width: 1024px) { .kz-titel { font-size: 4.4rem; } }
.kz-pijl {
  appearance: none; -webkit-appearance: none; display: grid; place-items: center; flex: none;
  width: 4.4rem; height: 4.4rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--wit);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .3s var(--uit), transform .3s var(--uit);
}
.kz-pijl:hover { background: rgba(255, 255, 255, .1); }
.kz-pijl:active { transform: scale(.94); }
.kz-pijl:focus-visible { outline: 1px solid var(--wit); outline-offset: 3px; }
.kz-pijl svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kz-soort { margin: 1.4rem 0 0; font: 500 1.5rem/1.35 var(--sans); color: var(--wit); }
.kz-status {
  display: inline-flex; align-items: center; gap: .8rem; margin: .8rem 0 0;
  font: 500 1.1rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.kz-stip { flex: none; width: .7rem; height: .7rem; border-radius: 50%; background: #7BC59B; box-shadow: 0 0 0 .3rem rgba(123, 197, 155, .22); }
.kz-status[data-stand="binnenkort"] .kz-stip { background: #E0A84E; box-shadow: 0 0 0 .3rem rgba(224, 168, 78, .24); }
.kz-kenmerk { margin: 1.2rem 0 0; max-width: 38rem; font: 400 1.4rem/1.45 var(--sans); color: rgba(255, 255, 255, .76); }

.kz-cijfers { display: grid; grid-template-columns: repeat(3, max-content); gap: 0; margin: 0; }
.kz-cijfer { display: flex; flex-direction: column-reverse; gap: .8rem; padding: 0 2rem; }
.kz-cijfer:first-child { padding-left: 0; }
.kz-cijfer + .kz-cijfer { border-left: 1px solid rgba(255, 255, 255, .16); }
@media (min-width: 650px) { .kz-cijfer { padding: 0 2.8rem; } }
.kz-cijfer dd { margin: 0; font: 300 2.6rem/1.05 var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.kz-cijfer dt { font: 500 1.05rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); white-space: nowrap; }

@media (max-width: 649px) {
  .kz { padding-top: 4.8rem; }
  .kz-boven { margin-bottom: 2.4rem; }
  .kz-kaart { gap: 2rem; padding-top: 2.4rem; }
  .kz-titel { font-size: 3.2rem; }
  .kz-soort { margin-top: 1rem; }
  .kz-blader { gap: 1rem; }
  .kz-pijl { width: 4.2rem; height: 4.2rem; }
  .kz-cijfer { padding: 0 1.6rem; }
  .kz-cijfer dd { font-size: 2.2rem; }
  .kz-koop { justify-content: space-between; }
}

.kz-koop { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 3.2rem; }
.kz-prijs { margin: 0; font: 400 1.3rem/1.3 var(--sans); color: rgba(255, 255, 255, .75); }
.kz-prijs span { display: block; font-weight: 500; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; }
.kz-prijs strong { display: block; margin-top: .5rem; font: 500 1.9rem/1.15 var(--sans); color: var(--wit); white-space: nowrap; }
.kz-knop { min-height: 4.4rem; }

.kz-foto { display: block; overflow: hidden; border-radius: 1.6rem; aspect-ratio: 16 / 11; background: rgba(255, 255, 255, .08); cursor: zoom-in; }
.kz-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 45%; transition: transform 1s var(--uit); }
.kz-foto:hover img { transform: scale(1.04); }
.kz-foto:focus-visible { outline: 1px solid var(--wit); outline-offset: 3px; }
@media (min-width: 1024px) { .kz-blok .kz-bron { padding-left: 0; padding-right: 0; } }
.kz-bron { margin: 0; padding: 1.4rem var(--rand) 4.8rem; font-size: 1.2rem; line-height: 1.5; color: rgba(255, 255, 255, .55); }

.kz-kaart.wissel :is(.kz-naam, .kz-midden, .kz-koop, .kz-foto) { animation: kz-in .45s var(--uit) both; }
@keyframes kz-in { from { opacity: .35; transform: translateY(.4rem); } }

@container kz (min-width: 700px) {
  .kz-kaart { column-gap: 4rem; padding-left: 2.8rem; padding-right: 2.8rem; }
  .kz-naam { flex: 1 0 auto; min-width: max-content; }
  .kz-midden { flex: 0 0 auto; }
  .kz-koop { flex: 1 0 auto; min-width: max-content; flex-direction: column; align-items: flex-end; text-align: right; gap: 1.2rem; }
  .kz-kaart .kz-foto { display: none; }
  .kz-kaart.met-foto .kz-foto { display: block; flex: 0 0 16rem; }
  .kz-kenmerk { margin-top: 1rem; max-width: 30rem; font-size: 1.3rem; }
  .kz-kaart .kz-titel { font-size: 3.4rem; }
  .kz-kaart .kz-cijfer { padding: 0 1.6rem; }
  .kz-kaart .kz-cijfer:first-child { padding-left: 0; }
  .kz-kaart .kz-cijfer dd { font-size: 2.4rem; }
  .kz-prijs strong { font-size: 1.8rem; }
}

@container kz (min-width: 700px) {
  .kz-kaart.twee { display: grid; grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "naam koop" "midden midden"; column-gap: 3.2rem; row-gap: 2rem; align-items: center; }
  .kz-kaart.twee.met-foto { grid-template-columns: minmax(0, 1fr) max-content 18rem; grid-template-areas: "naam koop foto" "midden midden foto"; }
  .kz-kaart.twee .kz-naam { grid-area: naam; }
  .kz-kaart.twee .kz-midden { grid-area: midden; }
  .kz-kaart.twee .kz-koop { grid-area: koop; }
  .kz-kaart.twee .kz-foto { grid-area: foto; align-self: stretch; aspect-ratio: auto; min-height: 12rem; }
}

.kz-foto { position: relative; }
.kz-foto-label {
  position: absolute; left: .8rem; bottom: .8rem; z-index: 1; padding: .4rem .9rem; border-radius: 99rem;
  background: rgba(10, 10, 10, .58); color: #FFFFFF; font: 500 1rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  pointer-events: none;
}

.vervolg { padding: var(--ruimte) 0; }
.vervolg-vak {
  display: grid; justify-items: center; align-content: center; gap: 2rem; min-height: 36rem; padding: 6rem 3.2rem;
  border: 1px dashed rgba(36, 64, 47, .35); border-radius: 2.4rem; background: rgba(36, 64, 47, .03); text-align: center;
}
.vervolg-vak h2 { max-width: 64rem; }
.vervolg-zin { margin: 0; font: 400 1.7rem/1.5 var(--sans); color: var(--taupe-tekst); }

@container kz (max-width: 699px) {
  .kz-cijfers { grid-template-columns: 1fr; width: 100%; }
  .kz-kaart .kz-cijfer { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1.6rem; padding: 1.1rem 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .kz-kaart .kz-cijfer + .kz-cijfer { border-left: 0; }
  .kz-kaart .kz-cijfer:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .kz-kaart .kz-cijfer dd { font-size: 2rem; }
  .kz-kaart .kz-titel { font-size: min(3.2rem, 6.3cqi); }
}
@media (max-width: 649px) { .kop-inschrijven { letter-spacing: .03em; } }

.inschrijven { background: var(--gebroken-wit); }
.inschrijven h2 { color: var(--taupe); }
.veld select {
  display: block; width: 100%; margin: 0; padding: 1rem 0 2rem; border: 0; border-radius: 0; background: transparent;
  -webkit-appearance: none; appearance: none; outline: none; color: var(--taupe-donker);
}
.veld select {
  padding-right: 3.2rem; cursor: pointer; text-overflow: ellipsis;
  font: 300 2rem/1.3 var(--serif); letter-spacing: -.01em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2324402F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .2rem top 1.1rem; background-size: 2rem 2rem;
}
@media (min-width: 1024px) { .veld select { font-size: 2.2rem; } }
.veld select.is-leeg, .veld select option[value=""] { color: rgba(36, 64, 47, .55); }
.veld select option { color: var(--taupe-donker); font-family: var(--sans); font-size: 1.5rem; }
.veld input::placeholder { color: rgba(36, 64, 47, .45); }
.ins-demo { margin: 0; font-size: 1.3rem; line-height: 1.5; color: var(--taupe-tekst); }

@media (prefers-reduced-motion: reduce) {
  .kz-raster polygon { stroke-dashoffset: 0; }
  .kz-badge { transition: opacity .2s; }
}

.nacht { position: relative; overflow: hidden; background: var(--nacht); color: var(--wit); }
.nacht-beeld { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
@media (min-width: 650px) { .nacht-beeld { aspect-ratio: 16 / 9; } }
.nacht-beeld picture { display: block; width: 100%; height: 100%; }
.nacht-beeld img {
  width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%;
  transform: scale(calc(1.06 - .06 * var(--p, 1))); transform-origin: 45% 55%;
}
.nacht-beeld::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 16, 13, .3) 0%, rgba(10, 16, 13, 0) 32%),
    linear-gradient(0deg, rgba(10, 16, 13, .38) 0%, rgba(10, 16, 13, 0) 20%);
}
.nacht-inhoud { position: absolute; top: 2.8rem; left: var(--rand); right: var(--rand); z-index: 1; }
.nacht-inhoud .label { color: var(--heide-licht); }
.nacht-inhoud h2 { margin-top: 1.6rem; color: var(--wit); max-width: 14ch; }
.nacht-onderschrift {
  position: absolute; right: var(--rand); bottom: 1.8rem; z-index: 1; max-width: 36rem; margin: 0; text-align: right;
  font-size: 1rem; color: rgba(255, 255, 255, .72);
}
@media (min-width: 650px) { .nacht-inhoud { top: 4.8rem; } .nacht-onderschrift { bottom: 2.4rem; } }
@media (min-width: 1024px) {
  .nacht-inhoud { top: 5vw; }
  .nacht-inhoud h2 { margin-top: 2rem; font-size: clamp(5.6rem, 4.6vw, 8.8rem); }
}

.stelling .wrap .label { color: var(--heide-licht); }

.kz-kenmerk { max-width: 44rem; }

.kz .kz-kaart { padding-top: 2rem; padding-bottom: 2.2rem; }
@container kz (min-width: 1000px) {
  .kz .kz-kaart .kz-galerij { min-height: 21rem; }
}