/*
 * Custom CSS - www.studiovanzwet.nl
 * 
 *     (  )   (   )  )
 *      ) (   )  (  (
 *      ( )  (    ) )
 *      _____________
 *     <_____________> ___
 *     |             |/ _ \
 *     |               | | |
 *     |               |_| |
 *  ___|             |\___/
 * /    \___________/    \
 * \_____________________/
 * 
 * Let's turn coffee (or another beverage) into website code.
 *
 */


:root {
    --red: rgb(237,43,71);
    --taupe: rgb(203,171,133);
    --taupe-dark: rgb(114,109,106);
    --taupe-dark85: rgb(134,131,128);
    --grijs: rgb(67,66,72);
    --grijs-dark: rgb(53,52,57);
    --unit-optie: rgba(199,126,56,1);
    --unit-beschikbaar: rgba(113,140,83,1);
    --unit-verkocht: rgba(165,40,69,1);
}


.bg-darktaupe {background-color: var(--taupe-dark); color: #FFF;}
.bg-grijs {background-color: var(--grijs); color: #FFF;}
.bg-grijs-dark {background-color: var(--grijs-dark); color: #FFF;}
.bg-taupe {background-color: var(--taupe); color: #FFF;}

.txt-taupe {color: var(--taupe);}
.txt-taupedark {color: var(--taupe-dark);}
.txt-grijs {color: var(--grijs);}
.txt-grijsdark {color: var(--grijs-dark);}
.btn-red {
  background-color: var(--red);
  color: #fff;
border: 1px solid white; /* kader */
}
.btn-grijs {background-color: var(--grijs); color: #FFF;}
.btn-darktaupe {background-color: var(--taupe-dark); color: #FFF;}
.btn-taupe-dark85 {background-color: var(--taupe-dark85); color: #FFF;}

.svz .img-fluid {width: 100% !important; height: auto;}
.svz .img-cover {width: 100%; height: 100%; object-fit: cover}


      .tekoop {
        fill: rgb(113,140,83);
      }
        .optie {
                fill: rgb(199,126,56);
        }
        .verkocht {
        fill: rgb(165,40,69);
        }
        .tekoop, .optie, .verkocht {fill-opacity: 0.4;}
        .tekoop:hover, .optie:hover, .verkocht:hover {fill-opacity: 0.85;}

    .status-tekoop { color: rgb(113,140,83); font-weight: bold; }
    .status-optie { color: rgb(199,126,56); font-weight: bold; }
    .status-verkocht { color: rgb(165,40,69); font-weight: bold; }
    #tooltip-content strong { font-size: 14px; display: block; margin-bottom: 2px; }

/* focus-ring verwijderen 
.btn:focus {
    box-shadow: none !important;
    outline: none !important;
}
*/

.btn-red:hover {background-color: var(--taupe); 
    -webkit-transition: background-color 0.5s ease;
    -ms-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}

html, body, p {font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 400; font-style: normal; font-optical-sizing: auto; }

.svz .small, .svz small {
    font-size: .75em;
}

.svz .osm .aspect-square {
    aspect-ratio: auto; 
    min-height: 350px;
    box-sizing: border-box;
}

.svz .blok .aspect-square {
    aspect-ratio: auto; 
    height: auto;
    box-sizing: border-box;
}

.svz .nav-balk {background-color: var(--grijs); color: #fff; border-top: var(--taupe-dark) 12px solid; position: sticky; top: 0; z-index: 1000; padding: 20px 0; box-shadow: 0 3px 5px rgba(53,52,57,0.7);}
.svz .nav-balk .logo img {width: 130px;}
.svz .nav-balk .socials {display: flex;  }
.svz .nav-balk .socials a {text-decoration: none; color: #FFF; }
.svz .nav-balk .socials .fa-brands {font-size: 30px;}
.svz .nav-inner {
    display: flex;
    justify-content: space-between; 
    align-items: center;          
}

.svz a.anchor {
display: block;
position: relative;
top: -160px;
visibility: hidden;
}



.svz .carousel-item {
    height: 695px;
}

.svz .carousel-item img {
    height: 100%;
    object-fit: cover;
}

.svz .carousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: none;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    margin: 0 6px;

}

.svz .carousel .carousel-indicators {
    bottom: 20px;
}

.svz .carousel .carousel-indicators .active {
    opacity: 1;
}


.svz .carousel-inner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%; /* Breedte van het verloop */
  height: 100%;
  /* Verloop van transparant naar grijs */
  background: linear-gradient(to right, rgba(67, 66, 72, 0), rgba(67, 66, 72, 1));
  pointer-events: none; /* Zorgt dat de 'volgende' knop klikbaar blijft */
  z-index: 2;
}


.card-binnenkort::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%;
  background: linear-gradient(to bottom, rgba(67, 66, 72, 1), rgba(67, 66, 72, 0));
  z-index: auto;
}

.hero-card, .hero-card-content {
  position: absolute;
  left: 50%;
    right: auto;
  transform: translateX(-50%);
    top: 50px;
    width:  75%;
  height: 150px;
  border-radius: 20px;
}

.hero-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;  
  z-index: 4;
  padding: 25px; 
  border: 2px #FFF solid;
}

.hero-card {
  background-color: var(--taupe-dark);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 3;
}




/* frontpage cards */

    .lods-card-hover {
        transition: outline 0.5s ease-in-out;
        outline: 0px solid transparent;
    }
    
    .lods-card-hover:hover {
        outline: 3px solid var(--red); 
        cursor: pointer;
    }

    .card-img-top {
        object-fit: cover;
    }


    
    

.inverkoop {background-color: var(--red); color: #FFF; border-radius: 6px;}
.binnenkortinverkoop {background-color: var(--taupe-dark); color: #FFF; border-radius: 6px;}
.binnenkortinverloop.btn {cursor: default;}

.svzfooter a {color: #fff; text-decoration: none;}


.svz .makelaarspecs .card {background-color: transparent; border: none; border-radius: 0; }
.svz .makelaarspecs .card a {color: #FFF; text-decoration: none;}
.svz .makelaarspecs .makelaar-logo {width: 100%; height: auto}
.svz .makelaarspecs .card-body {padding: 1rem 0;}

.svz .wpcf7-list-item.first {
margin: 0 0 0 0;
}

/* animaties patroon logo */


.logo-patroon {}
.st0 {
        fill: none;
        stroke: #fff;
        stroke-miterlimit: 10;
        stroke-width: 2px;
      }

.ani-1 {
    animation:opacity1 8s infinite
}

.ani-2 {
    animation:opacity2 9s infinite
}

.ani-3 {
    animation:opacity3 10s infinite
}

.ani-4 {
    animation:opacity4 6s infinite
}

.ani-5 {
    animation:opacity5 7s infinite
}

.ani-6 {
    animation:opacity6 8s infinite
}


@keyframes opacity1 {
    0% {
        opacity:0.15
    }

    25% {
        opacity:0
    }

    50% {
        opacity:0.15
    }

    100% {
        opacity:0.15
    }
}

@keyframes opacity2 {
    0% {
        opacity:0.15
    }

    25% {
        opacity:0.15
    }

    50% {
        opacity:0
    }

    75% {
        opacity:0.15
    }

    100% {
        opacity:0.15
    }
}

@keyframes opacity3 {
    0% {
        opacity:0.15
    }

    50% {
        opacity:0.15
    }

    75% {
        opacity:0
    }

    100% {
        opacity:0.15
    }
}

@keyframes opacity4 {
    0% {
        opacity:0
    }

    25% {
        opacity:0.15
    }

    50% {
        opacity:0
    }

    100% {
        opacity:0
    }
}

@keyframes opacity5 {
    0% {
        opacity:0
    }

    25% {
        opacity:0
    }

    50% {
        opacity:0.15
    }

    75% {
        opacity:0
    }

    100% {
        opacity:0
    }
}

@keyframes opacity6 {
    0% {
        opacity:0
    }

    50% {
        opacity:0
    }

    75% {
        opacity:0.15
    }

    100% {
        opacity:0
    }
}



/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .svz .carousel-item {
        height: 450px;
    }
    
}

/* X-Small devices (portrait phones, less than 576px */
@media (max-width: 575.98px) {
    .svz .carousel-item {
        height: 320px;
    }
}

@media (max-width: 768px) {
    #unit-tooltip {
        max-width: 220px;
        pointer-events: auto; /* Zodat je eventueel op de tooltip zelf kunt klikken */
        position: fixed;
        /* Forceer de tooltip binnen het scherm bij mobiel */
        transform: translate(-50%, -120%); 
    }
}

/* DESKTOP: Large screens (992px en groter) */
@media (min-width: 992px) {
    
.hero-card, .hero-card-content {
    left: auto;
    right: 6%;
    transform: none;
    top: 187px;
    width: 420px;
    min-height: 320px;
    border-radius: 32px;
    padding: 48px;
      align-items: start;
      


}

    .svz .osm .aspect-square, .svz .blok .aspect-square {box-sizing: border-box; aspect-ratio: 1 / 1; }

    
}