@charset "utf-8";
.hero-text {
 color:var(--zwart);
	}

.hero-card.hero-text.variant5 {
  
	background-color:var(--lichtgroen);
}
.hero-card.hero-text.variant5 p{
    color: var(--zwart);
	
}


/* Koppen alleen voor variant5, donkergroen via CSS-variabele */
.hero-card.hero-text.variant5 h1,
.hero-card.hero-text.variant5 h2,
.hero-card.hero-text.variant5 h3,
.hero-card.hero-text.variant5 h4
{
    color: var(--donkergroen);
}



.hero-text h1, .hero-text h2, .hero-text h3  {
	color:var(--groen);
}
.kleur.groen {background-color:var(--groen)}
.kleur.lichtgroen {background-color:var(--lichtgroen)}
.hero-text.rechts.lichtgroen {background-color:var(--lichtgroen);}
.hero-text.rechts.lichtgroen::after
	
	{
  content: '';
    position: absolute;
     bottom: -80px;
    top: inherit;
    right: 0;
    width: 16%;
    height: 75%;

  background-image: url("../images/Beeldmerk_groen.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;

  pointer-events: none;

}
.hero-image.links.groen {background-color:var(--groen);border-radius: 0px 40px 40px 0px; box-shadow: -6px 0 15px rgba(0,0,0,0.08);}
.hero-image.links.groen::after {
  content: '';
  position: absolute;

  top: 20px;           /* steekt boven het vlak uit */
  right: 20px;         /* steekt rechts uit */

  width: 120px;
  height: 120px;

  background-image: url(../images/4_strerretjes_wit.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;

  pointer-events: none;
}
.hero-grid.versie2 {grid-template-columns: 1fr 2fr;}
.hero-grid.versie3 {grid-template-columns: minmax(200px, 1fr) 4fr;}
.hero-grid.versie4 {grid-template-columns: 1fr 2fr;}

.hero-grid.versie4 .hero-card {
    display: block;        /* geen flex / grid */
    overflow: visible;
	padding:50px;
}
.hero-grid.versie4 .hero-image img {
    border-radius: 40px;
    box-shadow: -6px 0 15px rgba(0, 0, 0, 0.08);
}





@media (max-width: 992px) {
    .hero-grid.versie2, .hero-grid.versie3, .hero-grid.versie4 {
        grid-template-columns: 1fr;
    }
	.hero-image.links.groen {
      border-radius: 40px 40px 0px 0px;
	min-height:10vh;height:auto;	
}
	.hero-text.rechts.groen {
      border-radius: 0px 0px 40px 40px;
	}
	.hero-text.rechts.lichtgroen {
     overflow: inherit;
		padding:15px;
	
	}
	.hero-text.rechts.lichtgroen::after {bottom:10px;right:10px;}
	
	
	    .hero-grid.versie4 {
        grid-template-columns: 1fr;
    }

    .hero-grid.versie4 .hero-image {
        order: 2;
    }

    .hero-grid.versie4 .hero-text {
        order: 1;
    }
	.hero-grid.versie4 {
      
    }
	  .hero-grid.versie4 .hero-image {
        order: 2;
        border-radius: 0 0 40px 40px; /* onderaan afgerond */
		  box-shadow: none;
    }

    .hero-grid.versie4 .hero-text {
        order: 1;
        border-radius: 40px 40px 0 0; /* bovenaan afgerond */
    }

	
	
}