/* =============== */
/* Index (vlekken) */
/* =============== */

/* Container met vlekken */
.vlekken-container{
  position: relative;
  /* breedte + horizontaal centreren komt uit common.css */
  margin: 60px auto;   /* verticale ruimte */
  height: 1200px;
  box-sizing: border-box;
}

/* Vlekken – algemene stijl */
.vlek{
  position: absolute;
  width: var(--vlek-breedte, 55%);
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  padding: 5%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-size: 1.1rem;
  line-height: 1.4;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* Geel */
.geel{
  top: 0;
  left: 0;
  background-image: url('vlek-geel.png');
}

/* Groen */
.groen{
  top: 0;
  right: 0;
  background-image: url('vlek-groen.png');
}

/* Blauw (centraal) */
.blauw{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35%;
  background-image: url('vlek-blauw.png');
  z-index: 2;
}

/* Rood (onderaan) */
.rood{
  bottom: 5%;
  left: 25%;
  width: 50%;
  background-image: url('vlek-rood.png');
  z-index: 1;
  padding-top: 200px;
}

/* —— typografie binnen vlekken —— */
/* Titel en ondertitel */
.vlek h2.titel{
  font-family: 'Amatic SC', cursive;
  font-size: 96px;
  line-height: 1;
  margin: 0 0 0px;  /* was 6px of meer, nu korter */
  color: #fff;
}

.vlek .ondertitel{
  font-family: 'Amatic SC', cursive;
  font-size: 32px;
  margin: 0 0 14px; /* dichterbij de titel, en daarna iets lucht naar info */
}

/* Info-blok */
.vlek .blok{
  margin-top: 14px; /* iets minder ruimte boven de blokken */
}

/* Kosten-blok compacter */
.vlek .kosten{
  margin-top: 18px; /* i.p.v. 22px */
  line-height: 1.3; /* dichter op elkaar */
}

.vlek .kosten .kop{
  margin: 0 0 4px;  /* “Kosten” dichter op de tekst eronder */
}