:root {
  --gebroken-wit: #F6F1F0;
  --taupe: #7A1F4B;
  --taupe-tekst: #6E5A63;
  --taupe-donker: #2A1420;
  --taupe-lijn: rgba(122, 31, 75, .2);
  --nacht: #2E1626;
  --nacht-licht: #3D2133;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
}

.kop.vast { background: rgba(246, 241, 240, .9); }
.kop.donker.vast { background: rgba(46, 22, 38, .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; } }
@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: 42% 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: 6rem; white-space: nowrap; }
@media (min-width: 650px) { .intro-merk { font-size: 10rem; } }
@media (min-width: 1024px) { .intro-merk { font-size: 14rem; } .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); }
}

.stelling h2 { text-wrap: balance; }
.stelling .intro-zin { text-wrap: balance; }
.stelling .knoppen { align-items: center; column-gap: 2.8rem; }
.stelling .knop-tekst { color: var(--wit); }

.kz { scroll-margin-top: var(--kop, 7.2rem); }

.kz { position: relative; padding: 8rem 0 0; background: var(--nacht); color: var(--wit); }
.kz[hidden] { display: none; }
.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 ." "kop uitleg"; align-items: end; column-gap: 4rem; }
  .kz-boven .label { grid-area: label; align-self: center; }
  .kz-boven h2 { grid-area: kop; }
  .kz-uitleg { grid-area: uitleg; margin: 0 0 .8rem; text-align: right; }
  .kz + .kz { padding-top: 8rem; }
  .kz + .kz .kz-blok::before { content: ""; position: absolute; top: -4.8rem; left: 0; right: 0; height: 1px; background: rgba(20, 20, 20, .1); }
  .kz-zij.kz-spiegel .kz-blok { grid-template-columns: var(--kz-kaartbreed, minmax(0, 1fr)) var(--kz-foto, minmax(0, 1.08fr)); grid-template-areas: "boven boven" "kaart beeld" "bron bron"; }
}
@media (max-width: 1023px) { .kz + .kz { padding-top: 6.4rem; } }
.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: 2600 / 1463; 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: 200vw; }
}

.kz { --rand-onder: 4.6px; --rand-boven: 1.7px; --rand-onder-kleur: rgba(20, 8, 14, .62); }
.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(20, 8, 14, .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(20, 8, 14, .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(20, 8, 14, .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 .35s var(--uit); }
.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(20, 8, 14, .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(30, 12, 24, .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(24, 14, 20, .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(10, 4, 8, .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(20, 8, 14, .4);
  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; 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-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-knop[hidden] { display: none; }

@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 .kz-rest { font-weight: 500; color: rgba(20, 20, 20, .78); }

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

@media (min-width: 1024px) {
  .kz-zij .kz-kaart .kz-cijfers { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; }
  .kz-zij .kz-kaart .kz-cijfer { padding: 0 1rem; }
  .kz-zij .kz-kaart .kz-cijfer:first-child { padding-left: 0; }
  .kz-zij .kz-kaart .kz-cijfer dd { font-size: min(2.4rem, 6.4cqi); }
  .kz-zij .kz-kaart .kz-cijfer dt { letter-spacing: .06em; }
}

.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-galerij[data-vorm="d"] { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr; }
.kz-galerij[data-vorm="e"] { grid-template-columns: 1fr 1.4fr; grid-template-rows: 1fr; }
.kz-galerij[data-vorm="f"] { grid-template-columns: 1fr 1.5fr; grid-template-rows: 1fr 1fr; }
.kz-galerij[data-vorm="f"] .kz-tegel:nth-child(1) { grid-column: 2; grid-row: 1 / 3; }
.kz-galerij[data-vorm="f"] .kz-tegel:nth-child(2) { grid-column: 1; grid-row: 1; }
.kz-galerij[data-vorm="f"] .kz-tegel:nth-child(3) { grid-column: 1; grid-row: 2; }
@container kz (max-width: 69.9rem) {
  .kz .kz-galerij[data-aantal="2"] { grid-template-columns: 1fr; grid-template-rows: 1.4fr 1fr; height: 38rem; }
  .kz .kz-galerij[data-aantal="2"] .kz-tegel:nth-child(n) { grid-column: 1; grid-row: auto; }
}

.achter { position: relative; padding: 6.4rem 0 4.8rem; background: #FFFFFF; color: #141414; scroll-margin-top: var(--kop, 7.2rem); }
.achter-blok { position: relative; margin: 0 auto; padding: 0 var(--rand); }
.achter-boven { margin-bottom: 2.4rem; }
.achter-boven .label { color: rgba(20, 20, 20, .6); }
.achter-boven h2 { margin-top: 1rem; color: #141414; }
.achter-rij { display: grid; gap: 3.2rem; }
.achter-foto { margin: 0; }
.achter-foto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1.6rem; background: #F1ECEB; }
.achter-foto figcaption.label { margin-top: 1.4rem; color: rgba(20, 20, 20, .6); }
@media (min-width: 768px) { .achter-rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.4rem; } }
@media (min-width: 1024px) {
  .achter { padding-top: 8rem; }
  .achter-blok { width: calc(100% - 2 * var(--rand)); padding: 0; }
  .achter-blok::before { content: ""; position: absolute; top: -4.8rem; left: 0; right: 0; height: 1px; background: rgba(20, 20, 20, .1); }
  .achter-boven { margin-bottom: 3.2rem; }
  .achter-boven h2 { margin-top: 1.6rem; font-size: 5.2rem; }
  .achter-rij { gap: 3.2rem; }
}

.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(122, 31, 75, .35); border-radius: 2.4rem; background: rgba(122, 31, 75, .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: 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 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='%237A1F4B' 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(122, 31, 75, .55); }
.veld select option { color: var(--taupe-donker); font-family: var(--sans); font-size: 1.5rem; }
.veld input::placeholder { color: rgba(122, 31, 75, .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; }
  .kz-weg-label { transition: none; }
}