.gb-over { margin: 2.8rem 0 0; padding: 0 var(--rand); }
.gb-over-vak { position: relative; max-width: 168rem; margin: 0 auto; aspect-ratio: 1800 / 1013; border-radius: 1.6rem; overflow: hidden; background: var(--nacht); }
.gb-over-vak img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gb-over-vak svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gb-vlak-onder { fill: none; stroke: rgba(12, 14, 8, .45); stroke-width: 4.2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.gb-vlak { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .95); stroke-width: 2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; cursor: pointer; outline: none; transition: fill .25s var(--uit), stroke-width .25s var(--uit); }
.gb-vlak.is-aan { fill: rgba(255, 255, 255, .3); stroke: #fff; stroke-width: 3.2px; }
.gb-pil { position: absolute; transform: translate(-50%, -50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .6rem 1.1rem; border-radius: 1rem; background: rgba(255, 255, 255, .94); color: var(--taupe-donker); text-align: center; box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .18); transition: background .25s var(--uit), color .25s var(--uit); white-space: nowrap; }
.gb-pil.is-aan { background: var(--nacht); color: #fff; }
.gb-pil-naam { font: 500 1.4rem/1.2 var(--sans); }
.gb-pil-aantal { font: 400 1.1rem/1.2 var(--sans); opacity: .75; }
@media (max-width: 649px) { .gb-pil { padding: .3rem .6rem; border-radius: .7rem; } .gb-pil-naam { font-size: 1rem; } .gb-pil-aantal { display: none; } }

#woningen { background: #fff; padding: 6rem 0 2rem; }
.gb { scroll-margin-top: 8rem; padding: 5rem var(--rand) 6rem; max-width: 168rem; margin: 0 auto; border-top: 1px solid var(--taupe-lijn); }
.gb:first-child { border-top: 0; }
.gb-kop h2 { margin: 1rem 0 0; color: var(--taupe); }
.gb-zin { max-width: 62rem; margin: 1.2rem 0 0; font: 400 1.7rem/1.55 var(--sans); color: var(--taupe-tekst); }

.gb-wrap { margin-top: 3.2rem; max-width: min(120rem, max(72rem, calc((100svh - var(--kop) - 20rem) * 1800 / 1013))); }
.gb-foto { position: relative; margin: 0; border-radius: 1.6rem 1.6rem 0 0; overflow: hidden; aspect-ratio: 1800 / 1013; background: var(--gebroken-wit); }
.gb-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gb-foto .gb-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gb-v-onder { fill: none; stroke: rgba(12, 14, 8, .42); stroke-width: 3.2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
.gb-v { fill: rgba(255, 255, 255, 0); stroke: rgba(255, 255, 255, .92); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; outline: none; transition: fill .2s, stroke-width .2s; pointer-events: all; }
.gb-cel:hover .gb-v, .gb-cel.is-getoond .gb-v, .gb-v:focus-visible { fill: rgba(255, 255, 255, .3); stroke: #fff; stroke-width: 2.4px; }
.gb-cel.is-vast .gb-v { fill: rgba(255, 255, 255, .42); stroke: #fff; stroke-width: 3px; }
.gb-cel.is-vast .gb-v-onder { stroke-width: 4.6px; }
.gb-cel.st-verkocht .gb-v, .gb-cel.st-verkocht:hover .gb-v { cursor: default; stroke-width: 1.5px; }
.gb-v-nr { font: 600 var(--nr, 22px) var(--sans); fill: #fff; paint-order: stroke; stroke: rgba(20, 20, 10, .6); stroke-width: calc(var(--nr, 22px) * .2); pointer-events: none; opacity: 0; transition: opacity .15s; }
.gb-cel:hover .gb-v-nr, .gb-cel.is-getoond .gb-v-nr, .gb-cel.is-vast .gb-v-nr { opacity: 1; }

.gb-kaart { padding: 2.4rem 2.8rem; border-radius: 0 0 1.6rem 1.6rem; background: #F4F3F1; }
.gb-kaart-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 1.6rem; }
.gb-kaart-titel { margin: 0; font: 300 3rem/1.1 var(--serif); color: var(--taupe); }
.gb-kaart:not(.is-gekozen) .gb-kaart-titel { font-size: 2.4rem; color: var(--taupe-donker); }
.gb-kaart-stand { margin: 0; font: 500 1.3rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--taupe-tekst); }
.gb-kaart-stand.st-beschikbaar { color: #2B4723; }
.gb-kaart-stand.st-optie, .gb-kaart-stand.st-onder-voorbehoud { color: #9A6A00; }
.gb-kaart-zin { margin: 1rem 0 0; font: 400 1.5rem/1.5 var(--sans); color: var(--taupe-tekst); }
.gb-cijfers { display: flex; flex-wrap: wrap; gap: 1.6rem 3.2rem; margin: 2rem 0 0; }
.gb-cijfer dt { font: 400 1.2rem/1.2 var(--sans); color: var(--taupe-tekst); }
.gb-cijfer dd { margin: .3rem 0 0; font: 500 1.9rem/1.2 var(--sans); color: var(--taupe-donker); }
.gb-kaart-knop { margin-top: 1.8rem; }
.gb-volgt-zin { margin: 1rem 0 0; font: 400 1.6rem/1.5 var(--sans); color: var(--taupe-tekst); }
.gb-stip { display: inline-block; position: relative; width: .8rem; height: .8rem; margin: 0 .7rem .15rem 0; border-radius: 50%; background: #6E9A4A; vertical-align: middle; }
.st-beschikbaar .gb-stip::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid #6E9A4A; animation: gb-puls 2.8s ease-out infinite; }
@keyframes gb-puls { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .st-beschikbaar .gb-stip::after { animation: none; } }
.st-optie .gb-stip, .st-onder-voorbehoud .gb-stip { background: #E0A84E; }
.st-verkocht .gb-stip { background: #9A9A90; }
.gb-indicatief { max-width: 90rem; margin: 1.2rem 0 0; font: 400 1.25rem/1.45 var(--sans); color: var(--taupe-tekst); opacity: .85; }

@media (min-width: 700px) and (max-width: 1023px) {
  .gb-kaart.is-gekozen { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 3.2rem; align-items: end; }
  .gb-kaart.is-gekozen .gb-kaart-kop { grid-column: 1 / -1; }
  .gb-kaart.is-gekozen .gb-kaart-knop { margin-top: 0; }
}

@media (min-width: 1024px) {
  .gb-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 34rem; column-gap: 2.4rem; align-items: stretch;
    max-width: min(100%, calc((100svh - var(--kop) - 7rem) * 1800 / 1013 + 36.4rem)); }
  .gb-foto { align-self: start; border-radius: 1.6rem; }
  .gb-kies { display: flex; min-width: 0; }
  .gb-kaart, .gb-kaart.is-gekozen { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 3.2rem 3rem; border-radius: 1.6rem; }
  .gb-kaart-kop { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .gb-kaart-titel { font-size: 3.2rem; }
  .gb-kaart:not(.is-gekozen) .gb-kaart-titel { font-size: 2.6rem; }
  .gb-kaart-zin { margin-top: 1.4rem; }
  .gb-cijfers { flex-direction: column; gap: 0; margin-top: 2.4rem; }
  .gb-cijfer { display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem; padding: 1.2rem 0; border-top: 1px solid rgba(30, 42, 24, .1); }
  .gb-cijfer:last-child { border-bottom: 1px solid rgba(30, 42, 24, .1); }
  .gb-cijfer dd { margin: 0; font-size: 1.7rem; text-align: right; }
  .gb-kaart-knop { align-self: flex-start; margin-top: 2.4rem; }
}

.gb-donker { fill: #06100B; opacity: 0; pointer-events: none; will-change: opacity; transition: opacity 1.1s var(--uit); }
.gb-deksel { fill: #06100B; opacity: 0; pointer-events: none; will-change: opacity; transition: opacity .5s var(--uit); }
.gb-vlak-onder, .gb-vlak { opacity: 0; stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: opacity .6s var(--uit), stroke-dashoffset 1.2s var(--uit), fill .45s var(--uit), stroke-width .25s var(--uit); }
.gb-over-vak:not(.is-onthuld) .gb-vlak { pointer-events: none; }
.gb-over-vak .gb-pil { opacity: 0; transform: translate(-50%, .8rem); transition: opacity .7s var(--uit), transform .9s var(--uit), background .25s var(--uit), color .25s var(--uit); }

.gb-over-vak.is-onthuld .gb-donker { opacity: .4; }
.gb-over-vak.is-onthuld .gb-vlak-onder, .gb-over-vak.is-onthuld .gb-vlak { opacity: 1; stroke-dashoffset: 0; transition-delay: calc(var(--i) * .1s + .15s); }
.gb-over-vak.is-onthuld .gb-vlak { animation: gb-oplicht 1.3s var(--uit) both; animation-delay: calc(var(--i) * .1s + .15s); }
.gb-over-vak.is-onthuld .gb-pil { opacity: 1; transform: translate(-50%, 0); transition-delay: calc(var(--i) * .1s + .45s); }
@keyframes gb-oplicht { 0% { fill: rgba(255, 255, 255, 0); } 30% { fill: rgba(255, 255, 255, .34); } 100% { fill: rgba(255, 255, 255, .06); } }

.gb-over-vak.is-klaar .gb-vlak-onder, .gb-over-vak.is-klaar .gb-vlak, .gb-over-vak.is-klaar .gb-pil { transition-delay: 0s; }
.gb-over-vak.is-klaar .gb-vlak { animation: none; }
.gb-over-vak.is-wijs .gb-donker { opacity: .62; transition-duration: .5s; }
.gb-over-vak .gb-deksel.is-uit { opacity: .62; }
.gb-over-vak .gb-vlak.is-uit, .gb-over-vak .gb-vlak-onder.is-uit { opacity: .28; }
.gb-over-vak .gb-pil.is-uit { opacity: .45; }
.gb-over-vak .gb-vlak.is-aan { fill: rgba(255, 255, 255, .1); stroke-width: 3.2px; }
@media (prefers-reduced-motion: reduce) {
  .gb-donker, .gb-deksel, .gb-vlak-onder, .gb-vlak, .gb-over-vak .gb-pil { transition: none !important; animation: none !important; }
}

.gb-kaart .gb-galerij { margin-top: 2rem; height: 24rem; }
@media (min-width: 700px) and (max-width: 1023px) { .gb-kaart.is-gekozen .gb-galerij { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .gb-kaart:has(.gb-galerij), .gb-kaart.is-gekozen:has(.gb-galerij) { justify-content: flex-start; }
  .gb-kaart .gb-galerij { flex: 1 1 auto; height: auto; min-height: 16rem; margin-top: 2.4rem; }
}

@media (min-width: 1024px) {
  .gb[data-gebouw="P"] .gb-wrap { grid-template-columns: 34rem minmax(0, 1fr); }
  .gb[data-gebouw="P"] .gb-foto { grid-column: 2; grid-row: 1; }
  .gb[data-gebouw="P"] .gb-kies { grid-column: 1; grid-row: 1; }
}

.is-scrollen .gb-over-vak svg, .is-scrollen .gb-svg { pointer-events: none; }
.gb-over-vak { contain: paint; }