/* CSS Document */
#theBody.contact #pageBlock1{
	width: 100%!important;
}
.page-block{
    z-index: 1;
}
#header .container,
.page-block.light{
	max-width: 1920px; position: relative;
}
.footer-menu-1,
.page-block.cta-sticker .page-block-link{
	display: none;
}
.carouselState{
	display: none!important;
}
#pageBlock0,
.page-block.gallery.slideshow{
	margin-bottom: 5em; max-width: 1920px; 
}

.page-block.gallery.slideshow .page-block-module .carousel-indicators{
	bottom: -5em; height: 5em; gap:15px;
}

.page-block.gallery.slideshow .page-block-module::after{
	position: absolute; top: 30px; left: auto; right: 30px; width: 70%; height: 70%;
	background: url("../img/icon.svg?2"); content: ''; display: block; 
	z-index: 1000;
	background-repeat: no-repeat; background-position: center right;
	background-size: contain;
}

.page-block.list-click-detail .page-block-module{
    overflow: hidden;
}

.page-block.usps .block .block-caption .block-icon h3,
.page-block.usps .block .block-caption .block-icon h3 a,
.social-icon a,
.footerAddress h2,
.footer-menu h2,
.footer-socials h2,
.page-block.usps.medium h2,
.page-block.quote.light .page-block-caption .page-block-txt p,
.page-block.quote.medium .page-block-caption .page-block-txt p{
    background:  var(--basecolorMedium);
	background: rgb(172,93,45);
	background: -moz-linear-gradient(90deg, rgba(172,93,45,1) 0%, rgba(89,33,0,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(172,93,45,1) 0%, rgba(89,33,0,1) 100%);
	background: linear-gradient(90deg, rgba(172,93,45,1) 0%, rgba(89,33,0,1) 100%);
    color: transparent;
    background-clip: text;
}
.page-block.quote.light .page-block-caption .page-block-txt p,
.page-block.quote.medium .page-block-caption .page-block-txt p{
	padding-bottom: 0.3em;
}
.page-block.quote.light h2{
    color: #ffffff;
}

.page-block.with_block_image.left .page-block-image{
	padding-left: 0px;
}
.page-block.with_block_image.right .page-block-image{
	padding-right: 0px;
}

/*.page-block.slider .grapWrapper::after,
.page-block.default .page-block-image::after{
	position: absolute; top: 0px; left: auto; right: 0px; width: 100%; height: 100%;
	background: url("../img/strepen.png"); content: ''; display: block; 
	z-index: 100000001;
	background-repeat: no-repeat; background-position: center left;
	background-size: contain; pointer-events: none;
}*/

#cta---naar-het-project::before{
    width: 400px; max-width: 20vw; height: 400px;
    content: ''; background: #a5ac8d; display: block;
    position: absolute; top: auto; bottom: 100%; left: auto; right: 0px;
    opacity: 0.4; z-index: 0;
}

#cta---naar-het-project::after{
    width: 200px; max-width: 10vw; height: 400px;
    content: ''; background: #a5ac8d; display: block;
    position: absolute; top: auto; bottom: calc(100% + 400px - 10vw); left: auto; right: 0px;
    opacity: 0.4; z-index: 0;
}


@media (min-width: 768px) {
#pageBlockPage::after{
    width: 200px; max-width: 20vw; height: 100vh;
    content: ''; background: #a5ac8d; display: block;
    position: fixed; top: 0px; left:  0px;
    opacity: 1; z-index: 0;
    
    background: url("../img/strepen.png"); content: '';
	background-repeat: no-repeat; background-position: top left;
    background-size: cover;
}
}
#pageBlockPage::before{
    width: 300px; max-width: 30vw; height: 70vh;
    content: ''; background: #a5ac8d; display: block;
    position: fixed; top: 0px; left:  0px;
    opacity: 0.4; z-index: 0;
}


.with_page_image.default .page-block-page_image{
    background: var(--basecolor); overflow: hidden; aspect-ratio: 10/3; min-height: 300px;
}
.with_page_image.default .page-block-page_image img{
    opacity: 1;
}
.page-block-page_image .page-block-header-caption{
    mix-blend-mode: normal;
    text-shadow: 1px 1px 1px  var(--textcolor);
}

.footer{
    position: relative;
}
.page-block.slider .grapWrapper a{
	pointer-events: none;
}
	.page-block.gallery.slideshow{
        pointer-events: none;
	}

@media (max-width: 600px) {
    .page-block.with_block_image .page-block-caption {
		padding: 30px;
    }
}
@media (max-width: 767px) {
	.page-block.gallery.slider .page-block-caption{
		padding-bottom: 30px;
    }
	.page-block.gallery.slideshow .carousel .carousel-item{
		aspect-ratio: 3/4;
	}
	.page-block.gallery.slideshow .carousel .carousel-item img {
		object-fit: cover;
	}
	.page-block.gallery.slideshow .carousel .carousel-item img.second_image {
		display: none;
	}
    
    
    #theMain .navbar-nav li a.menu-link, #extraMenu .navbar-nav li a.menu-link{
        font-family: "acumin-pro", sans-serif;
	    font-weight: 400; font-size: 22px;
    }
}


@media (min-width: 768px) {
	.page-block.gallery.slideshow{
		margin-bottom: 8em;
	}
	.page-block.gallery.slideshow .carousel .carousel-item{
		aspect-ratio: 1920/1080;
	}
	.page-block.gallery.slideshow .carousel .carousel-item img {
		width: 75%; height: 100%; opacity: 0;
		object-fit: cover;
	}
	.page-block.gallery.slideshow .carousel .carousel-item img.second_image {
		width: calc(25% + 30px); height: 75%;
		object-fit: cover; left: auto; right: 0px; position: absolute; top: auto; bottom: 0px;
	}
	.page-block.cta-sticker{
		top: calc(1080/1920 * 100vw - 140px); width: auto; left: 0px; right: auto; max-width: none; height: 140px;
		align-content: center; align-items: center;
	}
    .footer-menu {
        grid-column: 2 / span 1;
    }
}


@media (min-width: 991px) {
    .footer-menu{
        grid-column: span 2;
    }
    .footerAddress{
        padding-left: 30px;
    }
}
@media (min-width: 1920px) {
	.page-block.cta-sticker{
		top: calc(1080px - 140px); left: 50%; margin-left: -960px;
	}
}

.page-block.quote{
	padding: 0px 60px; background: none;
}
.page-block.quote .page-block-caption .page-block-ttl{
	order: 0;
}

@media (min-width: 991px) {
    .page-block .page-block-caption {
        padding: 30px 60px;
    }
}
@media (min-width: 1280px) {
    .page-block .page-block-caption {
        padding: 30px 120px;
    }
	.page-block.cta-fixed .page-block-caption{
		padding-right: 60px;
	}
	.page-block.cta-fixed .page-block-caption .page-block-link{
		padding: 0px;
	}
}



@media (min-width: 1080px) {
    #verkoopinformatie---de-makelaar,
    #verkoopinformatie---financieel-advies{
        width: 960px; margin-left: calc(50% - 480px); margin-right: calc(50% - 480px); padding: 45px
    }
    #verkoopinformatie---de-makelaar.with_block_image,
    #verkoopinformatie---financieel-advies.with_block_image{
        padding: 45px 0px;
    }
    #verkoopinformatie---de-makelaar .page-block-caption,
    #verkoopinformatie---financieel-advies .page-block-caption{
        padding: 30px;
    }
    #verkoopinformatie---de-makelaar.with_block_image .page-block-caption,
    #verkoopinformatie---financieel-advies.with_block_image .page-block-caption{
        padding: 0px 60px;
    }
    #verkoopinformatie---de-makelaar.page-block.with_block_image .page-block-image, #verkoopinformatie---financieel-advies.page-block.with_block_image .page-block-image{
        width: 45%;
    }
    #verkoopinformatie---de-makelaar.page-block.with_block_image .page-block-caption, #verkoopinformatie---financieel-advies.page-block.with_block_image .page-block-caption{
        width: 55%;
    }
}















#theBody.woningzoeker #pageBlockPage::after,
#theBody.woningzoeker #pageBlockPage::before{
	display: none;
}



:root {
  --bg: #ffffff;
  --card-bg: #ffffff;
  --accent: #93A28D;
  --accent-soft: rgba(64, 84, 49, 0.08);
  --text: #000000;
  --muted: #93A28D;
  --available: #405431;
  --option: #E28350;   /* nieuw: onder optie */
  --taken: #c62828;
  --border-soft: #d8cfc7;
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.08);
}
* {
  box-sizing: border-box;
}

#theBody.woningzoeker .page-block-name h1{margin: 0px; padding: 0px;}


#woningsearch{
	display: none;
}
#header{
	position: absolute;
}

    .app {
      /*min-height: 	100vh;*/
      display: flex;
      flex-direction: column;
		width: 100%;
    }
.app .st0{
	stroke:#ffffff!important;
}
    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.85rem 5vw;
      border-bottom: 1px solid var(--border-soft);
      background: #ffffffee;
      backdrop-filter: blur(8px);
      position: sticky;
      top: 0;
      z-index: 20;
    }

    .brand {
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.8rem;
      color: var(--muted);
      display: flex;
      align-content: center;
      align-items: center;
      gap: 15px;
    }
    .brand object{
      width: 100%;
      height: auto;
      max-height: 45px;
      border-radius: 0;
      position: relative;
      z-index: 1;
    }

    .titel {
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.8rem;
      color: var(--muted);
      display: flex;
      align-content: center;
      align-items: center;
      gap: 15px;
    }

    .breadcrumbs {
      font-size: 0.8rem;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .breadcrumbs .crumb.current {
      color: var(--accent);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .stage {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 0px;
      gap: 0.75rem;
    }

    .svg-stage {
      width: 100%;
      max-width: 1440px;
      max-width: none;
      margin: 0 auto;
      background: none;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      border-radius: 0;
      overflow: hidden;
    }

    object#mainSvg {
      width: 100%;
      height: auto;
      max-height: min(72vh, 780px);
	  max-height: none;
      border-radius: 0;
      background: none;
      position: relative;
      z-index: 1;
    }

    /* Filter bar */

    .filter-bar {
      width: 100%;
      max-width: 1440px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.75rem;
	  padding: 15px 15px 0px;	
    }


    @media (min-width: 768px) {
    .filter-bar {
	  padding: 15px 30px;	
    }
    }
    .filter-bar-left {
      display: flex; width: 100%;
      align-items: center;
      gap: 0.5rem;
    }

    .view-select-wrapper {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted); flex-wrap: wrap; width: 100%;
    }

    .view-select {
      border-radius: 0;
      border: 1px solid var(--border-soft);
      background: #ffffff;
      padding: 0.35rem 0.75rem;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
      background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%;
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      padding-right: 1.5rem;
    }

    .filter-bar-right {
      display: flex;
      gap: 0.5rem;
    }

    .filter-btn {
      border-radius: 0;
      border: 1px solid var(--border-soft);
      background: #ffffff;
      padding: 0.35rem 0.75rem;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      font-size: 0.7rem;
      transition: background 0.15s ease, color 0.15s ease, border 0.15s ease,
        transform 0.1s ease;
    }

    .filter-btn:hover {
      border-color: var(--accent);
      color: #000000;
      transform: translateY(-1px);
    }

    .filter-btn.is-active {
      background: var(--accent);
      border-color: var(--accent);
      color: #ffffff;
    }

    /* -------- Popup overlay -------- */

    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      z-index: 58000000;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .overlay.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .unit-popup {
      max-width: 800px;
      width: 100%;
      max-height: 90vh;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 15px;
      background: var(--card-bg);
      border-radius: 0;
      padding: 1.5rem 1.75rem;
      box-shadow: var(--shadow-soft);
      position: relative;
      overflow: scroll;
      border: 1px solid var(--border-soft);
    }

    @media (max-width: 900px) {
      .unit-popup {
        grid-template-columns: minmax(0, 1fr);
        max-height: 100vh;
      }
    }

    .unit-popup-left,
    .unit-popup-right {
      position: relative;
      z-index: 1;
    }
    .unit-popup-left{
      padding-left: 15px;
	  align-items: center;
	align-content: center;
	display: flex;
	flex-wrap: wrap;
	}
    .unit-popup-right {
      padding: 0px;
    }
    .unit-title {
      margin: 0.75rem 0 0.4rem;
      font-size: 1.8rem;
      font-weight: normal;
		    
		color: var(--accent);
		width: 100%;
			
    }

    .unit-subtitle {
      margin: 0;
      font-size: 0.9rem;
      color: var(--muted);
		display: none;
		width: 100%;
    }

    .unit-grid {
      margin-top: 1.25rem;
      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 0.9rem 1.25rem;
      font-size: 0.86rem;
		width: 100%;
    }

    .unit-grid-label {
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 0.7rem;
      color: var(--muted);
      margin-bottom: 0.2rem;
    }

    .unit-grid-value {
      font-weight: 500;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 0.25rem 0.7rem;
      border-radius: 0;
      border: 1px solid transparent;
      background: #f7f7f7;
      margin-bottom: 0.5rem;
    }

    .status-pill span.dot {
      width: 6px;
      height: 6px;
      border-radius: 0;
    }

    .status-available {
      color: var(--available);
      border-color: rgba(27, 155, 75, 0.4);
      background: rgba(27, 155, 75, 0.06);
    }

    .status-available span.dot {
      background: var(--available);
    }

    .status-taken {
      color: var(--taken);
      border-color: rgba(198, 40, 40, 0.4);
      background: rgba(198, 40, 40, 0.06);
    }

    .status-taken span.dot {
      background: var(--taken);
    }

    .status-option {
      color: var(--option);
      border-color: rgba(255, 152, 0, 0.4);
      background: rgba(255, 152, 0, 0.06);
    }

    .status-option span.dot {
      background: var(--option);
    }

    /* Preview small in right column */

    .unit-preview {
      border-radius: 0px;
      border: 1px solid var(--border-soft);
      padding: 0.35rem;
      background: #fafafa;
      margin-bottom: 0.75rem;
        padding: 15px;
    }

    .unit-preview img {
      width: 100%;
      height: auto;
      object-fit: contain; object-position: center center;
      display: block;
      border-radius: 0;
    }

#popupPreviewImage{
}


    .unit-previewtext {
      margin-top: 0.5rem;
      font-size: 0.75rem;
      color: var(--textcolor);
      max-height: 5.5rem;
      overflow: hidden;
    }

    .unit-previewtext p{
		margin: 0px; padding: 0px;
    }

    .unit-previewtext h3 {
      margin: 0.25rem 0;
      font-size: 0.86rem;
      font-weight: 500;
      color: #000;
    }

    .unit-previewtext .projectName {
      display: none; /* fallback als de span tóch zou meekomen */
    }

    /* Floorplan inside left column */

    .floorplan-header {
      margin-top: 1.5rem;
      margin-bottom: 0.5rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
        display: none;
    }

    .floorplan-badge {
      font-size: 0.72rem;
      padding: 0.15rem 0 0.15rem 0.6rem;
      border-radius: 0;
      border: 0px solid var(--border-soft);
      background: none;
      color: var(--muted);
    }

    .floorplan-wrapper {
      border-radius: 0;
      padding: 0px;
      position: relative;
      overflow: hidden;
      max-height: 55vh;
		display: none!important;
    }

    object#floorplanSvg {
      width: 100%;
      height: auto;
      max-height: 50vh;
      display: block;
      border-radius: 0;
    }

    /* CTA column */

    .cta-stack {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-top: 0rem; padding-top: 0px; width: 100%; max-width: 360px;
    }

    .cta-btn {
      border-radius: 888px;
      padding: 0.65rem 0.9rem;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      border: 1px solid var(--accent);
      background: #ffffff;
      cursor: pointer;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      transition: background 0.15s ease, color 0.15s ease, border 0.15s ease,
        transform 0.1s ease;
      text-decoration: none!important;
      color: var(--accent);
    }

#btnFloorplan{
	display: none!important;
}

    .cta-btn span.label {
      flex: 1;
    }

    .cta-btn span.chevron {
      font-size: 0.9rem;
      color: var(--muted);
    }

    .cta-btn.primary {
      background: var(--specialcolor);
      border-color: var(--specialcolor);
      color: #ffffff;
    }

    .cta-btn.primary span.chevron {
      color: #fff;
    }

    .cta-btn.subtle {
      background: #fafafa;
    }

    .cta-btn:hover {
      /*transform: translateY(-1px);*/
      /*box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);*/
      color: var(--specialcolor);
      border: 1px solid var(--specialcolor);
    }
    .cta-btn.primary:hover{
      background: var(--textcolor);
      border-color: var(--textcolor);
      color: #ffffff;
    }

    .close-btn {
      position: absolute;
      top: 30px;
      right: 10px;
      z-index: 2;
      background: #ffffff;
      border-radius: 0;
      border: 0px solid var(--border-soft);
      color: var(--specialcolor);
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1.1rem;
      line-height: 1;
	  border: 0px solid var(--border-soft);
	  outline: none!important;
      /*transition: background 0.15s ease, transform 0.15s ease,
        box-shadow 0.15s ease;*/
    }

    .close-btn:hover {
      /*background: #f2f2f2;
      transform: translateY(-1px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);*/
    }

    .overlay-click-catcher {
      position: fixed;
      inset: 0;
      z-index: 0;
    }

    .unit-tooltip {
      position: absolute;
      z-index: 58000001; /* hoger dan overlay-bg, lager dan popup zelf */
      pointer-events: none;
      background: var(--textcolor);
      color: var(--bg);
      border-radius: 0px;
      border: 0px solid var(--border-soft);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
      padding: 0.75rem 0.9rem;
      font-size: 0.75rem;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.12s ease, transform 0.12s ease;
    }

    .unit-tooltip.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .unit-tooltip .tooltip-title {
      font-weight: 600;
      margin-bottom: 0.0rem;
      font-size: 1.2rem; line-height: 1em;
      color: var(--specialcolor);
    }

    .unit-tooltip .tooltip-title span {
      font-size: 0.9rem;
      color: var(--bg);
    }

    .unit-tooltip .tooltip-row {
      line-height: 1.3;
      color: var(--bg);
      font-size: 0.9rem;
    }
    .unit-tooltip .tooltip-row span {
		opacity: 0.8;
    }
    .unit-tooltip .tooltip-row p {
      color: var(--muted);
      font-size: 0.8rem;
    }

    .unit-tooltip .tooltip-status {
      margin-top: 0.2rem;
    }

    /* Kleur status tekst in tooltip */
    .unit-tooltip .tooltip-status--available {
      background: var(--basecolorMedium); padding: 4px 0px; text-align: center;
      color: var(--textcolor);
    }

    .unit-tooltip .tooltip-status--option {
      background: var(--option); padding: 4px 0px; text-align: center;
      color: var(--bg);
    }

    .unit-tooltip .tooltip-status--taken {
      background: var(--taken); padding: 4px 0px; text-align: center;
      color: var(--bg);
    }

	/* ---------- Legend panel ---------- */

	.legend-panel {
	  width: 100%;
	  max-width: 1440px;
	  margin: 0 auto 0;
	}

	.legend-panel-inner {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 0px;
	  align-items: flex-start;
	}



#viewLegend .legend-types{
  display:flex; width: 100%; flex-wrap: wrap;
  gap: 12px;
}
#viewLegend .legend-type-card{
  width:185px; 
  text-align:left;
}

	.legend-types-block {
	  display: flex; justify-content: flex-start; padding: 0px 15px; padding-bottom: 0px;
		flex-wrap: wrap;
	}

	.legend-status-block {
	   display: flex; justify-content: flex-start; padding: 15px 15px 15px 15px; 
		flex-wrap: wrap; display: none;
	}

    @media (min-width: 768px) {
	.legend-panel-inner {
	  gap: 1.25rem;
	}
	
	.legend-types-block {
	  flex: 2 1 260px; padding: 0px 30px; 
	}

	.legend-status-block {
	  flex: 1 1 220px; padding: 0px 30px 15px 30px; 
	}
	}

	.legend-heading {
	  margin: 0 0 0.5rem;
	  font-size: 0.8rem;
	  text-transform: uppercase;
	  letter-spacing: 0.12em;
		min-width: 100%; text-align: left;
	}

    @media (min-width: 960px) {
		
	.legend-status-block {
		justify-content: flex-end;
	}
		
	.legend-status-block .legend-heading{
		text-align: right;
	}
	}

    @media (min-width: 960px) {
		.cta-stack{
			flex-direction: column; gap: 15px; margin-top: 15px;
		}
		.cta-btn{
			width: 100%;
		}
	}
	/* grid met kaarten per type */
	.legend-types {
	  gap: 0.65rem; width: 100%;
	  display: flex; 
	  gap: 0.65rem; flex-wrap: wrap;
	}

	.legend-type-card {
	  width: 165px;
	  text-align: left;
	  border: 1px solid var(--border-soft);
	  border-radius: 0;
	  background: #fafafa;
	  padding: 0.6rem 0.7rem;
	  cursor: pointer;
	  display: flex;
	  flex-direction: column;
	  gap: 0.35rem;
	  font-size: 0.78rem;
	  transition: background 0.15s ease, border-color 0.15s ease,
		transform 0.1s ease, box-shadow 0.15s ease;
	}
    @media (min-width: 768px) {
		
		.legend-type-card{
			width: 185px;
		}
	}

	.legend-type-card:hover {
	  border-color: var(--accent);
	  background: #ffffff;
	  transform: translateY(-1px);
	  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
	}

	.legend-type-card.is-active {
	  border-color: var(--accent);
	  background: var(--accent-soft);
	}

	.legend-type-header {
	  display: flex;
	  /*justify-content: space-between;*/
	  align-items: baseline;
	  gap: 0.35rem; flex-wrap: nowrap;
	}

	.legend-type-name {
	  font-weight: 600; white-space: nowrap;
	}

	.legend-type-total {
	  font-size: 0.7rem; white-space: nowrap;
	  /*color: var(--muted);*/
	}

	.legend-type-status-row {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 0.25rem 0.4rem;
		
		display: none;
	}

	.legend-pill {
	  display: inline-flex;
	  align-items: center;
	  gap: 0.2rem;
	  padding: 0.1rem 0.45rem;
	  border-radius: 0px;
	  border: 1px solid transparent;
	  font-size: 0.7rem;
	  background: #ffffff;
	}

	.legend-pill .dot {
	  width: 7px;
	  height: 7px;
	  border-radius: 0px;
	}

	/* kleuren in legend */
	.legend-pill.status-available {
	  border-color: rgba(27, 155, 75, 0.25);
	  color: var(--available);
	}

	.legend-pill.status-available .dot {
	  background: var(--available);
	}

	.legend-pill.status-option {
	  border-color: rgba(243, 156, 18, 0.25);
	  color: var(--option);
	}

	.legend-pill.status-option .dot {
	  background: var(--option);
	}

	.legend-pill.status-sold {
	  border-color: rgba(198, 40, 40, 0.25);
	  color: var(--taken);
	}

	.legend-pill.status-sold .dot {
	  background: var(--taken);
	}

	.status-toggle-bar {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 0.4rem;
	  margin-top: 0.35rem;
	}

	.status-toggle {
	  display: inline-flex;
	  align-items: center;
	  gap: 0.3rem;
	  padding: 0.3rem 0.65rem;
	  border-radius: 0px;
	  border: 1px solid var(--border-soft);
	  background: #fafafa;
	  font-size: 0.72rem;
	  text-transform: uppercase;
	  letter-spacing: 0.08em;
	  color: var(--muted);
	  cursor: pointer;
	  transition: background 0.15s ease, border-color 0.15s ease,
		color 0.15s ease, transform 0.1s ease;
		outline: none!important;
	}

	.status-toggle .dot {
	  width: 7px;
	  height: 7px;
	  border-radius: 0px;
		display: none;
	}

	/* basis kleuren */
	.status-toggle.status-available .dot {
	  background: var(--available);
	}

	.status-toggle.status-option .dot {
	  background: var(--option);
	}

	.status-toggle.status-sold .dot {
	  background: var(--taken);
	}

	/* active state */
	.status-toggle.is-active.status-available {
	  border-color: rgba(27, 155, 75, 0.5);
	  background: rgba(27, 155, 75, 0.06);
	  color: var(--available);
	}

	.status-toggle.is-active.status-option {
	  border-color: rgba(243, 156, 18, 0.5);
	  background: rgba(243, 156, 18, 0.06);
	  color: var(--option);
	}

	.status-toggle.is-active.status-sold {
	  border-color: rgba(198, 40, 40, 0.5);
	  background: rgba(198, 40, 40, 0.06);
	  color: var(--taken);
	}

	.status-toggle:hover {
	  transform: translateY(-1px);
	}


.preview-download-btn {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 0px;
  border: 1px solid var(--border-soft);
  background: #ffffff;
  cursor: pointer;
  text-decoration: none !important;
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease, border 0.15s ease,
    transform 0.1s ease, box-shadow 0.15s ease;
}

.preview-download-btn::after {
  content: "↓";
  font-size: 0.85rem;
  margin-left: 0.4rem;
  color: var(--muted);
}

.preview-download-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  border-color: var(--accent);
}


#aanbod---woningen{
}
#aanbod---woningen .page-block-caption{
	justify-content: center;
}

.bwnr_row{
	background: none!important;
}
#woningenList{
	max-width: 1440px;
}


.bwnr-spec.beschikbaar{
	padding: 5px 0px 5px 0px; margin-top: 5px;
}

.bwnr-spec.onder_optie{
	background: var(--option); color:  var(--bg);
	padding: 5px 5px 5px 5px; margin-top: 5px; width: auto;
}
.bwnr-spec.verkocht{
	background: var(--taken); color:  var(--bg);
	padding: 5px 5px 5px 5px; margin-top: 5px; width: auto;
}

.bwnr_row .bwnr-spec .btn-primary:hover::before{
	color: var(--specialcolor);
}


.bwnr-spec.beschikbaar,
.bwnr-spec.onder_optie,
.bwnr-spec.verkocht{
	display: none;
}


.bwnr_row .bwnr-spec:nth-of-type(3){
	width: 250px; display: none;
}
.bwnr_row .bwnr-spec:nth-of-type(4){
	width: 250px; padding-left: 0px; text-align: left;
}

@media (min-width: 640px) {
.bwnr_row .bwnr-spec:nth-of-type(3){
	width: 165px;
}
}
@media (min-width: 1280px) {
.bwnr_row .bwnr-spec:nth-of-type(3){
	width: 195px;
}
}


.app .top-bar{
	display: none;
}
@media (min-width: 991px) {
	.app{
		flex-direction: row; align-content: stretch; max-width: 1700px;
	}
	.stage{
		width: 50%;
	}
	.legend-panel{
	}
	#unitOverlay{
		width: 50%; background: #ffffff; align-content: center; padding: 15px;
		opacity: 1!important; height: 100%!important; visibility: visible!important;
	}
	#unitOverlay::before{
		width: 70%; align-content: center; position: absolute; left: 50%; top: 50%;
		content: "selecteer jouw woning in de woningzoeker om de info te bekijken";
		display: block; text-align: center; font-size: 24px; transform: translate(-50%,-50%);
		color: var(--basecolorMedium);
	}
	
	.unit-popup{
		opacity: 0; background: #ffffff;
	}
	
}
	
	

/* preview image + zoom button */
.preview-image-wrap{
  position: relative;
}

.preview-zoom-btn{
  position: absolute;
  bottom: 0px;
  top: auto;
  right: 0px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.92);
  border: 0px solid var(--border-soft);
	outline: none!important;
  border-radius: 0;
  cursor: pointer;
  z-index: 2;
}

.preview-zoom-btn:hover{
  background: #fff;
}

.preview-zoom-btn:disabled{
  opacity: .35;
  cursor: default;
}

/* Lightbox */
.img-lightbox{
  position: fixed;
  inset: 0;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
  z-index: 59000000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.img-lightbox.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.img-lightbox img{
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  display: block;
}

.img-lightbox-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  font-size: 26px;
}




.scrolltop{
	display: none;
}



/* =========================
   INLINE PANEL MODE
   (unitOverlay is NO longer a modal)
   ========================= */

.overlay.as-panel {
  position: relative;
  inset: auto;
  background: transparent;
  padding: 0;
  z-index: 1;

  /* it must take space in the layout */
  display: block;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;

  /* we animate height with GSAP */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* hide the full-screen click-catcher (it blocks clicks if visible) */
.overlay.as-panel .overlay-click-catcher {
  display: none !important;
}

/* make the “popup” look like a normal block under the SVG */
.overlay.as-panel .unit-popup {
  max-width: 1280px;
  width: 100%;
  max-height: none;     /* let page scroll instead */
  overflow: visible;    /* no internal scroll unless you want it */
      box-shadow: none;
      position: relative;
      border: 0px solid var(--border-soft);
	padding: 30px 0px;
}

.overlay.as-panel .unit-popup .unit-preview{
	border: 0px solid var(--border-soft);
    background: var(--bg); padding-bottom: 0px; margin-bottom: 0px;
}


.overlay.as-panel .unit-popup .cta-stack{
	padding: 15px 0px;
}


.unit-popup-bottom{
  grid-column: 1 / -1; /* over beide kolommen */
  margin-top: 0.75rem;
}

.unit-popup-bottom.is-hidden{
  display:none;
}

.unit-gallery{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
		padding: 0px 15px;
}

.unit-gallery img{
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
  border:0px solid var(--border-soft);
}


@media (min-width: 900px) {
	.overlay.as-panel .unit-popup {
		padding: 50px 0px;
	}
    .unit-popup-right {
      padding-right: 15px;
    }
    .unit-preview {
        padding: 0px;
    }
	.unit-gallery{
		padding: 0px 15px;
	}
}




.page-block.gallery.thumbs .page-block-module .link-image img {
    height: 100%;
    width: 100%;
    object-fit: contain!important;
    object-position: center center!important;
    aspect-ratio: auto!important;
}


.imglb-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 99999999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.imglb-overlay.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.imglb{
  position: relative;
  width: min(1100px, 100%);
  max-height: 90vh;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 12px;
}

.imglb-img{
  width: 100%;
  height: min(72vh, 720px);
  object-fit: contain;
  display: block;
  cursor: zoom-out;
}

.imglb-close{
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: transparent;
  color: #000;
  font-size: 22px;
  cursor: pointer;
  z-index: 2;
}

.imglb-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(255,255,255,0.85);
  cursor: pointer;
  padding: 6px 10px;
  font-size: 22px;
  line-height: 1;
  z-index: 2;
}
.imglb-prev{ left: 8px; }
.imglb-next{ right: 8px; }

.imglb-thumbs{
  display: flex;
  gap: 8px;
  overflow: auto;
  padding-top: 10px;
}

.imglb-thumb{
  border: 1px solid #ddd;
  padding: 0;
  background: #fff;
  cursor: pointer;
}

.imglb-thumb img{
  width: 64px;
  height: 64px;
  object-fit: cover;
  display: block;
}

.imglb-thumb.is-active{
  border-color: var(--accent);
}


#theBody.woning.realworksnieuwbouw span.spacer{
	opacity: 0.6;
}
	
#theBody.woning.realworksnieuwbouw .page-block.gallery.slideshow{
	pointer-events: all; margin: 60px;
}

#theBody.woning.realworksnieuwbouw .page-block.gallery.slideshow .carousel .carousel-item img{
	opacity: 1;
}