/* Route: werkwijze als doorlopende weg van stap 1 naar 4. Kleuren en maten uit variables.css */
.route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5);position:relative;counter-reset:route}
.route::before{content:"";position:absolute;left:12%;right:12%;top:27px;height:6px;border-radius:var(--r-pil);background:var(--terracotta)}
.route li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-3)}
.route .punt{position:relative;z-index:1;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--groen);color:var(--creme);font-family:var(--font-kop);font-size:1.6rem;box-shadow:0 0 0 6px var(--creme)}
.sectie-zand .route .punt{box-shadow:0 0 0 6px var(--zand)}
.route li:last-child .punt{background:var(--terracotta)}
.route h3{font-size:1.3rem}
.route p{color:var(--grijs);font-size:.98rem;max-width:240px}
.route-met-maatje{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:var(--s-6);align-items:end}
.route-met-maatje > img{width:200px;justify-self:center}

/* Knop en uitleg naar alle Google-reviews */
.google-reviews{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);margin-top:var(--s-6);padding:var(--s-5) var(--s-6);border-radius:var(--r-lg);background:var(--zand-licht)}
.sectie-zand .google-reviews{background:var(--creme)}
.google-reviews p{flex:1 1 280px;color:var(--grijs)}
.google-reviews strong{color:var(--zwart)}
.score .knop{align-self:flex-start}

@media(max-width:980px){
  .route-met-maatje{grid-template-columns:minmax(0,1fr)}
  .route-met-maatje > img{display:none}
}
@media(max-width:760px){
  .route{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
  .route::before{left:27px;right:auto;top:30px;bottom:30px;width:6px;height:auto}
  .route li{flex-direction:row;align-items:flex-start;text-align:left;gap:var(--s-4)}
  .route .punt{flex:none}
  .route p{max-width:none}
}

/* Kleine regel boven de grote kop in de hero (onderdeel van de H1) */
.hero h1 .h1-klein{font-family:var(--font-tekst);font-weight:800;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--groen-zacht);margin-bottom:var(--s-5)}

/* Raster met vier kolommen (diensten, wijken) */
.raster-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.raster .kaart h3{font-size:1.25rem}

/* Veelgestelde vragen als uitklapblokken */
.faq{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);max-width:860px}
.faq-item{background:var(--zand);border-radius:var(--r-md)}
.sectie-zand .faq-item{background:var(--creme)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);font-weight:800;font-size:1.05rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--terracotta);color:var(--creme);font-size:1.3rem;line-height:1}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{margin:0;padding:0 var(--s-5) var(--s-5);color:var(--grijs)}

@media(max-width:980px){.raster-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.raster-4{grid-template-columns:minmax(0,1fr)}}

/* Ingesprongen regels in de sitemap */
.lijst-links .sub-item{padding-left:var(--s-5);font-size:.95rem}

/* Lees ook onder een blog */
.lees-ook{margin-top:var(--s-7);padding:var(--s-5) var(--s-6);border-radius:var(--r-lg);background:var(--zand)}
.lees-ook h2{font-size:1.5rem;margin:0 0 var(--s-3)}

/* Sociale media in de footer */
.voet .volg-kop{margin-top:var(--s-5)}
.voet .sociaal{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.voet .sociaal a{display:inline-block;padding:var(--s-1) var(--s-3);border-radius:var(--r-pil);background:var(--grijs);color:var(--creme);font-weight:700;font-size:.85rem}
.voet .sociaal a:hover{background:var(--terracotta);color:var(--creme)}

/* Slogan onder de hoofdkop van de homepage */
.hero-slogan{font-family:var(--font-kop);font-size:clamp(1.5rem,2.6vw,2.2rem);color:var(--terracotta-licht);margin-top:var(--s-3)}

/* Brede foto (voor, tijdens, na) */
.foto-breed{aspect-ratio:1400/820;overflow:hidden;border-radius:200px 200px var(--r-lg) var(--r-lg);margin-bottom:var(--s-5)}
.foto-breed img{width:100%;height:100%;object-fit:cover}

/* Lichte knop met rand op een licht vlak */
.google-reviews .knop-licht{box-shadow:inset 0 0 0 2px var(--groen)}
.knop-rand-donker{background:transparent;color:var(--groen);box-shadow:inset 0 0 0 2px var(--groen)}
.knop-rand-donker:hover{background:var(--groen);color:var(--creme)}
.raster h3{line-height:1.15}

@media(max-width:760px){
  .foto-breed{border-radius:120px 120px var(--r-md) var(--r-md)}
  /* route: per stap een eigen stukje lijn, zodat er geen stompje overblijft */
  .route::before{display:none}
  .route li:not(:last-child)::after{content:"";position:absolute;left:27px;top:30px;width:6px;height:calc(100% + var(--s-5));border-radius:var(--r-pil);background:var(--terracotta)}
  .kaart-vorm{height:56px;margin-bottom:var(--s-3)}
}

/* Video in de boogvorm */
.boog-foto video{width:100%;height:100%;object-fit:cover;display:block}

/* YouTube-video in de boogvorm: vult de boog zonder zwarte randen */
.boog-video{position:relative}
.boog-video iframe{position:absolute;top:50%;left:50%;width:196%;height:100%;transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;transition:opacity .6s}
.boog-video.video-klaar iframe{opacity:1}
.boog-video > img{position:absolute;inset:0}
.dienst-rij .keurmerken{margin-top:var(--s-5)}

/* Regel met buurten op wijkpagina's */
.sectie-smal{padding:0 0 var(--s-6)}
.buurten{background:var(--zand-licht);border-radius:var(--r-md);padding:var(--s-4) var(--s-5);color:var(--grijs);font-size:.98rem;max-width:900px}
.buurten strong{color:var(--zwart)}
.buurten p{margin:0}
.buurten p + .buurt-chips,.buurt-chips + p{margin-top:var(--s-3)}
.buurt-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2)}
.buurt-chips li{background:var(--creme);border-radius:var(--r-pil);padding:var(--s-1) var(--s-3);font-size:.9rem;font-weight:700;color:var(--zwart)}

/* Reviews in de hero, met links naar Google en de eigen reviewpagina */
.hero-reviews{display:grid;grid-template-columns:auto 1fr;column-gap:var(--s-3);align-items:center;margin-top:var(--s-6);padding:var(--s-3) var(--s-5);border-radius:var(--r-md);background:var(--groen-licht);max-width:440px}
.hero-reviews .sterren{grid-row:span 2;color:var(--terracotta-licht);font-size:1.3rem;letter-spacing:.08em}
.hero-reviews p{margin:0;font-size:.95rem}
.hero-reviews strong{color:var(--creme)}
.hero-reviews a{color:var(--creme);font-weight:700}
.hero-reviews a:hover{color:var(--terracotta-licht)}
@media(max-width:760px){.hero-reviews{grid-template-columns:minmax(0,1fr)}.hero-reviews .sterren{grid-row:auto}}
.hero-reviews strong{font-size:1.15rem}

/* Cookiemelding onderin het scherm */
.cookiebalk{position:fixed;left:var(--s-4);right:var(--s-4);bottom:var(--s-4);z-index:50;max-width:560px;margin:0 auto;background:var(--zwart);color:var(--creme);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--schaduw)}
.cookiebalk[hidden]{display:none}
.cookiebalk p{margin:0 0 var(--s-4);font-size:.95rem}
.cookie-knoppen{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.cookie-knoppen .knop{padding:var(--s-3) var(--s-5)}

/* Regel met plaatsen rond Gouda onder de wijkkaarten op de homepage */
.rond-gouda{margin-top:var(--s-5);color:var(--grijs)}
.rond-gouda a{font-weight:700;color:var(--terracotta-donker)}