/* ==========================================================================================
   Arboregia — merkstijl voor de website (14 augustus 2026)

   Gebouwd op de waarden die van de ECHTE site zijn afgelezen (zie docs/site-oogst.md §6), met
   drie bewuste correcties die daar ook onderbouwd staan:
     1. lopende tekst was Bootstrap-grijs rgb(33,37,41) — dat is geen merkkleur. Nu Burnt Umber.
     2. knoppen waren #B8874A met witte tekst, contrast ~2,8 waar 4,5 nodig is. Nu Warm Clay met
        Burnt-Umber-tekst, precies zoals de offertepagina het al doet.
     3. h2 stond op gewicht 700 terwijl AcciaPiano alleen 200-400 dekt — de browser maakt daar dan
        ZELF een vette versie van ("nepvet"). Overal 300, zoals het logo en het merkboek.

   KERNREGEL, overgenomen van de offertepagina: een onderdeel kiest zijn kleur NOOIT zelf, maar
   erft hem van het vlak waar het op staat. Vandaar --vlak/--inkt/--kaartje/--lijn per sectie.
   Zonder die regel krijg je donkere tekst op een donker vlak zodra iemand een sectie omkleurt.
   ========================================================================================== */

/* ---- Lettertypen: ZELF gehost, niet via Google -------------------------------------------
   Een lettertype van Google ophalen stuurt het IP-adres van elke bezoeker naar een derde partij.
   Dat is precies het soort verwerking dat in de privacyverklaring zou moeten staan, en het is
   onnodig: de latijnse snede is 22 kB. Zelf hosten is dus zowel privacyvriendelijker als sneller. */
@font-face{
  font-family:'AcciaPiano';
  src:url('fonts/acciapiano-light.otf') format('opentype');
  font-weight:200 400;      /* buiten dit bereik gaat de browser zelf vet maken — niet doen */
  font-display:swap;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('fonts/plusjakartasans-latin.woff2') format('woff2');
  font-weight:200 800;
  font-display:swap;
}

:root{
  /* het palet uit het merkboek, geen enkele kleur daarbuiten */
  --mist:#EBE9DD;
  --oxide:#4E1E14;
  --umber:#20130D;
  --clay:#B6906B;
  --zand:#F1E1C8;

  /* tinten, altijd afgeleid van het palet */
  --oxide-licht:#6B3226;
  --clay-donker:#8C6A48;
  --zand-zacht:#F6EEDF;

  /* het vlak waar we nu op staan — elke sectie zet deze vier opnieuw */
  --vlak:var(--mist);
  --inkt:var(--umber);
  --kaartje:var(--zand-zacht);
  --lijn:rgba(182,144,107,.45);
  --accenttekst:var(--clay-donker);   /* kleine accenttekst; kantelt mee per vlak */

  --wrap:1140px;
  --straal:14px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--mist);
  color:var(--umber);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

/* ---- Typografie -------------------------------------------------------------------------
   Vloeiend met clamp: op de gemeten site is h1 80 px bij 1280 px breed. Dat is op een telefoon
   veel te groot, dus schaalt hij mee in plaats van op een vaste maat te blijven staan. */
h1,h2,h3,h4,.serif{
  font-family:'AcciaPiano',Lora,Georgia,serif;
  font-weight:300;                 /* NOOIT hoger: dan maakt de browser zelf vet */
  color:var(--inkt);
  margin:0 0 .5em;
  line-height:1.15;
  letter-spacing:.005em;
}
h1{font-size:clamp(38px,6.2vw,80px);}
h2{font-size:clamp(29px,3.9vw,48px);}
h3{font-size:clamp(19px,1.6vw,23px);line-height:1.3;}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.65;opacity:.92;}
.bovenkop{
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accenttekst);margin:0 0 .7em;font-family:'Plus Jakarta Sans',sans-serif;
}

/* ---- Indeling --------------------------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
section{background:var(--vlak);color:var(--inkt);padding:clamp(56px,7vw,104px) 0;}
section.strak{padding:0;}

/* De vier oppervlakken. Alles daarbinnen erft hiervan — dat is de kernregel. */
.vlak-mist {--vlak:var(--mist); --inkt:var(--umber);--kaartje:var(--zand-zacht);--lijn:rgba(182,144,107,.45);--accenttekst:var(--clay-donker);}
.vlak-zand {--vlak:var(--zand); --inkt:var(--umber);--kaartje:#FBF6EC;          --lijn:rgba(78,30,20,.18); --accenttekst:var(--clay-donker);}
/* Op oxide moet de accentkleur juist LICHTER worden. Met de donkere kleimtint haalt hij 2,81 —
   gemeten, en daarmee onleesbaar. Warm Clay zelf komt op 4,9 en voldoet wel. */
.vlak-oxide{--vlak:var(--oxide);--inkt:var(--zand); --kaartje:var(--oxide-licht);--lijn:rgba(241,225,200,.28);--accenttekst:var(--clay);}

/* ---- Knoppen ---------------------------------------------------------------------------- */
.knop{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:600;
  padding:14px 30px;border-radius:100px;      /* volledig rond, zoals de site en het merkboek */
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.knop:hover{transform:translateY(-1px);}
.knop-primair{background:var(--clay);color:var(--umber);border-color:var(--clay);}
.knop-primair:hover{background:#C4A180;border-color:#C4A180;}
.knop-rand{background:transparent;color:var(--inkt);border-color:var(--lijn);}
.knop-rand:hover{border-color:var(--clay);}
.vlak-oxide .knop-rand{border-color:rgba(241,225,200,.5);}
.knop-groep{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}

/* ---- Kaarten en rasters ------------------------------------------------------------------ */
.raster{display:grid;gap:22px;}
.raster-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.raster-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.raster-4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}
.kaart{
  background:var(--kaartje);color:var(--inkt);
  border-radius:var(--straal);padding:26px 26px 28px;
}
.kaart h3{margin-bottom:.4em;}
.kaart p{font-size:15.5px;line-height:1.65;margin:0;opacity:.9;}
.kaart-icoon{display:block;width:56px;height:56px;margin-bottom:14px;}

/* ---- Kop van de pagina -------------------------------------------------------------------
   Meelopend, want de belangrijkste knop en het telefoonnummer moeten altijd bereikbaar zijn —
   dat is een van de scherpste punten uit het conversieonderzoek voor dit soort aankopen. */
.kop{
  position:sticky;top:0;z-index:50;
  background:var(--oxide);color:var(--zand);
  border-bottom:1px solid rgba(241,225,200,.14);
}
.kop .wrap{display:flex;align-items:center;gap:22px;min-height:70px;}
.merk{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--zand);flex:0 0 auto;}
/* Het merkteken als MASKER met een paletkleur erachter — zo is het één gecachet bestand dat
   overal de kleur van zijn omgeving aanneemt, in plaats van 4 kB SVG in elke pagina. */
.merkteken{
  width:30px;height:30px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url('beeld/merkteken.svg') center/contain no-repeat;
          mask:url('beeld/merkteken.svg') center/contain no-repeat;
}
.merk .merkteken{color:var(--clay);}
.merk .naam{
  font-family:'AcciaPiano',serif;font-weight:300;font-size:21px;
  letter-spacing:.18em;text-transform:uppercase;line-height:1;
}
.menu{display:flex;gap:26px;margin-left:auto;align-items:center;}
.menu a{
  text-decoration:none;font-size:15px;font-weight:500;color:var(--zand);
  opacity:.85;padding:6px 0;border-bottom:1.5px solid transparent;
}
.menu a:hover,.menu a[aria-current="page"]{opacity:1;border-bottom-color:var(--clay);}
.kop-acties{display:flex;gap:10px;align-items:center;flex:0 0 auto;}
.tel{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  color:var(--zand);font-size:15px;font-weight:600;white-space:nowrap;
}
.tel:hover{color:var(--clay);}
.menuknop{
  display:none;background:none;border:1.5px solid rgba(241,225,200,.4);color:var(--zand);
  border-radius:9px;padding:7px 11px;font-size:17px;cursor:pointer;line-height:1;
}

/* ---- Hero -------------------------------------------------------------------------------- */
/* De hero is een DONKER vlak en moet dus dezelfde tokens krijgen als .vlak-oxide. Zonder deze
   regel valt --inkt terug op de wortelwaarde (donker) en staat de tweede knop met donkere tekst en
   een donkere rand op een donkere foto: gemeten contrast 1,31. Zelfde valkuil als elders — een
   onderdeel mag zijn kleur niet zelf kiezen, het vlak bepaalt hem. */
.hero{
  --inkt:var(--zand);--lijn:rgba(241,225,200,.45);--accenttekst:var(--clay);
  position:relative;background:var(--oxide);color:var(--zand);
  min-height:clamp(440px,46vw,660px);display:flex;align-items:flex-end;
  padding:0 0 clamp(44px,5vw,72px);overflow:hidden;
}
.hero-foto{position:absolute;inset:0;background-size:cover;background-position:center 34%;}
/* Exact het verloop van de bestaande site: twee stops, dus een kaarsrechte lijn van 12% bovenin
   naar volledig oxide onderin. Nooit onbedekt, waardoor het beeld rustig blijft. */
.hero-waas{position:absolute;inset:0;background:linear-gradient(0deg,var(--oxide) 18%,rgba(78,30,20,.12) 89%);}
.hero .wrap{position:relative;}
.hero h1{color:var(--zand);max-width:16em;text-shadow:0 2px 18px rgba(32,19,13,.45);}
.hero .lead{max-width:34em;color:var(--zand);text-shadow:0 1px 12px rgba(32,19,13,.5);}

/* ---- Citaat direct onder de hero (28-08-2026) ------------------------------------------------
   Vervangt een cijfer-trust-strip: compact, geen sterren, gewoon één bestaande, echte getuigenis. */
.hero-citaat-vlak{padding-top:clamp(30px,3.6vw,44px);padding-bottom:clamp(30px,3.6vw,44px);}
.hero-citaat{max-width:42em;margin:0 auto;text-align:center;}
.hero-citaat p{
  font-family:'AcciaPiano',serif;font-weight:300;font-style:italic;
  font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--inkt);margin:0 0 10px;
}
.hero-citaat cite{font-style:normal;font-size:13.5px;color:var(--accenttekst);}

/* ---- Sectiekop --------------------------------------------------------------------------- */
.sectiekop{max-width:44em;margin-bottom:clamp(30px,3.4vw,46px);}
.sectiekop.midden{margin-left:auto;margin-right:auto;text-align:center;}
.streep{height:2px;width:76px;background:var(--clay);border:0;margin:0 0 22px;}
.sectiekop.midden .streep{margin-left:auto;margin-right:auto;}

/* ---- Beeld ------------------------------------------------------------------------------- */
.beeld{border-radius:var(--straal);overflow:hidden;background:var(--oxide-licht);}
.beeld img{width:100%;height:100%;object-fit:cover;}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.6vw,56px);align-items:center;}
.duo.om > .beeld{order:2;}

/* ---- Projectgalerij-lightbox (projectgalerij.js) ------------------------------------------ */
.wgz-overlay{
  display:none;position:fixed;inset:0;z-index:200;background:rgba(32,19,13,.92);
  align-items:center;justify-content:center;padding:40px;
}
.wgz-foto{max-width:min(1100px,88vw);max-height:82vh;object-fit:contain;border-radius:var(--straal);}
.wgz-sluit{
  position:absolute;top:18px;right:22px;width:40px;height:40px;border-radius:50%;border:none;
  background:rgba(241,225,200,.14);color:var(--zand);font-size:20px;cursor:pointer;line-height:1;
}
.wgz-sluit:hover{background:rgba(241,225,200,.26);}
.wgz-pijl{
  position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  border:none;background:rgba(241,225,200,.14);color:var(--zand);font-size:26px;cursor:pointer;
  line-height:1;
}
.wgz-pijl:hover{background:rgba(241,225,200,.26);}
.wgz-vorige{left:18px;}
.wgz-volgende{right:18px;}
@media(max-width:640px){
  .wgz-overlay{padding:16px;}
  .wgz-pijl{width:38px;height:38px;font-size:20px;}
  .wgz-vorige{left:6px;}
  .wgz-volgende{right:6px;}
}

/* ---- Recensies --------------------------------------------------------------------------- */
.recensie{background:var(--kaartje);border-radius:var(--straal);padding:26px 26px 24px;}
.recensie .naam{
  font-family:'AcciaPiano',serif;font-weight:300;font-size:17px;text-align:center;
  margin:0 0 12px;color:var(--inkt);
}
.recensie .lijn{height:1px;background:var(--clay);border:0;margin:0 auto 16px;width:64%;}
.recensie p{font-size:15px;line-height:1.7;margin:0;opacity:.92;}
/* Sterren zijn geen versiering: ze dragen een oordeel en moeten dus leesbaar zijn. De gangbare
   goudtint haalt op een licht kaartje maar 3,3 — deze diepere tint komt boven de norm uit. */
.sterren{color:#7A5410;letter-spacing:.12em;margin-top:14px;font-size:14px;text-align:center;}

/* ---- Uitklapbare vragen ------------------------------------------------------------------ */
.vraag{border-bottom:1px solid var(--lijn);}
.vraag summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:'AcciaPiano',serif;font-weight:300;font-size:clamp(18px,1.5vw,22px);color:var(--inkt);
}
.vraag summary::-webkit-details-marker{display:none;}
.vraag summary::after{
  content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:24px;color:var(--clay);font-family:'Plus Jakarta Sans',sans-serif;
}
.vraag[open] summary::after{content:'–';}
.vraag .antwoord{padding:0 40px 22px 0;font-size:16px;opacity:.92;}

/* ---- Stappen ----------------------------------------------------------------------------- */
.stap{display:flex;gap:18px;align-items:flex-start;}
.stap .nr{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:var(--clay);color:var(--umber);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:17px;
}

/* ---- Voet -------------------------------------------------------------------------------- */
.voet{background:var(--umber);color:var(--zand);padding:56px 0 30px;}
.voet a{color:var(--zand);text-decoration:none;opacity:.82;}
.voet a:hover{opacity:1;color:var(--clay);}
.voet h4{color:var(--zand);font-size:16px;margin-bottom:.8em;}
.voet .raster{gap:34px;}
.voet .klein{font-size:14px;line-height:1.9;opacity:.85;}
/* Een inline link is maar zo hoog als zijn letters (gemeten 18 px), ongeacht de regelhoogte
   eromheen. Als blok-in-regel mét opvulling wordt het aanraakvlak wél echt 26 px — boven de
   WCAG-ondergrens van 24. Voetlinks zijn bijzaak; 44 px zou de voet onnodig opblazen. */
.voet .klein a{display:inline-block;padding:4px 0;}
.voet .onder{
  border-top:1px solid rgba(241,225,200,.16);margin-top:40px;padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;opacity:.7;
}

/* ---- Lange leesteksten (voorwaarden, privacy) --------------------------------------------
   Max ~44 em: langere regels laten het oog de volgende regel niet meer terugvinden. */
.leestekst{max-width:44em;}
.leestekst h2{font-size:clamp(22px,2.2vw,28px);margin-top:1.8em;}
.leestekst h2:first-of-type{margin-top:0;}
.leestekst ul{padding-left:1.2em;margin:0 0 1.1em;}
.leestekst li{margin-bottom:.45em;}

/* ---- Verklaringen (privacy, cookies en opslag) — 13 oktober 2026 ---------------------------
   De pagina's worden gegenereerd uit de goedgekeurde tekst (scripts/verklaring-naar-html.pl). Lopende tekst
   blijft op leesbare breedte; alleen de tabellen mogen breder, want daar staan drie tot vijf kolommen in.
   Op een telefoon wordt elke rij een kaartje met de kolomnaam boven elke cel (data-label), zodat er niet
   zijwaarts gescrold hoeft te worden. */
.leestekst.verklaring{max-width:62em;}
.leestekst.verklaring > p,.leestekst.verklaring > ul,.leestekst.verklaring > ol,.leestekst.verklaring > blockquote{max-width:44em;}
.leestekst ol{padding-left:1.4em;margin:0 0 1.1em;}
.leestekst h3{font-size:clamp(18px,1.7vw,21px);margin:0 0 .6em;}
.leestekst .versie{font-size:15px;opacity:.8;}
.leestekst hr.scheiding{border:0;border-top:1px solid var(--lijn);margin:1.6em 0;}
.leestekst code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:var(--kaartje);padding:.08em .35em;border-radius:3px;overflow-wrap:anywhere;}
.leestekst blockquote.kader{margin:0 0 1.4em;padding:1em 1.2em;background:var(--kaartje);border-left:3px solid var(--clay);border-radius:0 var(--straal) var(--straal) 0;}
.leestekst blockquote.kader > :last-child{margin-bottom:0;}
.tabel-wrap{overflow-x:auto;margin:0 0 1.6em;}
.leestekst table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55;}
.leestekst th,.leestekst td{border:1px solid var(--lijn);padding:.6em .75em;text-align:left;vertical-align:top;overflow-wrap:break-word;}
.leestekst thead th{background:var(--kaartje);font-weight:600;}
.leestekst tbody th{background:var(--kaartje);font-weight:600;}
@media (max-width:760px){
  .tabel-wrap{overflow-x:visible;}
  .leestekst table,.leestekst tbody,.leestekst tr,.leestekst td,.leestekst tbody th{display:block;width:100%;}
  .leestekst thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .leestekst tr{border:1px solid var(--lijn);border-radius:var(--straal);margin:0 0 .9em;overflow:hidden;}
  .leestekst td,.leestekst tbody th{border:0;border-bottom:1px solid var(--lijn);padding:.55em .8em;}
  .leestekst tr > :last-child{border-bottom:0;}
  .leestekst td::before{content:attr(data-label);display:block;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--accenttekst);margin-bottom:.15em;}
  .leestekst td:not([data-label])::before{display:none;}
}

/* ---- Toegankelijkheid: een zichtbare focus, overal dezelfde ------------------------------- */
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:4px;}

/* ---- Klein scherm ------------------------------------------------------------------------ */
@media (max-width:860px){
  .menu{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--oxide);flex-direction:column;gap:0;padding:8px 24px 18px;
    border-bottom:1px solid rgba(241,225,200,.14);
  }
  .menu.open{display:flex;}
  .menu a{padding:12px 0;border-bottom:1px solid rgba(241,225,200,.1);width:100%;}
  .menuknop{display:block;margin-left:auto;}
  .kop-acties .knop{display:none;}      /* op mobiel wint bellen van een knop die ruimte kost */

  /* Alles wat je met een vinger raakt minstens 44 px hoog (WCAG 2.5.8). Gemeten waren het logo
     30 px, de menuknop 34 en — het vervelendst — het telefoonpictogram 26. Juist tikbaar bellen
     is bij dit soort aankopen het belangrijkste wat een telefoon moet kunnen. */
  .kop .merk,.kop .tel,.menuknop{min-height:44px;display:inline-flex;align-items:center;}
  .kop .tel{padding:0 10px;font-size:20px;}
  .duo{grid-template-columns:1fr;}
  .duo.om > .beeld{order:0;}
  .tel span{display:none;}              /* alleen het pictogram, tikbaar */
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}