:root {
  --gebroken-wit: #F5F1E6;
  --taupe: #2B4723;
  --taupe-tekst: #5E5A4C;
  --taupe-donker: #1E2A18;
  --taupe-lijn: rgba(43, 71, 35, .2);
  --nacht: #2E4B26;
  --nacht-licht: #3B5E31;
  --messing: #D4B67E;
  --messing-tekst: #7E6230;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
}

.kop.vast { background: rgba(245, 241, 230, .9); }
.kop.donker.vast { background: rgba(46, 75, 38, .9); }
.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-beeld::after { display: none; }
@media (min-width: 1024px) { .held-boven .held-titel { font-size: 6.8rem; } }
@media (max-width: 649px) { .held-boven { padding-top: calc(var(--kop, 7.2rem) + 3.2rem); } }
.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); }

.plaats { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.plaats-label {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 1rem; padding: 1rem 1.8rem 1rem 1.4rem;
  border-radius: 99rem; font: 500 1.2rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.plaats-label::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; background: currentColor; opacity: .8; }
.plaats-zin { position: absolute; left: 0; right: 0; bottom: 2.4rem; margin: 0; padding: 0 2.4rem; text-align: center; font: 400 1.4rem/1.4 var(--sans); }
.held-beeld .plaats {
  background:
    radial-gradient(60% 80% at 22% 18%, rgba(206, 232, 120, .32), transparent 70%),
    radial-gradient(55% 70% at 82% 88%, rgba(30, 44, 4, .5), transparent 72%),
    linear-gradient(135deg, var(--nacht-licht), var(--nacht));
}
.held-beeld .plaats::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, .09) 1px, transparent 1.4px);
  background-size: 2.4rem 2.4rem;
}
.held-beeld .plaats-label { color: #FFFFFF; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.held-beeld .plaats-zin { color: rgba(255, 255, 255, .78); }
.js .held-boven .held-beeld .plaats { transform: scale(1.12); transition: transform 2.6s var(--uit) .1s; }
.js .geladen .held-boven .held-beeld .plaats { transform: none; }

.kz-beeld .plaats {
  background:
    linear-gradient(rgba(43, 71, 35, .08) 1px, transparent 1px) 0 0 / 4.8rem 4.8rem,
    linear-gradient(90deg, rgba(43, 71, 35, .08) 1px, transparent 1px) 0 0 / 4.8rem 4.8rem,
    radial-gradient(70% 90% at 30% 25%, rgba(255, 255, 255, .7), transparent 70%),
    linear-gradient(160deg, #EFEADC, #E2DAC6);
}
.kz-beeld .plaats-label { color: var(--nacht); background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px rgba(46, 75, 38, .22); }
.kz-beeld .plaats-zin { color: rgba(30, 42, 24, .66); }

.intro-merk { font-size: 5.6rem; white-space: nowrap; }
@media (min-width: 650px) { .intro-merk { font-size: 10rem; } }
@media (min-width: 1024px) { .intro-merk { font-size: 13.6rem; } .intro-links { left: 6%; } .intro-rechts { right: 6%; } }
@media (orientation: portrait) {
  .intro-links { top: calc(50% - 5.6rem); }
  .intro-rechts { top: calc(50% + 5.6rem); }
}
@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 4.8rem; }
@media (min-width: 1024px) { .kz { padding-bottom: 8rem; } }
.kz-boven { margin-bottom: 3.2rem; padding: 0 var(--rand); }
@media (min-width: 1024px) { .kz-boven { padding: 0; } }
.kz-boven h2 { margin-top: 1.6rem; }
.kz-uitleg { margin: 1.2rem 0 0; font: 400 1.6rem/1.5 var(--sans); }
@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, .kz-uitleg-leeg { display: none; }
@media (hover: none) { .kz-uitleg-muis { display: none; } .kz-uitleg-tik { display: inline; } }
.kz-leeg .kz-uitleg-muis, .kz-leeg .kz-uitleg-tik { display: none; }
.kz-leeg .kz-uitleg-leeg { display: inline; }
.kz-leeg .kz-beeld { cursor: default; }
.kz-leeg .kz-pijl[hidden] { display: none; }

.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: 1600 / 900; user-select: none; -webkit-user-select: none; overflow: hidden; }
.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:not(.kz-leeg) .kz-beeld { width: 150vw; }
}
@media (max-width: 1023px) { .kz-leeg .kz-beeld { border-radius: 1.6rem; } .kz-leeg .kz-scroller { margin: 0 var(--rand); } }

.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 { stroke: rgba(6, 10, 8, .32); stroke-width: calc(3.6px * var(--lijn, 1)); }
.kz-rand-boven { stroke: rgba(255, 255, 255, .96); stroke-width: calc(1.7px * var(--lijn, 1)); }
.kz-raster .is-aan .kz-rand-onder { stroke: rgba(6, 10, 8, .45); stroke-width: calc(5.4px * var(--lijn, 1)); }
.kz-raster .is-aan .kz-rand-boven { stroke: var(--wit); stroke-width: calc(2.8px * var(--lijn, 1)); }
.kz-raster .is-vast .kz-rand-onder { stroke: rgba(6, 10, 8, .5); stroke-width: calc(6px * var(--lijn, 1)); }
.kz-raster .is-vast .kz-rand-boven { stroke: var(--wit); stroke-width: calc(3.2px * 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 .6s var(--zacht); }
.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(10, 18, 6, .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-weg-vlak { fill: rgba(6, 12, 4, .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, 22, 8, .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, 2, .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;
  color: var(--wit); font: 500 1.3rem/1 var(--sans);
  opacity: 0; transform: translate(-50%, -50%) scale(.6);
  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%, -50%); }

.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; }
.kz-naam, .kz-midden, .kz-koop { 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;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .3s var(--uit), transform .3s var(--uit);
}
.kz-pijl:active { transform: scale(.94); }
.kz-pijl:focus-visible { outline: 1px solid; 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); }
.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;
}
.kz-status[hidden] { display: none; }
.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, .kz-status[data-stand="optie"] .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); }

.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; }
@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; 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); }
.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); white-space: nowrap; }
.kz-knop { min-height: 4.4rem; }

.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;
}

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

@container kz (min-width: 70rem) {
  .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-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 (max-width: 69.9rem) {
  .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; }
  .kz-kaart .kz-cijfer + .kz-cijfer { border-left: 0; }
  .kz-kaart .kz-cijfer:last-child { border-bottom: 1px solid; }
  .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; } }

.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(43, 71, 35, .38); border-radius: 2.4rem; background: rgba(43, 71, 35, .035); 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); }

.inschrijven { background: var(--gebroken-wit); }
.inschrijven h2 { color: var(--taupe); }
.veld select {
  display: block; width: 100%; margin: 0; padding: 1rem 3.2rem 2rem 0; border: 0; border-radius: 0; background: transparent;
  -webkit-appearance: none; appearance: none; outline: none; color: var(--taupe-donker); 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='%234A6A0C' 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(30, 42, 24, .5); }
.veld select option { color: var(--taupe-donker); font-family: var(--sans); font-size: 1.5rem; }
.veld input::placeholder { color: rgba(30, 42, 24, .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; }
  .js .held-boven .held-beeld .plaats { transform: none; }
}

.held-boven .held-inhoud .label, .gb-kop .label { color: var(--messing-tekst); }
.stelling .label { color: var(--messing); }