/* Hovenier Omgeving Rotterdam — één stylesheet, geen frameworks.
   Alle kleuren staan als variabele bovenaan. Wil je de huisstijl wijzigen,
   dan hoef je alleen daar te zijn. */

:root{
  --diep:#1C3A2C;      /* donkergroen, de ankerkleur */
  --diep-2:#152B21;
  --groen:#3F6B51;
  --blad:#A9CB92;      /* accent, spaarzaam */
  --grond:#F4F5F1;     /* neutraal met een lichte groenzweem */
  --wit:#FFFFFF;
  --inkt:#16211B;
  --gedempt:#5A6B5F;
  --lijn:#DDE1D8;
  --signaal:#B5793A;   /* alleen de belknop */
  --meet:66ch;
  --rond:12px;
  --schaduw:0 1px 2px rgba(21,32,26,.05), 0 10px 28px rgba(21,32,26,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--grond);color:var(--inkt);
  font:400 17px/1.65 Karla,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:600;line-height:1.14;text-wrap:balance;margin:0}
h1{font-size:clamp(2.05rem,1.25rem + 3.4vw,3.5rem);letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,1.1rem + 1.8vw,2.15rem)}
h3{font-size:1.1rem}
p{margin:0}
a{color:var(--groen)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--groen);outline-offset:2px}
.overslaan{position:absolute;left:-9999px;background:var(--wit);padding:.6rem 1rem;z-index:99}
.overslaan:focus{left:1rem;top:.5rem}
.omhulsel{width:min(100% - 2.5rem,1120px);margin-inline:auto}
.meet{max-width:var(--meet)}
.stapel{display:flex;flex-direction:column;gap:1rem}
.klein{font-size:.88rem;color:var(--gedempt)}

/* kop */
.kop{position:sticky;top:0;z-index:20;background:rgba(244,245,241,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn)}
.kop__rij{display:flex;align-items:center;gap:1.1rem;padding:.65rem 0;flex-wrap:wrap}
.merk{display:flex;align-items:center;gap:.65rem;text-decoration:none;margin-right:auto;color:var(--diep)}
.merk img{width:44px;height:44px;flex:none}
.merk span{display:flex;flex-direction:column;font-family:Karla,sans-serif;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gedempt);line-height:1.35}
.merk strong{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1.02rem;letter-spacing:0;text-transform:none;color:var(--diep);line-height:1.15}
.menu{display:flex;gap:1rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.menu a{color:var(--inkt);text-decoration:none;font-size:.94rem;padding:.2rem 0;border-bottom:2px solid transparent}
.menu a:hover{border-bottom-color:var(--blad)}
.menu a[aria-current=page]{border-bottom-color:var(--groen);font-weight:700}
.bel{background:var(--signaal);color:var(--wit);text-decoration:none;padding:.5rem .95rem;border-radius:var(--rond);font-weight:700;font-size:.94rem;white-space:nowrap}
.bel:hover{background:#9c6631}

/* hero */
.hero{position:relative;background:var(--diep);color:var(--wit);overflow:hidden;isolation:isolate}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(21,43,33,.94) 0%,rgba(21,43,33,.72) 45%,rgba(21,43,33,.35) 100%)}
.hero__inhoud{padding:clamp(3.2rem,9vw,6.5rem) 0;max-width:38rem}
.hero h1{color:var(--wit)}
.hero p{margin-top:1.1rem;font-size:1.1rem;color:#DFE8DF;max-width:34rem}
.hero--kaal{background:var(--diep)}
.knoppen{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.7rem}
.knop{display:inline-block;padding:.75rem 1.3rem;border-radius:var(--rond);text-decoration:none;font-weight:700;border:2px solid transparent;cursor:pointer;font-size:1rem;font-family:inherit}
.knop--vol{background:var(--blad);color:var(--diep-2)}
.knop--vol:hover{background:#bad9a5}
.knop--lijn{border-color:rgba(255,255,255,.5);color:var(--wit)}
.knop--lijn:hover{border-color:var(--wit)}

/* secties */
.sectie{padding:clamp(2.6rem,6vw,4.2rem) 0}
.sectie + .sectie{border-top:1px solid var(--lijn)}
.sectie h2{margin-bottom:1.4rem}
.sectie--groen{background:var(--diep);color:#E4EBE4;border-top:none}
.sectie--groen h2{color:var(--wit)}
.sectie--groen a{color:var(--blad)}

.raster{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);padding:1.3rem;box-shadow:var(--schaduw);display:flex;flex-direction:column;gap:.55rem}
.kaart h3{color:var(--diep)}
.kaart p{color:var(--gedempt);font-size:.96rem}
.kaart a{margin-top:auto;font-weight:700;text-decoration:none;padding-top:.4rem}
.kaart a::after{content:" →"}

.punten{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr))}
.punten li{background:var(--wit);border:1px solid var(--lijn);border-left:3px solid var(--blad);border-radius:var(--rond);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem}
.punten h3{color:var(--diep)}
.punten p{color:var(--gedempt);font-size:.96rem}

/* stappen: een echte volgorde, dus genummerd */
.stappen{list-style:none;margin:0;padding:0;counter-reset:stap;display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr))}
.stappen li{counter-increment:stap;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);padding:1.05rem 1.15rem 1.15rem 3.2rem;position:relative;display:flex;flex-direction:column;gap:.35rem}
.stappen li::before{content:counter(stap);position:absolute;left:1rem;top:1.05rem;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--diep);color:var(--wit);display:grid;place-items:center;font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums}
.stappen h3{color:var(--diep)}
.stappen p{color:var(--gedempt);font-size:.95rem}

.galerij{margin:0;display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.galerij img{border-radius:var(--rond);aspect-ratio:16/9;object-fit:cover;width:100%}
.galerij figcaption{grid-column:1/-1;font-size:.88rem;color:var(--gedempt);margin-top:.2rem}

.citaten{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.citaat{background:var(--wit);border:1px solid var(--lijn);border-left:3px solid var(--blad);border-radius:var(--rond);padding:1.15rem 1.25rem;margin:0;font-size:.96rem;display:flex;flex-direction:column;gap:.7rem}
.citaat cite{font-style:normal;font-size:.82rem;color:var(--gedempt);letter-spacing:.04em;text-transform:uppercase}

.plaatsen{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0;padding:0}
.plaatsen a{display:block;background:var(--wit);border:1px solid var(--lijn);border-radius:100px;padding:.4rem .95rem;font-size:.93rem;text-decoration:none;color:var(--inkt)}
.plaatsen a:hover{border-color:var(--groen);color:var(--diep)}

details{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);margin-bottom:.55rem}
summary{cursor:pointer;padding:.9rem 1.15rem;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--groen);font-weight:400;font-size:1.2rem;line-height:1}
details[open] summary::after{content:"–"}
details p{padding:0 1.15rem 1.15rem;color:var(--gedempt)}

.portfolio{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.portfolio figure{margin:0;display:flex;flex-direction:column;gap:.45rem}
.portfolio img{border-radius:var(--rond);aspect-ratio:16/10;object-fit:cover;width:100%}
.portfolio figcaption{font-size:.85rem;color:var(--gedempt)}
.portfolio a{text-decoration:none;color:var(--groen);font-weight:700}

.stappen--breed{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.duur{margin-top:.35rem;align-self:flex-start;background:var(--grond);border:1px solid var(--lijn);border-radius:100px;padding:.15rem .6rem;font-size:.78rem;color:var(--gedempt);letter-spacing:.03em}

.feiten{margin:0;display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.feiten>div{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);padding:1.05rem 1.15rem}
.feiten dt{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1.02rem;color:var(--diep);margin-bottom:.35rem}
.feiten dd{margin:0;color:var(--gedempt);font-size:.95rem}

.sectie--licht{background:var(--wit)}
.prijs{display:flex;flex-direction:column;gap:.8rem}
.prijs__groot{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:clamp(1.5rem,1.1rem + 1.7vw,2.1rem);color:var(--diep);line-height:1.15}

.voet__keur{margin-top:.9rem;background:var(--wit);border-radius:6px;padding:.4rem .6rem;width:auto;height:44px}

/* zeven zekerheden */
.zeker{list-style:none;margin:1.2rem 0 0;padding:0;counter-reset:z;display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.zeker li{counter-increment:z;position:relative;padding:1rem 1.1rem 1.1rem 3rem;background:var(--grond);border:1px solid var(--lijn);border-radius:var(--rond)}
.zeker li::before{content:counter(z);position:absolute;left:.95rem;top:1rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--blad);color:var(--diep-2);display:grid;place-items:center;font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.zeker h3{color:var(--diep);font-size:1.02rem;margin-bottom:.25rem}
.zeker p{color:var(--gedempt);font-size:.94rem}

/* contactformulier */
.formulier{max-width:44rem;margin-top:1.3rem;display:flex;flex-direction:column;gap:.9rem}
.formulier p{margin:0;display:flex;flex-direction:column;gap:.3rem}
.formulier__rij{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.formulier label{font-size:.9rem;font-weight:700;color:var(--diep)}
.formulier label span{color:var(--signaal)}
.formulier input,.formulier textarea{font:inherit;padding:.65rem .8rem;border:1px solid var(--lijn);border-radius:8px;background:var(--wit);color:var(--inkt);width:100%}
.formulier input:focus,.formulier textarea:focus{border-color:var(--groen);outline:2px solid rgba(63,107,81,.25);outline-offset:0}
.formulier textarea{resize:vertical;min-height:8rem}
.formulier__voet{flex-direction:row!important;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.3rem}
.formulier__melding{min-height:1.3rem;font-size:.94rem}
.formulier__melding--goed{color:var(--groen);font-weight:700}
.formulier__melding--fout{color:#a8302c;font-weight:700}
.verborgen{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* agenda */
.agenda__doos{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:var(--rond);padding:1.6rem;margin-top:1.4rem;text-align:center;min-height:9rem;display:flex;flex-direction:column;justify-content:center;gap:.8rem}
.agenda__doos{max-width:52rem;margin-inline:auto}
.agenda__doos iframe{width:100%;min-height:720px;border:0;border-radius:var(--rond);background:var(--wit)}
.agenda__klein{font-size:.85rem;color:#B9C8BA;max-width:38ch;margin-inline:auto}
.agenda__bellen{margin-top:1rem;font-size:.95rem}

.contactblok{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.contactblok>div{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);padding:1.2rem;display:flex;flex-direction:column;gap:.35rem}
.contactblok h3{color:var(--diep)}
.groot{font-size:1.25rem;font-weight:700;color:var(--diep);text-decoration:none}

/* voet */
.voet{background:var(--diep);color:#CFDBD0;padding:2.8rem 0 1.4rem;margin-top:0}
.voet a{color:#CFDBD0;text-decoration:none}
.voet a:hover{color:var(--wit);text-decoration:underline}
.voet h3{color:var(--wit);font-size:1rem;margin-bottom:.6rem}
.voet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.28rem;font-size:.93rem}
.voet .raster>div{display:flex;flex-direction:column;gap:.6rem;font-size:.93rem}
.voet__rand{border-top:1px solid rgba(255,255,255,.16);margin-top:2rem;padding-top:1rem;font-size:.83rem;color:#93A695}

@media (max-width:640px){
  .kop__rij{gap:.6rem}
  .merk{font-size:.95rem}
  .menu{order:3;width:100%;gap:.75rem;font-size:.9rem}
  .agenda__doos iframe{min-height:900px}
}


/* ---------- uitgevoerd werk ----------------------------------------------
   De foto's zijn deels staand en deels liggend, want ze komen van een
   telefoon en van een spiegelreflex. Een raster met vaste hoogte zou daar
   halve tuinen van afsnijden, dus staan ze in kolommen die de hoogte volgen.
   ------------------------------------------------------------------------ */
.galerij--werk{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.75rem}
.galerij--werk img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border-radius:var(--rond);display:block;background:var(--lijn)}

/* Voor en na naast elkaar. Op een telefoon onder elkaar, want twee foto's van
   een halve schermbreedte laten juist niet zien waar het om gaat. */
.voorna{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:44rem){.voorna{grid-template-columns:1fr 1fr}}
.voorna figure{margin:0}
.voorna img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rond);display:block;background:var(--lijn)}
.voorna figcaption{font-family:Karla,sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gedempt);margin-bottom:.4rem}

.kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.25rem}
.kaart{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--rond);overflow:hidden;box-shadow:var(--schaduw);
  transition:transform .16s ease,box-shadow .16s ease}
.kaart:hover,.kaart:focus-visible{transform:translateY(-2px);box-shadow:0 2px 4px rgba(21,32,26,.06),0 16px 36px rgba(21,32,26,.12)}
.kaart img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--lijn)}
.kaart h3{margin:.9rem 1rem .35rem;font-size:1.05rem;line-height:1.25}
.kaart p{margin:0 1rem;color:var(--gedempt);font-size:.92rem}
.kaart__meer{margin:.75rem 1rem 1rem;font-family:Karla,sans-serif;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--groen)}
.kaart__meer::after{content:" \2192"}

/* Materialen: losse termen, dus geen opsommingstekens maar labels. */
.materialen{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.materialen li{background:var(--wit);border:1px solid var(--lijn);border-radius:999px;
  padding:.4rem .85rem;font-size:.9rem;color:var(--diep)}

@media(prefers-reduced-motion:reduce){.kaart{transition:none}.kaart:hover{transform:none}}


/* ---------- kruimelpad ---------------------------------------------------
   Klein en rustig: het is een hulpmiddel, geen tweede menu. Het schuift over
   de volle breedte mee zodat een lang pad op een telefoon niet afbreekt maar
   te scrollen is.
   ------------------------------------------------------------------------ */
.kruimels{background:var(--wit);border-bottom:1px solid var(--lijn);overflow-x:auto}
.kruimels ol{display:flex;gap:.5rem;list-style:none;margin:0;padding:.6rem 0;font-size:.82rem;white-space:nowrap}
.kruimels li+li::before{content:"/";color:var(--lijn);margin-right:.5rem}
.kruimels a{color:var(--gedempt);text-decoration:none}
.kruimels a:hover,.kruimels a:focus-visible{color:var(--groen);text-decoration:underline}
.kruimels [aria-current]{color:var(--inkt)}

/* Een opsomming zonder bolletjes, voor losse links onder elkaar. */
.punten--kaal{list-style:none;padding:0}