/* basis.css: de stijl van de demo van Blommestijn (Steiger), overgenomen op 31-10-2026. Wat de echte site erbij heeft staat in extra.css. */

@font-face{font-family:'PublicSans';src:url('fonts/publicsans.woff2') format('woff2-variations');
  font-weight:100 900;font-display:swap}
@font-face{font-family:'Bebas';src:url('fonts/bebasneue.woff2') format('woff2');font-display:swap}
:root{--accent-op-donker:#12a5e6}
.kop:has(.koptekst--affiche)::before{background:linear-gradient(90deg,rgba(8,10,9,.86) 0%,rgba(8,10,9,.7) 38%,rgba(8,10,9,.32) 68%,rgba(8,10,9,.2) 100%)}
@media (max-width:61.99rem){.kop:has(.koptekst--affiche)::before{background:linear-gradient(180deg,rgba(8,10,9,.35) 0%,rgba(8,10,9,.78) 55%,rgba(8,10,9,.88) 100%)}}
.koptekst.koptekst--affiche{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  padding:0;max-inline-size:820px;display:grid;gap:13px;align-content:center}
.afstreep{display:block;inline-size:56px;block-size:17px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 16' fill='none' stroke='%2312a5e6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 14H14V10H26V6H38V2H50'/%3E%3C/svg%3E") left center/contain no-repeat}
.afboven{margin:0;font-size:clamp(11.5px,.85vw,13px);font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-op-donker)}
.koptekst--affiche h1.afkop{margin:0;font-family:'Bebas','PublicSans',Impact,sans-serif;font-weight:400;
  font-size:clamp(36px,4.7vw,68px);line-height:.96;letter-spacing:.01em;text-transform:uppercase;color:#fff;text-wrap:balance}
.afkop em{font-style:normal;color:var(--accent-op-donker)}
/* een lange kop (boven 32 tekens, zoals "Uitbouw en verbouwing in het Groene Hart") wordt vier regels en zakt
   op 1440 onder de vouw; dan een maat kleiner */
@media (min-width:62rem){.koptekst--affiche h1.afkop--lang{font-size:clamp(52px,6.4vw,104px)}}
.afzin{margin:0;font-size:clamp(15px,1.05vw,17px);line-height:1.5;color:rgba(255,255,255,.9);max-inline-size:46ch}
.afknoppen{display:flex;flex-wrap:wrap;gap:12px}
html:has(.koptekst--affiche){background:#0c0e0d}
.afknoppen .knop{text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;inline-size:auto;flex:0 0 auto;padding-inline:20px;min-block-size:46px}
.afknoppen .knop.afknop-rand{background:transparent;color:#fff;border:2px solid var(--accent-op-donker)}
.afknop-rand:hover{background:rgba(255,255,255,.08)}
.afgoogle{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;text-decoration:none;color:#fff;margin-top:4px}
.afballen{display:flex}
.afbal{inline-size:44px;block-size:44px;overflow:hidden;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:16px;
  color:#fff;border:2px solid #121414;margin-inline-start:-10px;font-family:Roboto,Arial,sans-serif}
.afbal:first-child{margin-inline-start:0}
.afbal--g{background:#fff}
.afbal img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.afbal--g .ic{inline-size:20px;block-size:20px}
.afgoogle-tekst{display:grid;gap:3px;line-height:1.2}
.afsterren{color:#FBBC04;font-size:19px;letter-spacing:2px}
.afgoogle-tekst small{font-size:12.5px;color:rgba(255,255,255,.82)}
.afgoogle-tekst b{font-size:15px}
.afgoogle-links{display:flex;flex-wrap:wrap;gap:4px 14px}
.afgoogle-links a{font-size:12.5px;color:#fff;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(255,255,255,.5)}
.afgoogle-links a:hover{text-decoration-color:#fff}
/* HET MENU IN HUN MERK, bij de affiche (Aaron, 06-10-2026: "make the navigation a bit more brandy custom,
   more alive"). Donker paneel, de menu-items in de kopletter met een pijl in de accentkleur, de balk
   erboven ook donker zolang het menu open is. */
.balk:has(.menupaneel[data-open]){--balk-grond:#0c0e0d;--balk-inkt:#fff;--balk-stil:#fff;--balk-lijn:rgba(255,255,255,.16)}
.menupaneel{background:#0c0e0d;color:#fff;padding-block:6px 22px}
.menupaneel a:not(.knop){font-family:'Bebas','PublicSans',Impact,sans-serif;font-weight:400;font-size:32px;letter-spacing:.02em;
  text-transform:uppercase;color:#fff;min-block-size:62px;border-color:rgba(255,255,255,.12);justify-content:space-between}
.menupaneel a:not(.knop)::after{content:"→";font-family:'PublicSans',sans-serif;font-size:20px;color:var(--accent-op-donker)}
.menupaneel a:not(.knop):active{color:var(--accent-op-donker)}
.menuknoppen .knop.knop--lijn{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.28)}
.menuknoppen .knop .ic{color:var(--accent-op-donker)}
/* DE COMPUTER: de tekst vult de linkerkant tot het formulier, en allebei staan ze in het midden
   van de foto (Aaron, 06-10-2026: "more covering the left side" en het formulier "more centered"). */
@media (min-width:62rem){
  .koprij:has(.koptekst--affiche){grid-template-columns:minmax(0,1fr) clamp(315px,22vw,370px);
    grid-template-areas:"tekst form";grid-template-rows:1fr;align-items:center;column-gap:clamp(40px,6vw,110px);
  }
  /* geen extra ruimte boven en onder: de kop vult precies het scherm (herostart.js) */
}
/* op de telefoon staat het formulier direct onder de kop en zitten de knoppen al onderin: dan alleen kop en Google */
@media (max-width:61.99rem){.afzin,.afknoppen{display:none}.afboven{font-size:12px;letter-spacing:.2em}
  .koptekst--affiche h1.afkop{font-size:clamp(38px,9.5vw,58px)}.afbal{inline-size:38px;block-size:38px;font-size:15px}}
/* DE TELEFOON (Aaron, 06-10-2026): "the image has to be the full page ... and all the way on the bottom
   you have the offerte starting, so you can only see the top". De foto vult het eerste scherm onder de
   aankondigingsbalk, de tekst staat onderin de foto, en het formulier begint 90 pixels boven de
   onderrand. --kopboven meet JS_BALK. Sinds 07-10-2026 ook op een tablet: daar paste kop plus formulier net niet. */
@media (max-width:61.99rem){
  .kop:has(.koptekst--affiche){background:var(--grond)}
  .kop:has(.koptekst--affiche) .kopbeeld,.kop:has(.koptekst--affiche)::before{inset:0 0 auto 0;block-size:calc(100svh - var(--kopboven,90px))}
  .kop:has(.koptekst--affiche) .koptekst.koptekst--affiche{margin-block-start:0;padding:0 0 18px;gap:12px;
    min-block-size:calc(100svh - var(--kopboven,90px) - 290px);align-content:end}
  .afzin{display:block;font-size:16px}
}
/* DE TELEFOON, TWEEDE RONDE (Aaron, 06-10-2026, met een schermafdruk van rembrandtbouw.nl ernaast):
   "it's nice and it's beautiful but it's too overwhelming, there's too much happening". Dus bij de
   affiche op een telefoon: geen aankondigingsbalk, geen vaste knoppenbalk, geen chatbol, een donkerder
   foto, een grote kop die de breedte vult, de zin met lucht, twee brede knoppen onder elkaar en de
   Google-score. De hero vult het scherm; het formulier komt daarna. Ook op een tablet. */
@media (max-width:61.99rem){
  body:has(.koptekst--affiche) .aankondiging,
  body:has(.koptekst--affiche) .chatknop,body:has(.koptekst--affiche) .chatwolk{display:none}
  /* de vaste balk (bellen, WhatsApp) schuift pas in beeld voorbij de kop */
  .vastebalk--affiche{transform:translateY(115%);transition:transform .25s ease}
  html[data-voorbijkop] .vastebalk--affiche{transform:none}
  .kop:has(.koptekst--affiche)::before{background:linear-gradient(180deg,rgba(8,10,9,.66) 0%,rgba(8,10,9,.8) 45%,rgba(8,10,9,.9) 100%)}
  .kop:has(.koptekst--affiche) .koptekst.koptekst--affiche{min-block-size:calc(100svh - var(--kopboven,0px) - var(--balkh,77px) - 170px);
    align-content:center;gap:20px;padding:24px 0 40px}
  .koptekst--affiche h1.afkop{font-size:clamp(40px,11.5vw,60px);line-height:.98}
  .afboven{font-size:12px;letter-spacing:.24em}
  .afzin{font-size:18px;line-height:1.7;color:rgba(255,255,255,.86)}
  .afknoppen{display:flex;flex-direction:column;gap:12px}
  .afknoppen .knop{inline-size:100%;justify-content:center;min-block-size:58px}
  .afbal{inline-size:34px;block-size:34px}
  .kop:has(.koptekst--affiche) .kopbeeld > .gemaakt{font-size:9px;opacity:.75}
}

:root{
  /* DRIE KLEUREN. WIT, ZWART, EEN ACCENT. En dat is geen richtlijn maar de bouw.
 *
 * Hier stonden --inkt, --stil en --donker uit feiten.json, met als uitleg "geef hem
 * een spoor van de merkkleur mee". Dat sijpelde door: bij Groenewegen was de tekst
 * #161A17 en de donkere baan #141C17, allebei groen aangezet, en dan is de pagina
 * niet zwart-wit met een accent maar overal een beetje groen. Aaron, 03-09-2026:
 * "ik wil alleen 3 kleuren, wit zwart en 1 accentkleur."
 *
 * Dus staan zwart, grijs en de donkere baan hier vast en NEUTRAAL. Het enige wat
 * per klant verschilt is het accent (en welke tekstkleur daarop leesbaar is). De
 * grijzen zijn tinten van hetzelfde zwart, dus het blijven drie kleuren.
 *
 * Wil je hier ooit van afwijken voor een niche waar dat echt moet, verander het dan
 * HIER en niet in de feiten van een klant: dan is het een keuze voor de hele niche
 * en geen toevalligheid van een demo. */
  --wit:#FFFFFF; --grond:#F5F5F5; --inkt:#141414;
  --stil:#5F6266;
  --lijn:rgba(20,20,20,.13); --lijn2:rgba(20,20,20,.07);
  --accent:#12a5e6; --op-accent:#141414;
  /* HET ACCENT ZELF IS NIET ALTIJD LEESBAAR, en dat hangt af van de ondergrond.
     Bij Schoonmaakbedrijf TipTop (donkerpaars) verdwenen de vinkjes in de zwarte
     aankondigingsbalk en in de hero; bij De Top Gevelonderhoud (lichtgeel) verdween
     de tekst onder het formulier op wit. Beide keren stond het accent er wel, maar
     zag je het niet. Daarom twee varianten, uitgerekend en niet aangenomen: dezelfde
     kleur, opgehelderd of verduisterd tot hij 4,5 haalt op zijn eigen ondergrond. */
  --accent-donker:#12a5e6;
  /* TEGEN #F5F5F5 EN NIET TEGEN WIT, en dat scheelt precies het verschil tussen wel en
     niet leesbaar.
   *
     Dit stond op '#FFFFFF'. Sinds 07-09-2026 wordt de merkkleur uit het logo gemeten en
     verduisterd tot wit er exact 4,5 op haalt, en dan landt hij per constructie NET op de
     lat. Bij Van de Burgt & Strooij gaf dat #00884d: 4,54 op wit, maar 4,16 op #F5F5F5,
     en de sectie Werkwijze staat op die grijze grond. Elke volgende klant met een gemeten
     kleur zou daar hetzelfde krijgen; met de oude sjabloonkleur #2B4C7E viel het niet op
     omdat die 7,90 haalde.

     Deze pagina heeft twee lichte gronden, wit en #F5F5F5. Rekenen tegen de donkerste van
     de twee betekent dat het op allebei klopt; rekenen tegen wit betekent dat het op een
     ervan net niet klopt. */
  --accent-licht:#0a6fa6;
  /* Het vlak achter het logo op de donkere kaprand van het offerteformulier. Zie
     LOGOVLAK hierboven. Geen vlak betekent ook geen ruimte eromheen: anders staat er
     een onzichtbaar blok van 8 bij 12 dat het logo van de rest wegduwt. */
  --logo-vlak-kaprand:transparent;
  --logo-pad-kaprand:0;
  /* IN DE BALK STAAT BIJNA NOOIT EEN VLAK ACHTER HET LOGO. Het stond er een keer, bij
     Van de Burgt en Strooij, en dat is precies de demo waar Aaron over viel: een zwart
     blokje midden in een witte strook, dat leest als een vergissing. Wat er gebeurt als
     een logo op wit wegvalt staat hieronder bij --balk-grond: dan wordt de HELE balk
     donker.
     EEN UITZONDERING, sinds 24-09-2026: een logo met twee inkten. Valt er op wit EN op
     donker inkt weg, dan bestaat er geen kale grond die werkt en komt er wel een vlak,
     in een tint van hun eigen accent. Dat is geen pleister maar de enige plek waar hun
     hele logo leesbaar is. Zie besteGrond() in logovlak.js. */
  --logo-vlak-balk:transparent;
  --logo-pad-balk:0;
  /* het vlakje achter het logo zolang de balk doorzichtig over de foto staat; weg bij logo_zonder_vlak */
  --logo-vlak-boven:#fff;
  --logo-pad-boven:6px 10px;
  --donker:#141414;
  --dinkt:#F2F3F1; --dstil:rgba(242,243,241,.66); --dlijn:rgba(242,243,241,.18);
  /* ------------------------------------------------------------- DE BALK BOVENAAN
   * Licht of donker, in een keer voor de balk, het uitklapmenu en de kop van
   * privacy.html. GEEN NIEUWE KLEUR: donker leent precies de tokens die de
   * voettekst en de aankondigingsbalk al gebruiken, en licht is wat het was.
   * Zo blijft het wit, zwart en een accent.
   *
   * Wanneer donker: als logovlak.js meet dat de inkt van het logo op wit wegvalt en
   * op #141414 niet. Bij Van de Burgt en Strooij is dat 59% tegen 0%: hun woordmerk
   * is grotendeels wit met een groene ampersand. Eerder kwam daar een zwart blokje
   * achter het logo uit; nu de hele balk, want dan leest het als een keuze.
   *
   * De knop is het enige echte knelpunt. Hij is een gevuld blok in de accentkleur, en
   * een donker accent zakt weg in een donkere balk: de sjabloonwaarde #2B4C7E haalt
   * 2,14 op #141414. Daarom haalt hij zijn vulling uit --accent-donker, de variabele
   * die al bestaat voor "dit accent moet leesbaar zijn op #141414", en rekent LABEL
   * uit welk label daar dan weer op past. Zo is een donkere balk veilig bij elke
   * klantkleur, ook een donkerblauwe. */
  --balk-grond:var(--wit);
  --balk-inkt:var(--inkt);
  --balk-stil:var(--stil);
  --balk-lijn:var(--lijn);
  --balk-lijn2:var(--lijn2);
  --balk-hover:var(--lijn2);
  --balk-accent:var(--accent-licht);
  --balk-knop:var(--accent);
  --balk-op-knop:var(--op-accent);
  /* De focusring is var(--inkt) en dus onzichtbaar op een donkere balk. Zelfde
     probleem als bij de voet en de aankondigingsbalk, zelfde oplossing. */
  --balk-focus:var(--inkt);
  --r:10px; --rk:8px;
  /* MEEGROEIEND, sinds 01-10-2026. Stond vast op 1200px: op een scherm van 1920 breed was
     dat 63 procent en op 2560 nog 47, en Aaron zag "alles in het midden en de zijkanten
     open". Nu 1200 op een laptop tot 1760 op een groot scherm. Lopende tekst houdt zijn
     eigen grens in ch, dus regels worden niet onleesbaar lang; wat breder wordt zijn de
     rasters, de kaarten en de foto's. */
  --kolom:clamp(1200px, 88vw, 1760px);
  --curve:cubic-bezier(.25,.46,.45,.94);
  --vastebalk-hoog:0px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-block-start:92px}
[id]{scroll-margin-block-start:92px}
body{margin:0;background:var(--wit);color:var(--inkt);
  font-family:'PublicSans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-inline-size:100%;display:block}
figure{margin:0}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.14;letter-spacing:-.022em}
h1{font-size:clamp(29px,3.9vw,46px);font-weight:800}
h2{font-size:clamp(24px,2.9vw,36px);font-weight:700}
h3{font-size:clamp(18px,1.8vw,21px);font-weight:700;letter-spacing:-.012em}
p{margin:0 0 1em}
.wrap{inline-size:min(var(--kolom),100% - 40px);margin-inline:auto}
.smal{max-inline-size:62ch}
.stil{color:var(--stil)}
.klein{font-size:14.5px}
section{padding-block:clamp(44px,5.5vw,82px)}
.vzr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
:focus-visible{outline:3px solid var(--inkt);outline-offset:2px}

.slot :focus-visible,.voet :focus-visible,.kop :focus-visible,
.aanvraagkop :focus-visible,.aankondiging :focus-visible{outline-color:#fff}
.ic{display:inline-grid;place-items:center;inline-size:1.15em;block-size:1.15em;flex:none}
.ic svg{inline-size:100%;block-size:100%}

/* ------------------------------------------------------------------ knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-block-size:50px;padding:12px 22px;border-radius:var(--rk);
  border:1px solid transparent;font-weight:700;font-size:16px;
  text-decoration:none;cursor:pointer;line-height:1.2;
  transition:background .16s var(--curve),border-color .16s var(--curve)}
.knop--accent{background:var(--accent);color:var(--op-accent)}
.knop--accent:hover{filter:brightness(1.08)}
.knop--donker{background:var(--donker);color:var(--dinkt)}
.knop--lijn{background:var(--wit);color:var(--inkt);border-color:var(--lijn)}
.knop--lijn:hover{border-color:var(--inkt)}
.knop--wit{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.knop--wit:hover{background:rgba(255,255,255,.12)}
.knop--groot{min-block-size:56px;font-size:17px;inline-size:100%}
.knoprij{display:flex;flex-wrap:wrap;gap:12px}

/* -------------------------------------------------------------- de melding */
.melding{background:var(--inkt);color:#fff;font-size:13.5px;text-align:center;
  padding:9px 16px;margin:0}
.melding a{color:#fff}

/* ================================================= DE AANKONDIGINGSBALK ====
   Het eerste wat iemand ziet, nog boven de balk: het cijfer, of ze nu open zijn,
   en de belofte die deze aannemer onderscheidt. Heeft een klant geen beoordelingen,
   dan schuift er een kernpunt voor in de plaats, zodat het er altijd drie zijn. Op
   een breed scherm naast elkaar, op een smal scherm een die doorwisselt; drie punten
   naast elkaar op 390 breed wordt onleesbaar klein. */
.aankondiging{background:var(--donker);color:var(--dinkt);font-size:13.5px}
.aankondiging ul{list-style:none;margin:0;padding:0;display:grid}
.aankondiging li{display:flex;align-items:center;justify-content:center;gap:8px;
  min-block-size:42px;padding-block:4px}
.aankondiging b{font-weight:800;color:#fff}
.aankondiging .ic{color:var(--accent-donker);inline-size:1em;block-size:1em}
.aankondiging .sterrenrij .ic{inline-size:13px;block-size:13px}
.aankondiging .open{color:#8FD08F;font-weight:700}
.aankondiging .dicht{color:var(--dstil);font-weight:700}
@media (max-width:63.99rem){
  .aankondiging[data-draait] li{display:none}
  .aankondiging[data-draait] li[data-aan]{display:flex;
    animation:aankomen .4s var(--curve) both}
  @keyframes aankomen{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
}
@media (min-width:64rem){
  .aankondiging ul{grid-auto-flow:column;grid-auto-columns:max-content;
    justify-content:center;gap:clamp(22px,3.4vw,52px)}
}

/* ------------------------------------------------------------------ de balk
   Licht of donker, en dat hangt aan het logo. Elke regel hieronder haalt zijn kleur
   uit een --balk-token, zodat er maar EEN plek is waar die keuze valt (:root) en
   niet een tweede stel regels dat je kunt vergeten mee te veranderen. */
/* DE STATUSBALK VAN DE TELEFOON. Met viewport-fit=cover (nodig voor de onderrand van de vaste balk) begint de
   pagina onder de klok en de batterij; Aaron, 07-10-2026: "it's inside my phone where I see my time". Dus
   schuift alles die hoogte op, de balk blijft eronder plakken, en het vlak erachter is donker. Zonder
   statusbalk (computer, Android zonder inham) is env() 0 en verandert er niets. */
body{padding-block-start:env(safe-area-inset-top,0px)}
body::before{content:"";position:fixed;inset:0 0 auto 0;block-size:env(safe-area-inset-top,0px);background:#0c0e0d;z-index:70;pointer-events:none}
.balk{position:sticky;inset-block-start:env(safe-area-inset-top,0px);z-index:50;background:var(--balk-grond);
  color:var(--balk-inkt);border-block-end:1px solid var(--balk-lijn)}
.balk :focus-visible{outline-color:var(--balk-focus)}
.balk .knop--accent{background:var(--balk-knop);color:var(--balk-op-knop)}
.balkrij{display:flex;align-items:center;gap:14px;padding-block:11px}
.balklogo{display:inline-flex;align-items:center;min-block-size:44px;
  margin-inline-end:auto;font-weight:800;font-size:18px;letter-spacing:-.02em;
  text-decoration:none;gap:10px;color:var(--balk-inkt)}
/* GROTER DAN JE DENKT. Op 38px is het logo een postzegel naast een navigatie van
   zeven woorden, terwijl het het enige op die balk is dat van HEN is. Een
   ondernemer die zijn eigen pagina opent zoekt als eerste zijn logo. */
.balklogo img{background:var(--logo-vlak-balk);padding:var(--logo-pad-balk);
  border-radius:8px;block-size:clamp(54px,5.6vw,72px);inline-size:auto;
  object-fit:contain;max-inline-size:min(210px,42vw)}
/* NOOIT OVER TWEE REGELS. Bij Bijma (een liggend logo van 360 breed, plus hun nummer)
   brak "Voor en na" over drie regels en de knop over twee; Aaron zag het op de plaat,
   28-09-2026. Het logo heeft nu een grens in de breedte (object-fit schaalt het netjes
   terug) en geen enkel woord op de balk mag afbreken. Past het dan nog niet, dan wijkt
   eerst het nummer (het belicoon blijft), en pas daarna iets anders. */
.balknav a,.balkrij > .knop,.balklogo{white-space:nowrap}
.balkrij > *{flex-shrink:0}
.balknav{margin-inline-start:12px}
/* WAT WIJKT ALS HET NIET PAST. Dat hangt af van hoe breed hun logo is en hoeveel kopjes
   er in het menu staan, dus dat meet de pagina zelf (JS_BALK): eerst verdwijnt het nummer
   (het belicoon blijft, bellen kan nog met een tik), en past het dan nog niet, dan wordt
   het logo kleiner. Bij Bijma stak de knop anders 11 pixels buiten de balk. */
.balkrij[data-krap] .balktelnr{display:none}
.balkrij[data-krap="2"] .balklogo img{max-inline-size:150px}
.balkrij[data-krap="2"] .balknav a{font-size:14.5px;padding-inline:6px}
.balknav{display:none;align-items:center;gap:2px}
@media (min-width:64rem){.balknav{display:flex}}
.balknav a{text-decoration:none;font-weight:600;font-size:15.5px;padding:10px clamp(7px,.8vw,12px);
  border-radius:var(--rk);display:inline-flex;align-items:center;min-block-size:44px;
  color:var(--balk-stil)}
.balknav a:hover{color:var(--balk-inkt);background:var(--balk-hover)}
.balktel{display:none;align-items:center;gap:8px;min-block-size:44px;font-weight:800;
  text-decoration:none;font-size:16px;white-space:nowrap;color:var(--balk-inkt)}
@media (min-width:48rem){.balktel{display:inline-flex}}
.balktel .ic{color:var(--balk-accent)}
.balkrij > .knop{display:none}
@media (min-width:48rem){.balkrij > .knop{display:inline-flex}}
.menuknop{display:inline-flex;align-items:center;justify-content:center;
  inline-size:46px;block-size:46px;border:1px solid var(--balk-lijn);border-radius:var(--rk);
  background:transparent;cursor:pointer;color:var(--balk-inkt)}
@media (min-width:64rem){.menuknop{display:none}}

.menupaneel{display:none;border-block-start:1px solid var(--balk-lijn);
  background:var(--balk-grond);color:var(--balk-inkt);padding-block:4px 14px}
.menupaneel[data-open]{display:block}
/* OVER DE PAGINA, NIET ERTUSSEN (Aaron, 07-10-2026: "when you open the navigation it pushes down the page, make
   sure it goes on top of the page so nothing moves"). Het paneel hangt onder de balk (die is sticky, dus
   gepositioneerd) en de balk houdt zijn hoogte; te lang voor het scherm, dan scrolt het paneel zelf. */
.menupaneel{position:absolute;inset-inline:0;inset-block-start:100%;max-block-size:calc(100svh - 100%);overflow-y:auto;
  overscroll-behavior:contain;box-shadow:0 18px 30px rgba(0,0,0,.22)}
.menupaneel a{display:flex;align-items:center;min-block-size:50px;font-weight:600;
  text-decoration:none;border-block-end:1px solid var(--balk-lijn2)}
.menupaneel a:last-of-type{border-block-end:0}
.menupaneel .knop{margin-block-start:12px;inline-size:100%;border-block-end:0}
.menuknoppen{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;margin-block-start:14px}
.menuknoppen .knop{margin-block-start:0;justify-content:center;gap:8px;white-space:nowrap}
.menuknoppen .knop .ic{color:var(--accent)}

/* DE BALK OVER DE FOTO, 05-10-2026. Aaron: "make the navigation bar transparent and when
   you start scrolling it gets solid. Make sure the things that are on the navigation bar
   are easy to see." Dat is ook wat de hero-start al vroeg (een balk die doorzichtig is
   zolang de foto in beeld is).
   Alleen als het script draait (html[data-overbalk], gezet door JS_OVERBALK): zonder
   script blijft de balk dicht en schuift de foto er niet onder. De foto schuift precies
   de hoogte van de balk omhoog (--balkh, gemeten), en de tekst in de kop zakt evenveel,
   zodat er niets onder de balk verdwijnt.
   Leesbaar op elke foto: witte tekst, een donker verloop van boven achter de balk, een
   schaduw onder de letters, en het logo op een wit vlakje (een donker logo valt anders
   weg op een donkere foto). Open het menu op de telefoon, dan is de balk dicht. */
html[data-overbalk] .kop{margin-block-start:calc(-1 * var(--balkh,0px));
  padding-block-start:calc(clamp(30px,5vw,62px) + var(--balkh,0px))}
html[data-overbalk] .balk{transition:background-color .25s ease,border-color .25s ease}
.balk[data-boven]{background:transparent;border-block-end-color:transparent;
  --balk-inkt:#fff;--balk-stil:#fff;--balk-lijn:rgba(255,255,255,.5);
  --balk-hover:rgba(255,255,255,.16);--balk-accent:#fff;--balk-focus:#fff;
  --logo-vlak-balk:var(--logo-vlak-boven);--logo-pad-balk:var(--logo-pad-boven)}
.balk[data-boven]::before{content:"";position:absolute;inset:0 0 -48px 0;z-index:-1;
  pointer-events:none;background:linear-gradient(180deg,rgba(8,10,9,.66) 0%,rgba(8,10,9,.38) 60%,rgba(8,10,9,0) 100%)}
.balk[data-boven] .balknav a,.balk[data-boven] .balktel{text-shadow:0 1px 3px rgba(0,0,0,.55)}
.balk[data-boven] .balklogo{text-shadow:0 1px 3px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:reduce){html[data-overbalk] .balk{transition:none}}

/* ==================================================== DE KOP MET HET FORMULIER
   Het hart van deze niche. Links de belofte en het bewijs, rechts het formulier.
   Op een telefoon komt het formulier ONDER de belofte maar BOVEN al het andere:
   wie wil aanvragen hoeft niet te scrollen. */
.kop{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  padding-block:clamp(30px,5vw,62px)}
/* DE HERO VULT HET SCHERM OP DE COMPUTER. Aaron, 01-10-2026: "make the hero image cover a
   big bit more of the page, only on a laptop or computer." Hij was altijd 713 hoog, ook op
   een scherm van 1080 of 1440. Nu de volle hoogte onder de balken (--kopboven meet JS_BALK
   zelf, 140 is de terugval), en de rij met tekst en formulier zakt naar de onderkant. Op
   de telefoon verandert er niets. */
@media (min-width:62rem){
  .kop{min-block-size:calc(100svh - var(--kopboven,140px));display:flex;flex-direction:column}
  .kop > .koprij{flex:1 1 auto}
}
.kopbeeld{position:absolute;inset:0;z-index:-2;background:var(--donker)}
.kopbeeld img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 58%}
/* Een effen sluier van twee gelijke stops: aantoonbaar eigen grond onder de tekst
   en de contrastmeting weegt hem mee. */
/* .52 en niet .72: de tekst staat op een eigen vlak (.koptekst) en het formulier
   is een witte kaart, dus deze sluier hoeft alleen de foto te temmen. Op .72 was
   het resultaat dat de klant wil kopen nauwelijks meer te zien, en dat is precies
   het beeld dat de offerte verkoopt. */
/* SINDS 28-09-2026 EEN VERLOOP en geen effen .52 meer. De tekst staat nu onderin op een
   eigen half doorzichtig vlak (zie .koptekst), dus bovenin hoeft de sluier bijna niets
   meer te doen en blijft de foto helder. Onderin, achter dat vlak, zakt hij naar .46 zodat
   de tekst ook op een witte muur leest. */
.kop::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,16,14,.10) 0%,rgba(14,16,14,.14) 45%,rgba(10,12,11,.46) 100%)}
.koprij{display:grid;gap:18px;align-items:start;
  grid-template-areas:"tekst" "form" "bij"}

.koptekst{grid-area:tekst}.koprij > .aanvraag{grid-area:form}.kopbij{grid-area:bij}
@media (min-width:62rem){
  /* Breed genoeg: de twee tekstpanelen schuiven tegen elkaar tot een geheel en het
     formulier staat er in zijn volle hoogte naast. */
  /* TWEEDERDE VOOR DE KOP, EENDERDE VOOR HET FORMULIER. Stond op 1.05 tegen .95, dus
     bijna half om half, en dan is het eerste wat iemand ziet een invulblok in plaats van
     de site. Aaron, 24-09-2026: "kleiner, foto groter", en daarna nog een keer: "ik wil
     offerte formulier iets kleiner hebben". Van 1.05/.95 naar 1.6/.9 naar 1.95/.85, dus
     van half om half naar bijna zeventig om dertig. Het formulier houdt op een scherm van
     1440 nog ruim 350 pixels, en dat is genoeg voor een keuzelijst, twee velden en een
     knop. Ga je verder, dan worden de velden smaller dan hun eigen label en gaat het
     eruitzien als een ingeklemd formulier in plaats van een uitnodiging.
     Op smal scherm verandert er niets: daar staat het gewoon onder de kop. */
  /* DRIE RIJEN, EN DE DERDE IS LEEG. Dat is geen omweg maar de enige manier.
     Het formulier staat in een kolom ernaast en loopt over alle rijen. Een element dat
     rijen overspant duwt die rijen uit elkaar: met twee auto-rijen verdeelde de browser
     de formulierhoogte netjes over allebei, en dan staat de kop bovenaan, de zin
     onderaan, en een gat van negentig pixels ertussen. align-content helpt daar niet,
     want er is geen vrije ruimte om te verdelen: de rijen zijn zelf gegroeid.
     Met een derde rij op 1fr gaat alle overloop daarheen, en staan kop en zin weer tegen
     elkaar. Viel niet op zolang er drie vinkjes in dat tweede paneel stonden; sinds die
     naar de aankondigingsbalk verhuisd zijn (zie BALK_EET) wel. */
  /* HET TEKSTVLAK ZO BREED ALS DE TEKST, sinds 04-10-2026. Aaron bij B. Khani: "the transparent
     box on the hero section is way too long ... the text on the left side, but it's all empty."
     Met 1.95fr liep de tekstkolom altijd tot het formulier, en met een tweede paneel (cijfer en
     knoppen) rekte allebei de panelen mee. Nu is de kolom zo breed als de breedste van de twee,
     hoogstens 760 pixels, en duwt justify-content het formulier naar rechts. Het formulier houdt
     zijn eigen breedte, ongeveer de 350 tot 400 pixels van hiervoor. */
  .koprij{grid-template-columns:fit-content(760px) clamp(300px,21vw,350px);justify-content:space-between;
    grid-template-areas:". form" "tekst form" "bij form";
    /* ONDERLANGS, SINDS 28-09-2026. De lege rij staat nu BOVEN de tekst in plaats van
       eronder, zodat kop en zin onderin het beeld zakken en de foto erboven vrij blijft.
       Aaron koos dat uit vijf opzetten ("D1"). De minimale hoogte houdt ook bij een kort
       formulier een stuk foto boven de tekst. */
    grid-template-rows:minmax(clamp(48px,6vw,96px),1fr) auto auto;
    column-gap:clamp(22px,3vw,44px);row-gap:0}
  /* DE ONDERKANTEN GELIJK. Aaron, 28-09-2026: "it should be aligned perfectly, the bottom
     with the offerte." Is het formulier het hoogst, dan zakt de tekst al vanzelf naar de
     onderkant (de lege rij bovenaan vangt de rest). Maar is de tekst het hoogst (een lange
     zin, vinkjes, cijfer en knoppen), dan bleef het formulier bovenaan hangen en liep het
     vlak links er 80 pixels onderuit. Het formulier zakt nu mee naar de onderkant. */
  .koprij > .aanvraag{align-self:end}
  .koptekst{border-end-start-radius:0;border-end-end-radius:0;padding-block-end:4px}
  .kopbij{border-start-start-radius:0;border-start-end-radius:0;padding-block-start:0}
  /* Twee vlakken die samen een zijn: geen rand en geen schaduw op de naad. */
  .koprij:has(.kopbij) .koptekst{border-block-end:0;border-end-start-radius:0;border-end-end-radius:0;
    padding-block-end:6px}
  .koprij:has(.kopbij) .kopbij{border-block-start:0;border-start-start-radius:0;border-start-end-radius:0;
    padding-block-start:6px}
  .koprij:has(.kopbij) :is(.koptekst,.kopbij){-webkit-backdrop-filter:none;backdrop-filter:none;
    background:rgba(12,14,13,.62)}
  .kop[data-vlak="licht"] .koprij:has(.kopbij) :is(.koptekst,.kopbij){background:rgba(255,255,255,.88)}
  .kopbij .kopzin{margin-block-start:0}
}
/* De tekstkolom krijgt een EIGEN vlak. Twee redenen: het leest beter over een
   drukke bouwfoto, en de contrastmeting kan een sluier op een pseudo-element van
   een buurelement niet meewegen. Hij meldde de bijzinnen daardoor als 1,00:1,
   en dat is precies de melding die je serieus moet nemen in plaats van wegklikken. */
/* HALF DOORZICHTIG, MET WAT VERVAGING. Aaron, 28-09-2026: "add a transparent black or
   white background so the text is shown better." Een dichte zwarte doos had hij eerder
   afgewezen; dit vlak laat de foto erdoor. Donker is de standaard. Op een donkere foto
   wordt het licht, zie JS_VLAK: "this depends on which color the background image is." */
.koptekst,.kopbij{background:rgba(12,14,13,.52);border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(7px) saturate(1.1);backdrop-filter:blur(7px) saturate(1.1);
  border-radius:var(--r);padding:clamp(18px,2.4vw,28px)}
@media (min-width:62rem){
  /* Alleen de kop en de zin: dan is het vlak zo breed als de tekst en niet de hele
     kolom. Met een tweede paneel eronder blijven ze allebei even breed, anders passen de
     randen niet op elkaar. */
  .koprij:not(:has(.kopbij)) .koptekst{justify-self:start;max-inline-size:760px}
}
.kop[data-vlak="licht"] .koptekst,.kop[data-vlak="licht"] .kopbij{
  background:rgba(255,255,255,.80);border-color:rgba(255,255,255,.55);
  box-shadow:0 18px 44px rgba(0,0,0,.22)}
.kop[data-vlak="licht"] h1,.kop[data-vlak="licht"] .kopbewijs li,
.kop[data-vlak="licht"] .kopbewijs span.bij{color:#16181a}
.kop[data-vlak="licht"] .kopzin{color:rgba(22,24,26,.78)}
/* Het cijfer en de diensten onder de zin. Alleen wat echt is: het cijfer staat er pas als
   reviews.url en reviews.opgehaald er zijn (CIJFER_ECHT), de diensten alleen als ze geen
   invulopdracht meer zijn. */
.kopextra{display:grid;gap:16px;margin-block-start:22px;justify-items:start}
.kopcijfer{display:flex;align-items:center;gap:13px;color:#fff;text-decoration:none}
.kopcijfer b{font-size:40px;font-weight:800;line-height:1}
.kopcijfer .sterren{color:#F2B544;font-size:16px;letter-spacing:2.5px;line-height:1}
.kopcijfer small{display:block;font-size:13.5px;color:rgba(255,255,255,.75);margin-block-start:4px}
.kopdiensten{display:flex;gap:9px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.kopdiensten li{border:1px solid rgba(255,255,255,.30);color:#fff;background:rgba(255,255,255,.07);
  border-radius:6px;padding:7px 13px;font-size:14px}
/* De knoppen: dezelfde .knop als overal, dus geen nieuwe vorm. De tweede is de witte
   omlijnde variant, en op het lichte vlak wordt die donker omlijnd. */
.kopknoppen{display:flex;gap:10px;flex-wrap:wrap;margin-block-start:4px}
.kopknoppen .knop .ic{inline-size:1.05em;block-size:1.05em}
/* Op een smal scherm staat het formulier er meteen onder: daar is de offerteknop dubbel
   en duwt hij het eerste invoerveld omlaag. De belknop blijft, want bellen is op een
   telefoon juist een tik. */
@media (max-width:61.99rem){.kopknoppen .knop--accent{display:none}}
.kop[data-vlak="licht"] .kopknoppen .knop--wit{color:#16181a;border-color:rgba(22,24,26,.35)}
.kop[data-vlak="licht"] .kopknoppen .knop--wit:hover{background:rgba(22,24,26,.06)}
.kop[data-vlak="licht"] .kopcijfer{color:#16181a}
.kop[data-vlak="licht"] .kopcijfer small{color:rgba(22,24,26,.66)}
.kop[data-vlak="licht"] .kopdiensten li{border-color:rgba(22,24,26,.18);color:#16181a;background:rgba(255,255,255,.6)}
@media (max-width:47.99rem){
  .kopcijfer b{font-size:30px}
  .kopextra{margin-block-start:16px;gap:12px}
}
.kop h1{color:#fff;max-inline-size:19ch}
.kop .kopzin{color:rgba(255,255,255,.9);font-size:clamp(16.5px,1.5vw,19px);
  max-inline-size:46ch;margin:0}
/* Staat de zin in hetzelfde vlak als de kop, dan moet er lucht tussen. In het aparte
   paneel deed de rand dat werk; hier is er geen rand meer. */
.koptekst .kopzin{margin-block-start:14px}
.kopbewijs{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
.kopbewijs li{display:flex;gap:11px;align-items:flex-start;color:#fff;font-size:16px}
.kopbewijs .ic{color:var(--accent-donker);margin-block-start:.16em;inline-size:1.05em;block-size:1.05em}
.kopbewijs b{font-weight:700}
/* De bijzin is NIET lichter maar dunner. Een lichtere witte tekst op een sluier
   haalde 3,26 en daarna 3,85 tegen een eis van 4,5; het onderscheid tussen de
   belofte en de toelichting komt nu uit het gewicht, en dan is er geen contrast
   meer op te offeren. */
.kopbewijs span.bij{color:#fff;font-weight:400}

/* het formulier */
/* Het formulier draagt het merk van de klant: een gekleurde kaprand met het logo
   erin, zodat de kaart niet een willekeurig wit blok is maar zichtbaar van dit
   bedrijf. Dat is precies waar een offerteformulier vertrouwen wint of verliest. */
.aanvraag{background:var(--wit);color:var(--inkt);border-radius:var(--r);
  box-shadow:0 14px 40px rgba(10,14,10,.26);overflow:hidden}
.aanvraagkop{background:var(--donker);padding:14px clamp(20px,2.6vw,28px);
  display:flex;align-items:center;gap:12px;border-block-end:3px solid var(--accent)}
/* EEN LOGO MET EEN DICHTE ACHTERGROND MAG NIET OMGEKEERD WORDEN.
   filter:brightness(0) invert(1) maakt alles wit. Bij een doorzichtig logo is dat
   precies goed; bij een logo dat als JPG op hun site stond, met een witte
   achtergrond eromheen, wordt het een wit blok. Op de site van AMER stond daardoor
   een leeg wit vierkant in de kaprand van het offerteformulier. Vandaar twee
   varianten, en feiten.beeld.logo_doorzichtig bepaalt welke. */
/* HETZELFDE LOGO OP ELKE PLEK, IN DEZELFDE KLEUR.
 *
 * Hier stond filter:brightness(0) invert(1): op de donkere kaprand werd het logo
 * volledig wit gemaakt. Bij een woordmerk van een kleur werkt dat, maar het is dan
 * wel een ANDER logo dan in de balk bovenaan, waar het in hun eigen kleuren staat.
 * Aaron, 04-09-2026: "zorg dat het logo hetzelfde is ook kwa kleur op het offerte
 * formulier." Terecht: een ondernemer die zijn logo twee keer anders ziet, ziet twee
 * fouten in plaats van een ontwerpkeuze.
 *
 * Dus altijd het witte vlakje en nooit een filter. Dat werkt voor allebei de soorten
 * logo (doorzichtig en met een dichte achtergrond), en het scheelt een variant die
 * van feiten.beeld.logo_doorzichtig af hing.
 *
 * En groter: 56px in plaats van 46. Het logo is het enige op die kaprand dat van HEN
 * is; de rest is van ons. */
/* EEN BREED WOORDMERK MAG DE KAPRAND NIET OPETEN. Alleen de hoogte stond vast en de
   breedte was vrij; bij Treur & Kieftenbelt (een liggend woordmerk) werd het logo daardoor
   zo breed dat "OFFERTE AANVRAGEN" ernaast half buiten het paneel viel en er "OFFE
   AANVRA" stond. Dat viel pas op toen het formulier smaller werd (24-09-2026). Met een
   bovengrens op de breedte schaalt object-fit het logo netjes terug; een staand of vierkant
   logo merkt er niets van, want dat komt nooit aan die grens. */
.aanvraagkop img{block-size:56px;inline-size:auto;max-inline-size:min(260px,54%);
  object-fit:contain;
  background:var(--logo-vlak-kaprand);padding:var(--logo-pad-kaprand);
  border-radius:8px;display:block;filter:none}
.aanvraagkop span{font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dstil);margin-inline-start:auto;
  text-align:end;line-height:1.3;flex:0 0 auto}
.aanvraagin{padding:clamp(18px,2.4vw,26px) clamp(20px,2.6vw,28px) clamp(20px,2.6vw,28px)}
/* HET OFFERTEVENSTER: hetzelfde formulier, over de pagina. Het venster zelf is
   doorzichtig; het formulier is de kaart. Te hoog voor het scherm (een kleine telefoon
   met het toelichtingsveld) scrolt het venster, niet de pagina erachter. */
.offertevenster{inline-size:min(100% - 24px, 30rem);max-inline-size:none;
  max-block-size:calc(100dvh - 24px);margin:auto;padding:0;border:0;background:transparent;
  overflow:auto;overscroll-behavior:contain;color:var(--inkt)}
.offertevenster::backdrop{background:rgba(10,12,10,.62);backdrop-filter:blur(3px)}
.offertevenster[open]{animation:vensterin .26s cubic-bezier(.2,.8,.2,1)}
@keyframes vensterin{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.offertevenster .aanvraag{box-shadow:0 24px 60px rgba(0,0,0,.4)}
.offertevenster .aanvraagkop{padding-inline-end:64px}
.offertevenster .aanvraagkop span{display:none}
.vensterdicht{position:absolute;inset-block-start:12px;inset-inline-end:12px;z-index:2;
  display:grid;place-items:center;inline-size:44px;block-size:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.vensterdicht:hover{background:rgba(255,255,255,.24)}
.vensterdicht:focus-visible{outline:3px solid #fff;outline-offset:2px}
.vensterdicht svg{inline-size:22px;block-size:22px}
html:has(.offertevenster[open]){overflow:hidden}
@media (prefers-reduced-motion:reduce){.offertevenster[open]{animation:none}}
.aanvraag h2{font-size:clamp(18px,1.7vw,21px)}
.aanvraag .gratis{display:inline-flex;align-items:center;gap:7px;font-size:13px;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  margin-block-end:8px}
.aanvraag .zin{color:var(--stil);font-size:15px;margin:8px 0 18px}

@media (max-width:47.99rem){
  .kop{padding-block:12px clamp(30px,5vw,62px)}
  .koprij{gap:14px}
  .koptekst,.kopbij{padding:14px 16px}
  /* DE TELEFOON: DE FOTO EERST, KOP EN CIJFER ONDERIN, HET FORMULIER EROVERHEEN.
     Aaron, 28-09-2026, over Meesterfix: "on mobile it looks horrible." De foto was een
     smalle rand rond een volle donkere doos met kop, cijfer, labels en een belknop, en het
     formulier plakte er direct onder. Uit tien opzetten koos hij deze ("B"): de foto
     bovenaan over 540 pixels, kop en cijfer onderin op het half doorzichtige vlak, geen
     labels en geen knoppen (het formulier staat er meteen onder, en bellen kan in de balk),
     en het formulier begint over de onderrand van de foto. Wat eronder komt staat op de
     lichte grond van de pagina. */
  .kop{padding-block:0 22px;background:var(--grond)}
  .kopbeeld{inset:0 0 auto 0;block-size:540px}
  .kop::before{inset:0 0 auto 0;block-size:540px;
    background:linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.06) 50%,rgba(10,12,11,.35) 100%)}
  .koptekst{margin-block-start:282px;padding:16px 18px}
  .kop h1{font-size:30px}
  .kopdiensten,.kopknoppen{display:none}
  .kopextra{margin-block-start:12px}
  .koprij{gap:0}
  .koprij > .aanvraag{margin-block-start:14px;box-shadow:0 14px 34px rgba(0,0,0,.18)}
  .kopbij{margin-block-start:14px}
  .aanvraagkop{padding:10px 16px}
  .aanvraagkop img{block-size:44px;padding:6px 9px}
  .aanvraagin{padding:16px 16px 18px}
  .aanvraag .zin{display:none}
  .aanvraag .gratis{margin-block-end:5px}
  .aanvraag h2{margin-block-end:12px}
  .aanvraag .veld{margin-block-end:10px}
}
.veld{display:grid;gap:5px;margin-block-end:13px}
.veld label{font-weight:600;font-size:14.5px}
.veld input,.veld select,.veld textarea{font:inherit;font-size:16px;color:var(--inkt);
  padding:11px 13px;border:1px solid var(--lijn);border-radius:var(--rk);
  background:var(--wit);min-block-size:48px;inline-size:100%}
.veld textarea{min-block-size:92px;resize:vertical}
.veld input:focus-visible,.veld select:focus-visible,.veld textarea:focus-visible{
  outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.formvoet{margin-block-start:12px;font-size:13.5px;color:var(--stil);
  display:flex;gap:8px;align-items:flex-start}
.formvoet .ic{color:var(--accent-licht);margin-block-start:.15em}
.formmelding{margin-block-start:12px;padding:12px 14px;border-radius:var(--rk);
  background:var(--grond);border:1px solid var(--lijn);font-size:14.5px}
.formmelding b{display:block}

/* =============================================== DE CONTACTKNOPPEN ONDER DE KOP
   Op een telefoon is bellen sneller dan typen, dus die knoppen staan pal onder
   het formulier en niet ergens onderaan de pagina. */
.snelrij{background:var(--grond);border-block-end:1px solid var(--lijn)}
.snelin{display:grid;gap:10px;padding-block:14px;
  grid-auto-flow:column;grid-auto-columns:1fr;align-items:center}
.snelin .knop{inline-size:100%}

.snelin .smal{display:none}
.snelin .snelapp{display:none}
@media (max-width:47.99rem){
  .snelin .breed{display:none}
  .snelin .smal{display:inline}
  .snelin .snelapp{display:inline-flex}
  .snelin{gap:8px}
  .snelin .knop{padding-inline:10px;font-size:15px}
}

/* ----------------------------------------------------------- vertrouwensbalk */
.cijferrij{display:grid;gap:clamp(14px,2vw,22px)}
@media (min-width:40rem){.cijferrij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:62rem){.cijferrij{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cijferblok{border:1px solid var(--lijn);border-radius:var(--r);padding:18px 20px;
  display:grid;gap:3px;background:var(--wit)}
.cijferblok b{font-size:clamp(24px,2.6vw,31px);font-weight:800;letter-spacing:-.03em;
  line-height:1.1;display:flex;align-items:center;gap:8px}
.cijferblok b .sterrenrij{color:var(--accent)}
.cijferblok span{color:var(--stil);font-size:14.5px}

/* ------------------------------------------------------------------ secties */
.sectiekop{display:grid;gap:11px;margin-block-end:clamp(22px,2.8vw,34px)}
.sectiekop p{margin:0;color:var(--stil);max-inline-size:62ch}
/* --accent-licht en niet --accent: dit label staat op wit EN op #F5F5F5, en de kale
   merkkleur haalt op die grijze grond de 4,5 niet. Zie de uitleg bij --accent-licht. */
.label{font-size:12.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-licht)}

/* werkzaamheden */
.werkrij{display:grid;gap:clamp(14px,2vw,20px)}
@media (min-width:44rem){.werkrij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:70rem){.werkrij{grid-template-columns:repeat(3,minmax(0,1fr))}}
.werk{border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;
  background:var(--wit);display:flex;flex-direction:column}
.werk img{inline-size:100%;block-size:auto;aspect-ratio:16/10;object-fit:cover}
.werkin{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.werkin p{margin:0;color:var(--stil);font-size:15.5px}
.vanaf{display:inline-flex;align-items:baseline;gap:6px;font-size:14.5px;
  color:var(--stil);margin-block-start:2px}
.vanaf b{font-size:18px;font-weight:800;color:var(--inkt);letter-spacing:-.02em}
.werkin .knop{margin-block-start:auto;align-self:start}

@media (max-width:43.99rem){
  .werkin{padding:15px 16px 17px;gap:7px}
  .werkin h3{font-size:18px}
  .werkin p{font-size:15px}
  .werkin .knop{min-block-size:44px;padding-inline:14px;font-size:14.5px}
  .werk--anders .werkin{padding-block:17px}
}

/* GEMAAKT BEELD: een chip linksboven op elk gemaakt beeld, rechtsboven in de kop (daar
   staat links de tekst en is rechtsboven, boven het formulier, nog ruimte). Zie GEMAAKT. */
.werk,.proj{position:relative}
.gemaakt{position:absolute;z-index:3;inset-block-start:10px;inset-inline-start:10px;
  padding:4px 8px;border-radius:4px;background:rgba(14,16,14,.72);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.09em;line-height:1.2;pointer-events:none}
.kopbeeld > .gemaakt{inset-inline-start:auto;inset-inline-end:14px;inset-block-start:14px}
/* Met de balk over de foto (JS_OVERBALK) zakt het merkteken mee, anders zit het achter de knop. */
html[data-overbalk] .kopbeeld > .gemaakt{inset-block-start:calc(var(--balkh,0px) + 14px)}
.vngroot .gemaakt{inset-block-start:10px;inset-inline-start:10px}

/* voor en na: het oude kiekje op het nieuwe werk. Zie de uitleg boven de sectie. */

.vnrij{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-inline:calc((100% - 100vw) / 2);padding:14px max(20px, (100vw - 100%) / 2) 34px;
  scroll-padding-inline:max(20px, (100vw - 100%) / 2)}
.vnrij::-webkit-scrollbar{display:none}
.vnrij > .vnkaart{flex:0 0 min(80vw,380px);scroll-snap-align:start}
.vnrij[data-aantal="1"] > .vnkaart{flex-basis:min(100%,420px)}
.vnveeg{display:flex;align-items:center;gap:8px;margin:-14px 0 0;font-size:14px;color:var(--stil)}
.vnveeg .ic{inline-size:18px;block-size:18px}
@media (min-width:62rem){
  .vnrij{display:grid;grid-template-columns:repeat(var(--vnkol,3),minmax(0,1fr));
    gap:clamp(34px,4vw,52px) clamp(14px,2.2vw,34px);align-items:start;
    overflow:visible;margin-inline:0;padding:0}
  .vnrij > .vnkaart{flex:none}
  .vnrij[data-aantal="1"]{grid-template-columns:minmax(0,34rem)}
  .vnveeg{display:none}
}
.vnkaart{display:grid;gap:clamp(30px,3vw,40px);min-inline-size:0;align-content:start}
.vnbeeld{position:relative;margin-inline-start:8px}
.vngroot{position:relative;margin:0;display:grid;border-radius:var(--r);overflow:hidden;
  background:var(--donker);aspect-ratio:4/5;box-shadow:0 1px 0 var(--lijn)}
.vnlaag{grid-area:1 / 1;min-inline-size:0;min-block-size:0;transition:opacity .45s ease}
.vnlaag :is(picture,img){display:block;inline-size:100%;block-size:100%}
.vnlaag img{object-fit:cover}
.vngroot .vnlaag--voor,.vnprintfoto .vnlaag--na{opacity:0}
.vnkaart.is-om .vngroot .vnlaag--voor,.vnkaart.is-om .vnprintfoto .vnlaag--na{opacity:1}
.vnkaart.is-om .vngroot .vnlaag--na,.vnkaart.is-om .vnprintfoto .vnlaag--voor{opacity:0}
.vnlabel{position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:2;
  padding:4px 10px;border-radius:99px;font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:var(--op-accent,#fff)}
@media (min-width:44rem){.vnlabel{inset-block-start:14px;inset-inline-end:14px;padding:5px 12px;font-size:12.5px}}
.vnlabel [data-voor],.vnprintschrift [data-na]{display:none}
.vnkaart.is-om .vnlabel{background:rgba(14,16,14,.8);color:#fff}
.vnkaart.is-om .vnlabel [data-voor],.vnkaart.is-om .vnprintschrift [data-na]{display:inline}
.vnkaart.is-om .vnlabel [data-na],.vnkaart.is-om .vnprintschrift [data-voor]{display:none}

.vnprint{position:absolute;inset-inline-start:-8px;inset-block-end:-22px;z-index:3;
  inline-size:44%;padding:6px 6px 0;margin:0;border:0;border-radius:3px;background:#fff;
  box-shadow:0 14px 28px -6px rgba(10,12,10,.42),0 2px 5px rgba(10,12,10,.2);
  rotate:-5deg;cursor:pointer;font:inherit;color:#1b1b1b;text-align:start;
  transition:rotate .3s ease,translate .3s ease,scale .3s ease}
.vnkaart:nth-child(3n+2) .vnprint{rotate:4deg}
.vnkaart:nth-child(3n) .vnprint{rotate:-2.5deg}
.vnprint::before{content:"";position:absolute;inset-block-start:-9px;inset-inline-start:30%;
  inline-size:42%;block-size:17px;rotate:-4deg;background:rgba(236,230,214,.82);
  box-shadow:0 1px 2px rgba(0,0,0,.14);pointer-events:none}
@media (hover:hover){.vnprint:hover{rotate:0deg;translate:0 -4px;scale:1.04}}
.vnprint:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.vnprintfoto{display:grid;aspect-ratio:1/1;overflow:hidden;background:#ddd}
.vnprintschrift{display:flex;justify-content:space-between;align-items:center;gap:6px;
  padding:6px 2px 7px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.vnprintschrift small{font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:none;color:#6b6b6b}
@media (max-width:34rem){.vnprintschrift small{display:none}}

.vnprint--leeg{cursor:default}
.vnprint--leeg .vnprintfoto{background:#f3f3f1;place-items:center;text-align:center;padding:8px;
  font-size:12px;line-height:1.3;color:#555}
.vnprint--leeg .ic{inline-size:22px;block-size:22px;color:#888;margin-inline:auto;display:block}
@media (prefers-reduced-motion:reduce){.vnlaag,.vnprint{transition:none}}
.vnin h3{font-size:clamp(19px,2vw,23px);margin-block-end:8px}
.vnin > p{margin:0;color:var(--stil);font-size:15.5px}
.vnwat{margin-block-start:14px}
.vnwat summary{cursor:pointer;list-style:none;font-weight:700;font-size:15px;
  color:var(--accent);display:inline-flex;align-items:center;gap:8px;
  min-block-size:44px}
.vnwat summary::-webkit-details-marker{display:none}
.vnwat summary::after{content:"";inline-size:8px;block-size:8px;flex:none;
  border-inline-end:2.2px solid currentColor;border-block-end:2.2px solid currentColor;
  transform:rotate(45deg);margin-block-start:-4px;transition:transform var(--snel)}
.vnwat[open] summary::after{transform:rotate(225deg);margin-block-start:2px}
.vnwat:not([open]) .vnlijst{display:none}
.vnlijst{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:9px}
.vnlijst li{display:flex;gap:10px;color:var(--stil);font-size:15px}
.vnlijst .ic{color:var(--accent-licht);margin-block-start:.2em;inline-size:1em;block-size:1em}
.vnfeit{display:flex;flex-wrap:wrap;gap:10px 26px;margin-block-start:16px;
  padding-block-start:14px;border-block-start:1px solid var(--lijn)}
.vnfeit div{display:grid;gap:1px}
.vnfeit b{font-size:16px;font-weight:800;letter-spacing:-.02em}
.vnfeit span{font-size:13px;color:var(--stil)}

/* projecten */
.projrij{display:grid;gap:clamp(14px,2vw,20px)}
@media (min-width:44rem){.projrij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:70rem){.projrij{grid-template-columns:repeat(3,minmax(0,1fr))}}
.proj{border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;
  background:var(--wit);display:flex;flex-direction:column}
.proj img{inline-size:100%;block-size:auto;aspect-ratio:16/10;object-fit:cover}
.projin{padding:17px 19px 19px;display:flex;flex-direction:column;gap:7px;flex:1}
.projin h3{font-size:17.5px}
.projin p{margin:0;color:var(--stil);font-size:14.5px}
/* HET SLOT VAN DE BEOORDELINGEN: een regel, geen sectie.
   Cijfer links, de knop rechts, en op een smal scherm onder elkaar. Geen sectiekop
   erboven: die stond er wel en maakte er een tweede volledige sectie van, terwijl dit
   maar een samenvatting is van wat er hierboven al staat. */
.revslot{display:grid;gap:16px;align-items:center;padding:18px clamp(18px,2.4vw,24px);
  border:1px solid var(--lijn);border-radius:var(--r);background:var(--wit)}
@media (min-width:46rem){.revslot{grid-template-columns:1fr auto}}
.revslotcijfer{display:flex;align-items:center;gap:11px;font-size:15.5px;
  color:var(--stil);line-height:1.4}
.revslotcijfer b{color:var(--inkt);font-size:19px}
.revslotcijfer .ic{inline-size:22px;block-size:22px;flex:none}
/* ZELF STERREN GEVEN. Vijf sterren die naar de eigen beoordeelpagina wijzen, met het
   aantal in het adres. Wijs je er een aan, dan kleuren hij en alles links ervan mee;
   dat doet :hover op de rij plus ~ voor wat erna komt, zonder script. */
.revgeef{display:grid;gap:4px;justify-items:start}
@media (min-width:46rem){.revgeef{justify-items:end;text-align:end}}
.revgeefzin{font-size:14.5px;font-weight:600;color:var(--inkt)}
.revgeefsterren{display:flex;gap:2px;margin-inline:-6px}
.revgeefsterren a{display:grid;place-items:center;inline-size:46px;block-size:46px;
  border-radius:10px;color:#CDD1D6;transition:color .12s,transform .12s}
.revgeefsterren .ic{inline-size:32px;block-size:32px}
.revgeefsterren:is(:hover,:focus-within) a{color:var(--accent)}
.revgeefsterren a:is(:hover,:focus-visible) ~ a{color:#CDD1D6}
.revgeefsterren a:hover{transform:scale(1.12)}
.revgeefsterren a:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
@media (prefers-reduced-motion:reduce){.revgeefsterren a{transition:none}}
/* De uitklapper. Een details, dus hij werkt zonder script en de browser regelt zelf
   het toetsenbord. */
.revmeerblok{margin-block-start:14px}
.revmeerblok summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--accent-licht);
  min-block-size:44px;display:inline-flex;align-items:center;gap:8px;
  list-style:none;padding-inline:2px}
.revmeerblok summary::-webkit-details-marker{display:none}
.revmeerblok summary::after{content:"";inline-size:7px;block-size:7px;
  border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;
  rotate:45deg;translate:0 -2px}
.revmeerblok[open] summary::after{rotate:225deg;translate:0 2px}
.revmeerblok .revrij{margin-block-start:14px}

.revactie{margin-block-start:clamp(22px,3vw,32px);padding:20px clamp(20px,2.6vw,26px);
  border:1px solid var(--lijn);border-radius:var(--r);background:var(--wit);
  display:grid;gap:16px;align-items:center}
@media (min-width:52rem){.revactie{grid-template-columns:1fr auto}}
.revactie b{display:block;font-size:17px;margin-block-end:3px}
.revactie span{color:var(--stil);font-size:15px}
.revactie .knop{inline-size:100%;justify-content:center}
@media (min-width:52rem){.revactie .knop{inline-size:auto}}
.werk--anders{background:var(--grond);display:flex;align-items:center}
.werk--anders .werkin{padding-block:clamp(24px,3vw,34px)}
.nustand{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;
  margin-block:0 16px;font-size:15px}
.nustand .open{color:#1B7A3E}.nustand .dicht{color:var(--stil)}
.nustand .stil{font-size:14px}
.formnoscript{margin-block:0 14px;padding:12px 14px;border-radius:10px;
  background:var(--grond);border:1px solid var(--lijn);font-size:14.5px;line-height:1.5}
.projmeta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--stil);
  margin-block-start:4px;padding-block-start:10px;border-block-start:1px solid var(--lijn2)}
.projmeta b{color:var(--inkt);font-weight:700}

/* ================================================= WERKWIJZE ALS TIJDLIJN ==
   Hier stonden spookcijfers 01, 02, 03. Aaron: "haal daar de 01 02 03 weg, dat is
   lelijk." Hij heeft gelijk en er zit een tweede reden onder: genummerde stappen
   zijn het meest versleten patroon van elke sjabloonsite.
   In plaats daarvan een DOORLOPENDE LIJN met een punt per stap. Dat vertelt
   hetzelfde (dit komt na dat) zonder nummers, en het is meteen het element dat de
   sectie tot een geheel maakt: één lijn van het eerste telefoontje tot de
   oplevering. Eén kolom, want een tijdlijn in twee kolommen loopt nergens heen. */
.stappen{list-style:none;margin:0;padding:0;position:relative;
  max-inline-size:74ch}
.stappen::before{content:"";position:absolute;inset-block:14px 14px;
  inset-inline-start:9px;inline-size:2px;background:var(--lijn);border-radius:2px}
.stap{position:relative;padding-inline-start:44px;padding-block:0 26px}
.stap:last-child{padding-block-end:0}
.stap::before{content:"";position:absolute;inset-inline-start:2px;
  inset-block-start:5px;inline-size:16px;block-size:16px;border-radius:50%;
  background:var(--wit);border:3px solid var(--accent);box-sizing:border-box}
/* De laatste stap is de oplevering: die krijgt een gevulde punt, zodat de lijn
   ergens op uitkomt in plaats van dood te lopen. */
.stap:last-child::before{background:var(--accent)}
.stap h3{margin-block-end:5px}
.stap p{margin:0;color:var(--stil);font-size:15.5px}

/* ==================================================== REVIEWS ALS VAN GOOGLE
   Ze moeten er ook UITZIEN als Google, want daar komen ze vandaan en dat is
   precies wat ze geloofwaardig maakt. Vier dingen doen dat werk: het echte
   beeldmerk, het grote cijfer met gouden sterren, de sterverdeling in staven, en
   de ronde initiaal bij elke naam. Alles wat hier staat is te controleren via de
   link ernaast; wie dat niet kan waarmaken hoort dit blok niet te gebruiken. */
.gkop{border:1px solid var(--lijn);border-radius:var(--r);background:var(--wit);
  padding:clamp(20px,2.6vw,30px);display:grid;gap:clamp(18px,2.6vw,34px);
  align-items:center;margin-block-end:clamp(16px,2vw,24px)}
@media (min-width:56rem){.gkop{grid-template-columns:auto 1fr}}
.gbron{display:flex;align-items:center;gap:9px;margin-block-end:10px}
.gbron .ic{inline-size:20px;block-size:20px}
.gbron span{font-size:13.5px;color:var(--stil);font-weight:600}
.gcijfer{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.gcijfer b{font-size:clamp(40px,5vw,58px);font-weight:800;line-height:1;
  letter-spacing:-.035em}
.gcijfer .stil{font-size:15px}
/* Goud, niet het accent: dit is de kleur die Google zelf gebruikt en die iedereen
   herkent. Buiten dit blok komt hij nergens voor. */
/* HET GOUD VAN DE STERREN IS GEEN VIERDE KLEUR MAAR EEN CITAAT.
   De pagina houdt zich aan wit, zwart en een accent. Deze sterren horen daar niet
   bij: ze horen bij het Google-logo dat er pal naast staat en dat toch al uit vier
   kleuren bestaat. Groene sterren zouden suggereren dat WIJ de beoordeling geven,
   terwijl we hem citeren. Daarom blijft dit het goud dat Google zelf gebruikt. */
.gster{color:#E7A008}
.gstaven{display:grid;gap:5px;inline-size:min(100%,380px)}
.gstaaf{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  font-size:13px;color:var(--stil)}
.gstaaf .baan{block-size:9px;border-radius:99px;background:var(--lijn2);overflow:hidden}
/* inline-size:100% MOET erbij. Zonder breedte is het vulblokje nul breed en dan
   blijft scale ook nul: vijf lege staven die eruitzien alsof niemand vijf sterren
   gaf. De meting stond goed, het balkje niet. */
.gstaaf .vul{display:block;inline-size:100%;block-size:100%;background:#E7A008;
  border-radius:99px;transform-origin:0 50%}
.gstaaf .aantal{font-variant-numeric:tabular-nums;min-inline-size:2.2em;text-align:end}

/* ALTIJD EEN RIJ DIE ZIJWAARTS SCHUIFT, OP ELK SCHERM.
 *
 * Aaron, 04-09-2026: "zorg ook dat de eerste sectie met reviews er altijd wat meer heeft
 * dan 3 waar mensen door kunnen scrollen van links naar rechts, wel altijd maar op 1
 * lijn zodat het niet teveel plek inneemt."
 *
 * Hier stond een raster van drie kolommen zodra het scherm breed genoeg was. Dat betekent
 * dat er precies drie beoordelingen te zien waren, en dat een bedrijf met veertig
 * beoordelingen er evenveel liet zien als een bedrijf met drie. Nu staan ze allemaal op
 * EEN rij en schuif je erdoor: meer bewijs op dezelfde hoogte.
 *
 * Het is een echte scrollbalk met scroll-snap en geen namaakslider: vegen, shift plus
 * muiswiel en de tabtoets werken alleen daarmee vanzelf. De rij blijft binnen .wrap, want
 * een volle-breedte-truc met 50vw laat de HELE pagina zijwaarts schuiven zodra er een
 * scrollbalk in beeld staat. De volgende kaart staat met opzet half in beeld: dat is het
 * enige dat zonder woorden zegt dat er meer is. */
.revrij{display:grid;gap:clamp(14px,2vw,20px);
  grid-auto-flow:column;grid-auto-columns:82%;
  overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;
  scroll-snap-type:x mandatory;padding-block-end:8px}
.revrij>*{scroll-snap-align:start}
/* GEEN minmax(0, ...) HIER. Met een minimum van 0 mag grid de tracks samenknijpen om
   alles te laten passen, en bij tien kaarten werd elke kolom een tiende breed: een rij
   staafjes van 90 pixels met de namen verticaal erin. De hele opzet is juist dat de rij
   BREDER is dan het vak en dus schuift. Een vast percentage doet dat wel. */
@media (min-width:44rem){.revrij{grid-auto-columns:46%}}
@media (min-width:70rem){.revrij{grid-auto-columns:31%}}
/* De scrollbalk zelf zichtbaar houden, ook op een muisapparaat: een rij die schuift
   zonder dat je dat ziet, schuift voor niemand. */
.revrij::-webkit-scrollbar{block-size:8px}
.revrij::-webkit-scrollbar-thumb{background:var(--lijn);border-radius:4px}
.revrij::-webkit-scrollbar-thumb:hover{background:var(--stil)}
.rev{border:1px solid var(--lijn);border-radius:var(--r);padding:20px;
  background:var(--wit);display:flex;flex-direction:column;gap:11px}
.revkop{display:flex;align-items:center;gap:11px}
.initiaal{inline-size:38px;block-size:38px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-weight:700;font-size:16px;color:#fff}
.revnaam{display:grid;gap:1px;min-inline-size:0}
.revnaam b{font-size:15px;font-weight:600}
.revnaam span{font-size:13px;color:var(--stil)}
.sterrenrij{display:inline-flex;gap:1px}
.sterrenrij .ic{inline-size:15px;block-size:15px}
.rev blockquote{margin:0;font-size:15px;line-height:1.55}
/* ALLE KAARTEN EVEN HOOG. Google kort zelf ook in met "Meer"; zonder die grens
   bepaalt de langste review de hoogte van de hele rij en staat er onder de korte
   twee een gat. Vijf regels, en dan een knop die de rest uitklapt. */
.rev blockquote{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
  overflow:hidden;block-size:calc(5 * 1.55em)}
.rev[data-uit] blockquote{display:block;block-size:auto;overflow:visible}
.revmeer{align-self:start;background:none;border:0;padding:6px 0;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;color:var(--accent);
  min-block-size:44px;display:inline-flex;align-items:center;gap:6px}
.revmeer::after{content:"";inline-size:7px;block-size:7px;
  border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;
  rotate:45deg;translate:0 -2px}
.rev[data-uit] .revmeer::after{rotate:225deg;translate:0 2px}
.revplek{min-block-size:44px;display:flex;align-items:center}
.revvoet{margin-block-start:auto;padding-block-start:12px;
  border-block-start:1px solid var(--lijn2);display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--stil)}
.revvoet .ic{inline-size:14px;block-size:14px}

/* vragen */
.vraag{border-block-end:1px solid var(--lijn)}
.vraag:first-of-type{border-block-start:1px solid var(--lijn)}
.vraag summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:16px;align-items:center;padding-block:17px;font-weight:700;font-size:17px;
  min-block-size:56px}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"";inline-size:11px;block-size:11px;flex:none;
  border-inline-end:2px solid var(--accent);border-block-end:2px solid var(--accent);
  rotate:45deg;translate:0 -3px;transition:rotate .2s var(--curve)}
.vraag[open] summary::after{rotate:225deg;translate:0 3px}
details.vraag:not([open]) .vraagin{display:none}
.vraagin{padding-block:0 20px;color:var(--stil);max-inline-size:70ch}
.vraagin p{margin:0}

/* bereikbaarheid */
.bereik{display:grid;gap:clamp(22px,3vw,48px)}
@media (min-width:62rem){.bereik{grid-template-columns:1fr 1fr}}
.tijden{inline-size:100%;border-collapse:collapse;font-size:16px;max-inline-size:420px}
.tijden th{text-align:start;font-weight:600;padding:9px 0;
  border-block-end:1px solid var(--lijn2)}
.tijden td{padding:9px 0;text-align:end;color:var(--stil);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  border-block-end:1px solid var(--lijn2)}
.tijden tr:last-child th,.tijden tr:last-child td{border-block-end:0}
.tijden tr[data-dicht] th,.tijden tr[data-dicht] td{color:var(--stil)}
.gegrij{display:grid;gap:14px;margin-block-start:20px}
.geg{display:flex;gap:12px;align-items:flex-start}
.geg .ic{color:var(--accent-licht);margin-block-start:.2em}
.geg b{display:block;font-size:15px}
.geg a,.geg span{color:var(--stil);font-size:15.5px;text-decoration:none}
.geg a{display:inline-flex;align-items:center;min-block-size:44px;white-space:nowrap}
/* Een telefoonnummer breekt nooit over twee regels. */
.nowrap{white-space:nowrap}

/* slot */
.slot{background:var(--donker);color:var(--dinkt)}
.slot h2{color:var(--dinkt)}
.slot p{color:var(--dstil)}
.slotrij{display:grid;gap:clamp(22px,3vw,44px);align-items:center}
@media (min-width:62rem){.slotrij{grid-template-columns:1fr 1fr}}

/* voet */
.voet{background:var(--donker);color:var(--dstil);padding-block:clamp(34px,4vw,54px);
  font-size:15px;border-block-start:1px solid var(--dlijn)}
.voetrij{display:grid;gap:26px}
@media (min-width:34rem){.voetrij{grid-template-columns:repeat(2,minmax(0,1fr))}
  .voetrij > :first-child{grid-column:1 / -1}}
@media (min-width:52rem){.voetrij{grid-template-columns:1.4fr 1fr 1fr}
  .voetrij > :first-child{grid-column:auto}}
.voet h2{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dinkt);font-weight:800;margin-block-end:12px}
.voet ul{list-style:none;margin:0;padding:0}
.voet a{color:var(--dinkt);text-decoration:none;display:flex;align-items:center;
  gap:9px;min-block-size:44px;overflow-wrap:anywhere;line-height:1.35;padding-block:5px}
.voet a:hover{text-decoration:underline}
.voet a .ic{color:var(--accent-donker)}
.voetnaam{font-weight:800;font-size:18px;color:var(--dinkt);margin-block-end:10px;
  display:block}
.voetslot{display:flex;flex-wrap:wrap;gap:4px 20px;margin-block-start:22px;
  padding-block-start:16px;border-block-start:1px solid var(--dlijn);font-size:13.5px}
.voetslot span,.voetslot a{display:inline-flex;align-items:center;min-block-size:44px}

/* vaste balk op mobiel */
.vastebalk{position:fixed;inset-inline:0;inset-block-end:0;z-index:40;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:9px;
  /* ONDER DE RONDE HOEKEN UIT (Aaron, 06-10-2026: "the little corners get cut off"). env() werkt pas met
     viewport-fit=cover in de viewport-regel; zonder die regel was hij altijd 0. */
  /* Lager en dichter op de rand (Aaron, 07-10-2026: "a bit smaller and more pushed down"): de knoppen mogen
     een stukje de ruimte van de thuisbalk in, maar blijven boven de ronde hoeken. */
  padding:6px max(12px,env(safe-area-inset-left)) max(6px,calc(env(safe-area-inset-bottom) - 14px)) max(12px,env(safe-area-inset-right));
  background:var(--wit);border-block-start:1px solid var(--lijn)}
@media (min-width:64rem){.vastebalk{display:none}}


@media (max-width:63.99rem){:root{--vastebalk-hoog:calc(76px + env(safe-area-inset-bottom))}}
body{padding-block-end:var(--vastebalk-hoog)}

/* ================================================== kaart, route, toestemming
   Drie eisen tegelijk: geen enkel verzoek naar buiten voordat er geklikt is, geen
   sprong in de opmaak als de kaart alsnog laadt, en een vlak dat ook zonder Google
   iets voorstelt. Drie kleuren: wit, inkt met zijn tinten, en het accent. */
.routerij{display:grid;gap:clamp(18px,2.6vw,32px);align-items:start}
@media (min-width:62rem){.routerij{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}

/* DE MAAT LIGT VAST VOORDAT ER IETS LAADT. aspect-ratio en niet block-size: de
   hoogte volgt uit de breedte, dus hij klopt op elk scherm en bij elk zoomniveau.
   De plaatshouder en het iframe liggen allebei absoluut in DITZELFDE vak, dus het
   wisselen kost nul verschuiving. Dat is de hele oplossing; er is verder geen truc
   voor nodig. Val 2 uit LEESMIJ: block-size zou hier wel de hoogte zetten maar niet
   meeschalen, en dan springt het alsnog. */
.kaartslot{position:relative;aspect-ratio:4/3;border:1px solid var(--lijn);
  border-radius:var(--r);overflow:hidden;background:var(--grond);
  /* Het frame tekent niets buiten dit vak: in Aarons opname (04-10-2026) schoof de kaart
     tijdens het scrollen over de sectie erboven. isolation en contain:paint houden het
     binnen de randen. */
  isolation:isolate;contain:paint}
@media (min-width:48rem){.kaartslot{aspect-ratio:16/9}}
/* MAAR DE VERHOUDING WIJKT VOOR DE TEKST. Zie de uitleg bij .kaartuit hieronder. */
.kaartslot iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;
  border:0;display:block}
/* De deklaag over een geladen kaart; zie laadKaart. Het zinnetje verschijnt pas bij hover,
   zodat de kaart er in rust gewoon als kaart uitziet. */
.kaartdek{position:absolute;inset:0;z-index:2;cursor:pointer;display:flex;align-items:flex-end;
  justify-content:center;padding:12px}
.kaartdek span{font:600 13px/1.2 system-ui,sans-serif;color:#fff;background:rgba(20,20,20,.78);
  padding:7px 12px;border-radius:999px;opacity:0;transition:opacity .15s ease}
.kaartslot:hover .kaartdek span,.kaartdek:focus-within span{opacity:1}
@media (hover:none){.kaartdek span{opacity:1}}
/* Het raster is een CSS-verloop en geen SVG-pattern: dan hoeft er geen id in het
   document en kan hij niet botsen met een tweede kaart of met andere inline SVG. */
/* IN DE FLOW EN NIET ABSOLUUT, want anders knipt het vak de uitleg weg.
   Dit stond op position:absolute;inset:0 binnen een kaartslot met een vaste
   aspect-ratio en overflow:hidden. Groeit de tekst (browserzoom op 200 procent, grote
   systeemletters, een smal scherm), dan puilt hij aan de BOVENkant uit en wordt daar
   weggeknipt. Wat er verdwijnt is uitgerekend de zin die uitlegt waarom de kaart nog
   niet geladen is: er blijft een knop over zonder uitleg, en dat is wat WCAG 1.4.4
   verbiedt. Een absoluut kind telt niet mee voor de hoogte van zijn ouder, dus daar was
   met min-block-size niets aan te doen.
   Nu staat hij gewoon in de flow met min-block-size:100%: hij vult het vak zoals eerst,
   maar duwt het langer zodra de tekst niet meer past. Het iframe blijft absoluut en
   vult het vak, dus na het laden verandert er niets. */
.kaartuit{position:relative;min-block-size:100%;display:flex;flex-direction:column;
  justify-content:flex-end;gap:12px;padding:clamp(14px,2vw,20px);
  background:
    repeating-linear-gradient(0deg,transparent 0 39px,var(--lijn2) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,var(--lijn2) 39px 40px),
    var(--grond)}
.kaartteken{position:absolute;inset:0;inline-size:100%;block-size:100%;
  color:var(--inkt)}
/* Op een telefoon is het vak 4/3 en staat de tekstdoos zo hoog dat hij de speld
   halveert. De speld hoort boven de doos uit te komen, anders lijkt het een fout. */
@media (max-width:48rem){.kaartteken{translate:0 -13%}}
.kaartzin{position:relative;margin:0;font-size:13.5px;line-height:1.45;
  color:var(--stil);max-inline-size:44ch;background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--rk);padding:10px 12px}
.kaartzin b{color:var(--inkt)}
.kaartlaad{position:relative;align-self:start}
/* VAL 3 UIT LEESMIJ: een eigen display-regel verslaat de display:none die [hidden]
   uit de browserstylesheet haalt. .knop is inline-flex, dus zonder deze regel staat
   de kaartknop er OOK zonder JavaScript en drukt iemand op een knop die niets doet. */
.kaartslot [hidden]{display:none!important}
/* De postcodecontrole en de lijst van plaatsen boven de kaart van het werkgebied. */
.gebied{display:grid;gap:18px;margin-block-end:18px}
@media (min-width:48rem){.gebied{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}
.gebiedvorm{display:grid;gap:8px;background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--r);padding:clamp(16px,2.2vw,22px)}
.gebiedvorm label{font-weight:700}
.gebiedrij{display:flex;gap:10px;flex-wrap:wrap}
.gebiedrij input{flex:1 1 150px;min-inline-size:0;font:inherit;font-size:17px;padding:11px 13px;
  border:1px solid var(--lijn);border-radius:var(--rk);min-block-size:48px;text-transform:uppercase}
.gebiedrij input:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.gebieduit{margin:0;font-weight:600;min-block-size:1.5em}
.gebieduit--ja{color:var(--goed,#12775A)}
.gebieduit--let{color:var(--inkt)}
/* HET ROUTEBORD. Aaron, 01-10-2026, over de rij pilletjes met plaatsnamen: "looks really
   like AI slop and not well finished". Nu een lijst op afstand, met de kilometers achter
   een stippellijn, zoals op een richtingbord. De afstand is hemelsbreed vanaf het
   centrum van de eerste plaats (of werkgebied.vanuit) en wordt uit de PDOK-coordinaten
   gerekend; dat staat er ook bij, zodat niemand denkt dat het rijtijd is. */
.gebiedlijst{display:grid;gap:4px;align-content:start}
.gebiedvanuit{margin:0;font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.gebiedvanuit small{display:block;font-size:12.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-licht,var(--accent));margin-block-end:4px}
.gebiedafstand{list-style:none;margin:14px 0 0;padding:0;columns:2;column-gap:clamp(20px,3vw,40px);
  font-variant-numeric:tabular-nums}
.gebiedafstand li{display:flex;align-items:baseline;gap:8px;break-inside:avoid;
  padding-block:9px;border-block-end:1px solid var(--lijn);font-size:15.5px}
.gebiedafstand li span{font-weight:600}
.gebiedafstand li i{flex:1 1 auto;min-inline-size:12px;border-block-end:2px dotted #C9CCD0;
  translate:0 -4px}
.gebiedafstand li b{font-weight:700;color:var(--stil);font-size:14.5px;white-space:nowrap}
@media (max-width:22rem){.gebiedafstand{columns:1}}
/* De stand van zaken tijdens en na het laden, in hetzelfde vak, dus ook dit
   verschuift niets. z-index 2 zodat hij tijdens het laden boven het lege iframe
   staat; het script haalt hem weg zodra de kaart er is. */
.kaartstatus{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;margin:0;
  padding:12px 14px;font-size:14px;line-height:1.4;background:var(--wit);
  border-block-start:1px solid var(--lijn);color:var(--inkt)}
.kaartstatus a{color:var(--accent-licht)}
.kaartstatus:focus-visible{outline-offset:-3px}
.routenaast{display:grid;gap:16px}
.routenaast .knoprij .knop{inline-size:100%}
@media (min-width:34rem){.routenaast .knoprij .knop{inline-size:auto}}
.routecijfer{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:14.5px;
  line-height:1.45;color:var(--stil);border-block-start:1px solid var(--lijn2);
  padding-block-start:14px}
.routecijfer .ic{inline-size:18px;block-size:18px;margin-block-start:.15em}
.routecijfer b{color:var(--inkt);font-size:16px}
/* MINSTENS 24px HOOG, anders faalt hij op WCAG 2.2 AA. Deze link was 296 bij 17 en
   qa.js meldde hem terecht: bij het bedrijf zonder beoordelingen is dit de enige link
   naar hun Google-vermelding, dus juist die moet raakbaar zijn. */
.routecijfer a{color:var(--accent-licht);display:inline-block;padding-block:5px;
  min-block-size:24px}

/* ---- de toestemmingsbalk ----
   Hij gaat BOVEN de vaste knoppenbalk staan en niet eroverheen: die knop is waar de
   pagina voor bestaat. De ruimte die de body onderin vrijhoudt en de plek van deze
   balk komen uit dezelfde variabele. --vastebalk-echt wordt door het script gezet
   met de gemeten hoogte en overstemt de schatting. Alleen deze balk leest hem: de
   padding van de body blijft op de schatting staan, anders verspringt de voettekst
   na het laden en heb je de sprong teruggebouwd op de plek waar je hem weghaalde. */
.cookiebalk{position:fixed;inset-inline:0;z-index:60;
  inset-block-end:var(--vastebalk-echt,var(--vastebalk-hoog));
  background:var(--wit);border-block-start:1px solid var(--lijn);
  box-shadow:0 -14px 40px rgba(20,20,20,.16);
  padding:16px 0 max(16px,env(safe-area-inset-bottom));
  translate:0 102%;transition:translate .34s var(--curve)}
.cookiebalk[data-op]{translate:0 0}
.cookiebalk[hidden]{display:none}
.cookiebalk [hidden]{display:none!important}
.cookiebalk > .wrap{display:grid;gap:14px}
@media (min-width:64rem){
  .cookiebalk > .wrap{grid-template-columns:minmax(0,1fr) auto;align-items:center;
    gap:14px 32px}
}
.cookietekst{margin:0;font-size:14.5px;line-height:1.55;color:var(--stil);
  max-inline-size:72ch}
.cookietekst b{color:var(--inkt)}
.cookieknoppen{display:flex;flex-wrap:wrap;gap:10px}
/* Weigeren moet net zo makkelijk zijn als toestaan: even groot, even zichtbaar,
   naast elkaar. Een grijze nee naast een gekleurde ja is geen vrije keuze en dus
   geen geldige toestemming. Alleen de vulkleur verschilt. */
.cookieknop{flex:1 1 auto;min-inline-size:0;min-block-size:48px;padding:12px 18px;
  border-radius:var(--rk);border:1.5px solid var(--inkt);background:var(--wit);
  color:var(--inkt);font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.cookieknop--ja{background:var(--accent);border-color:var(--accent);
  color:var(--op-accent)}
.cookieknop:disabled{opacity:.55;cursor:default}
.cookiemeer{margin-block-start:4px;background:none;border:0;padding:0;font:inherit;
  font-size:14px;font-weight:600;color:var(--accent);cursor:pointer;
  min-block-size:44px;display:inline-flex;align-items:center}
.cookiekeuzes{margin:10px 0 0;padding:0;border:0;display:grid;gap:2px}
.cookiesoort{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;
  padding-block:12px;border-block-start:1px solid var(--lijn2)}
.cookiesoort input{inline-size:20px;block-size:20px;margin:3px 0 0;
  accent-color:var(--accent)}
.cookiesoort label{font-weight:700;font-size:15px;cursor:pointer}
.cookiesoort input:disabled + label{cursor:default;color:var(--stil)}
.cookiesoort p{grid-column:2;margin:0;font-size:13.5px;line-height:1.5;
  color:var(--stil)}
.cookiemelding{margin:10px 0 0;font-size:13.5px;color:var(--stil)}
/* Op 390 breed at deze balk het halve scherm. Compacter mag; de TEKST blijft
   volledig staan, want inkorten maakt de keuze minder geinformeerd en dan is hij
   niet meer geldig. */
@media (max-width:30rem){
  .cookiebalk{padding-block-start:13px}
  .cookietekst{font-size:13.5px;line-height:1.45}
  .cookieknop{padding-inline:12px;font-size:14.5px}
}
@media print{.cookiebalk,.vastebalk{display:none!important}}

/* de knop in de voetstrook. .voetslot heeft nog geen knopstijl; zonder deze regel
   staat er een grijs systeemknopje op een zwarte baan. */
.voetknop{background:none;border:0;padding:0;font:inherit;font-size:13.5px;
  color:var(--dinkt);text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;display:inline-flex;align-items:center;min-block-size:44px}

/* ---- de privacypagina, die deze hele stylesheet leent ---- */
/* DEZELFDE GROND ALS DE BALK VAN DE SITE, en dat is niet voor de vorm. Hier staat
   hetzelfde logo op dezelfde manier, dus als het op wit wegvalt valt het hier ook op
   wit weg. Dat was tot 07-09-2026 zo: de balk kreeg toen een vlakje achter het logo
   en deze kop niets, dus stond bij Van de Burgt en Strooij hun witte woordmerk op de
   privacypagina onzichtbaar op wit. Een klant klikt daarheen. */
.privkop{background:var(--balk-grond);color:var(--balk-inkt);
  border-block-end:1px solid var(--balk-lijn);padding-block:14px}
.privkop :focus-visible{outline-color:var(--balk-focus)}
.privkop .knop--lijn{background:transparent;color:var(--balk-inkt);
  border-color:var(--balk-lijn)}
.privkop .knop--lijn:hover{border-color:var(--balk-inkt)}
.privkop .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
/* Even groot als in de balk van de site en in hun eigen kleuren: hetzelfde logo op
   elke plek. Zie de uitleg bij .aanvraagkop img. */
.privlogo{block-size:56px;inline-size:auto;display:block;object-fit:contain}
.priv h2{font-size:clamp(20px,2vw,26px);margin-block:34px 10px}
.priv ul{margin:0 0 1em;padding-inline-start:20px}
.priv li{margin-block-end:7px}
.privdoos{background:var(--grond);border:1px solid var(--lijn);
  border-inline-start:4px solid var(--accent);border-radius:var(--r);
  padding:18px 20px;margin-block:20px}
.privdoos > :last-child{margin-block-end:0}
.vastebalk .knop{min-block-size:42px;padding-inline:10px;font-size:14.5px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* extra.css: wat de echte site van Blommestijn heeft en de demo niet (31-10-2026). Dezelfde drie kleuren (wit, zwart, zijn
   oranje), dezelfde letters (Bebas voor de koppen, Public Sans voor de tekst), dezelfde knoppen. */

.sectie--grond{background:var(--grond)}

/* TIKDOELEN EN CONTRAST (qa.js, 01-11-2026). Minstens 24px hoog voor elke link (WCAG 2.2 AA), en de link in de
   toestemmingsbalk in het donkere oranje: het lichte haalde maar 3,00:1 op wit. */
.cookiemeer{color:var(--accent-licht)}
.voet li a{display:inline-flex;align-items:center;gap:8px;min-block-size:40px}
.vnin h3 a,.werk h3 a{display:inline-block;padding-block:2px;color:inherit}
.werkmeer{min-block-size:36px}

/* HET MENU: Diensten klapt uit met de pagina's eronder. Op de computer bij aanwijzen of met de tab-toets, op de telefoon
   staan ze gewoon in het menupaneel. */
.navdrop{position:relative;display:flex;align-items:center}
.navdrop > a::after{content:"";display:inline-block;inline-size:7px;block-size:7px;margin-inline-start:7px;
  border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7}
.navlijst{position:absolute;inset-block-start:100%;inset-inline-start:-8px;min-inline-size:270px;padding:8px;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);box-shadow:0 22px 44px -20px rgba(0,0,0,.4);
  display:none;gap:2px;z-index:70}
.navdrop:hover .navlijst,.navdrop:focus-within .navlijst{display:grid}
.balk .navlijst a{color:var(--inkt);text-shadow:none;padding:10px 12px;border-radius:6px;font-size:15px;white-space:nowrap}
.balk .navlijst a:hover{background:var(--grond);color:var(--inkt)}
.navlijst hr{border:0;border-block-start:1px solid var(--lijn);margin:6px 4px;inline-size:auto}
.menupaneel .menusub{display:block;padding-inline-start:18px;font-size:16px;opacity:.86}

/* De donkere kop met foto en het zichtbare kruimelpad van de eerste opzet zijn weg (01-11-2026): zie paginas.css. */
/* LANGE TEKST MET EEN KAART ERNAAST. */
.tweeluik{display:grid;gap:clamp(26px,4vw,60px);align-items:start}
@media (min-width:62rem){.tweeluik{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.tekst{max-inline-size:68ch;font-size:17px;line-height:1.65}
.tekst > h2{margin:0 0 14px}
.tekst h3{margin:30px 0 8px}
.tekst p:last-child{margin-block-end:0}
.vinklijst{list-style:none;margin:20px 0;padding:0;display:grid;gap:11px}
.vinklijst li{display:flex;gap:11px;align-items:flex-start;line-height:1.45}
.vinklijst .ic{color:var(--accent-licht);flex:none;inline-size:22px;block-size:22px;margin-block-start:1px}
.zijkaart{border:1px solid var(--lijn);border-radius:var(--r);background:var(--wit);overflow:hidden}
@media (min-width:62rem){.zijkaart{position:sticky;inset-block-start:calc(var(--balkh,72px) + 20px)}}
.zijkaart > img,.zijkaart > picture img{inline-size:100%;block-size:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.zijkaart > .fotovak{border-radius:0;border-width:0 0 2px}
.zijkaartin{padding:22px}
.zijkaartin h2{font-size:22px;margin:0 0 8px}
.zijkaartin p{color:var(--stil);margin:0 0 16px}
.zijkaartin .knop{inline-size:100%}
.zijkaartin .knop + .knop{margin-block-start:10px}

/* UITLEG IN BLOKKEN. */
.uitlegrij{display:grid;gap:clamp(14px,2vw,20px)}
@media (min-width:44rem){.uitlegrij{grid-template-columns:repeat(2,minmax(0,1fr))}}
.uitleg{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:24px 26px}
.uitleg h3{margin:0 0 8px}
.uitleg p{margin:0;color:var(--stil);line-height:1.6}

/* HET FOTOVAK: hier komt een foto die er nog niet is, en wat erop moet staan. Gestreept en gestippeld zodat niemand het
   voor een kapotte foto houdt. Aaron, 31-10: "we don't have the images yet, but leave that blank, but already show the place
   where the images will go." */
.fotovak{display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:24px;aspect-ratio:4/3;
  border:2px dashed color-mix(in srgb,var(--accent-licht) 60%,transparent);border-radius:var(--r);
  background:repeating-linear-gradient(135deg,#fff7f0 0 14px,#fff 14px 28px);color:var(--accent-licht)}
.fotovak .ic{inline-size:34px;block-size:34px}
.fotovak b{font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.fotovak span:last-child{color:var(--inkt);font-size:15px;line-height:1.4;max-inline-size:30ch}
.werk > .fotovak{border-radius:0;border-width:0 0 2px;aspect-ratio:16/10}

/* HET INVULVAK: tekst die hij nog moet aanleveren. Valt op, en een live bouw weigert zolang hij er staat. */
.invul{background:#fff1e4;border:1.5px dashed var(--accent-licht);border-radius:6px;padding:1px 7px;color:#7a2e00;
  font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.invul::before{content:"Nog invullen: ";font-weight:800}
.bevestig{text-decoration:underline dotted var(--accent-licht) 2px;text-underline-offset:4px}
.bevestig::after{content:" (nog bevestigen)";font-size:.82em;color:var(--accent-licht);font-weight:700}
.conceptnoot{background:#fff1e4;border-block-end:1px solid color-mix(in srgb,var(--accent-licht) 35%,transparent);
  color:#7a2e00;font-size:14.5px;padding-block:10px}
.conceptnoot b{font-weight:800}

/* DE BETERE SCHILDER: het keurmerk met zijn eigen logo, gelinkt naar zijn profiel daar. */
.keurmerk{display:grid;gap:clamp(20px,3vw,44px);align-items:center;background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--r);padding:clamp(22px,3vw,40px)}
@media (min-width:52rem){.keurmerk{grid-template-columns:230px minmax(0,1fr)}}
.keurmerklogo{display:block;max-inline-size:230px;border-radius:var(--rk)}
.keurmerklogo img{inline-size:100%;block-size:auto;display:block}
.keurmerk h2,.keurmerk h3{margin:0 0 10px}
.keurmerk .vinklijst{margin:16px 0}
.keurmerkkol{display:grid;gap:8px 32px}
@media (min-width:44rem){.keurmerkkol{grid-template-columns:1fr 1fr}}
.keurmerkkol h3{font-size:16px;margin:0 0 6px}

/* PLAATSEN als rij knoppen, en de lijst met afstanden. */
.plaatslinks{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.plaatslinks a{display:inline-flex;align-items:center;gap:8px;min-block-size:46px;padding:8px 18px;border:1px solid var(--lijn);
  border-radius:999px;background:var(--wit);color:var(--inkt);font-weight:650;text-decoration:none}
.plaatslinks a:hover{border-color:var(--accent-licht);color:var(--accent-licht)}
.plaatslinks small{color:var(--stil);font-weight:500;font-size:13.5px}

/* FEITEN BIJ EEN PROJECT. */
.feiten{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;margin:22px 0 0;font-size:16px}
.feiten dt{color:var(--stil)}
.feiten dd{margin:0;font-weight:650}

/* DIENSTKAARTEN DIE NAAR HUN PAGINA GAAN. De hele kaart is aanklikbaar via de kop; de offerteknop blijft apart. */
.werk{position:relative}
.werk h3 a{color:inherit;text-decoration:none}
.werk h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.werk .knop{position:relative;z-index:2}
.werk:hover h3 a{color:var(--accent-licht)}
.werkmeer{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--accent-licht);margin-block-start:auto}
.werkmeer .ic{inline-size:18px;block-size:18px}
@media (min-width:44rem){.werkrij--twee{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:70rem){.werkrij--twee{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* EIGEN VERF op de voorpagina: tekst links, drie fotovakken rechts. */
.verfrij{display:grid;gap:clamp(22px,3.5vw,52px);align-items:center}
@media (min-width:62rem){.verfrij{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.verffotos{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.verffotos .fotovak:first-child{grid-column:1 / -1;aspect-ratio:16/8}
.verffotos .fotovak{aspect-ratio:1}

/* PERSOONLIJK: met z'n tweeën. */
.tweeenrij{display:grid;gap:clamp(22px,3.5vw,52px);align-items:center}
@media (min-width:62rem){.tweeenrij{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* CONTACT. */
.contactrij{display:grid;gap:clamp(24px,4vw,56px);align-items:start}
@media (min-width:62rem){.contactrij{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* DE VOET: vier kolommen, met alle plaatsen en diensten erin (zo is elke pagina vanaf elke pagina bereikbaar). */
@media (min-width:64rem){.voetrij.voetrij--vier{grid-template-columns:1.35fr 1fr 1fr 1fr}}
.voetkeur{display:inline-flex;align-items:center;gap:14px;margin-block-start:18px;background:#fff;border-radius:var(--rk);
  padding:10px 16px 10px 12px;color:var(--inkt);text-decoration:none}
.voet a.voetkeur:hover{text-decoration:none;box-shadow:0 0 0 3px var(--accent-op-donker)}
.voetkeur img{inline-size:96px;block-size:auto;display:block}
.voetkeur span{font-size:13.5px;line-height:1.35;color:var(--inkt);max-inline-size:16ch}
.voet li{margin-block:2px}

/* PROJECTKAART met voor en na naast elkaar op een projectpagina. */
.vnpaar{display:grid;gap:14px}
@media (min-width:44rem){.vnpaar{grid-template-columns:1fr 1fr}}
.vnpaar figure{margin:0;position:relative}
.vnpaar img{inline-size:100%;block-size:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);display:block}
.vnpaar figcaption{position:absolute;inset-block-start:12px;inset-inline-start:12px;background:var(--donker);color:#fff;
  font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:6px}
.projectbeeld img{inline-size:100%;block-size:auto;border-radius:var(--r);display:block}

/* paginas.css: de pagina's van Blommestijn, elk met een eigen opening en indeling (01-11-2026). Aaron: "a lot of the sections look
   similar as the main page ... it shouldn't look all the same." Regels uit premium-web (klantsites): een lichte grond, de foto
   onbedekt, haarlijnen in plaats van schaduwen, een rondingswaarde (--r), en aan het eind een donkere afsluiter met een knop.
   Een warm gebroken wit voor de openingen, uit zijn eigen foto's (witte gevels in de zon). */
:root{--zacht:#F6F4F1;--haar:rgba(20,20,20,.12);
  /* DIEPTE (01-11-2026, derde ronde). Aaron over de lichte afsluiter: "It gives some depth in the website. So I think we should use more
     of those things", en over de diensten: "not fully square, having some more shapes in it". Een vorm met twee ronde en twee bijna rechte
     hoeken, voor elke kaart dezelfde; --vorm-in voor wat erin ligt (de foto in een kaart). Een zachte schaduw, voor elke kaart dezelfde. */
  --vorm:6px 28px 6px 28px;--vorm-in:3px 20px 3px 20px;
  --diepte:0 24px 44px -28px rgba(20,20,20,.42);--diepte-op:0 32px 54px -30px rgba(20,20,20,.5)}

/* ------------------------------------------------------------------ de opening */
.opening{background:var(--zacht);padding-block:clamp(40px,5.5vw,88px) clamp(48px,6vw,96px)}
.opening .wrap{display:grid;gap:clamp(32px,4.5vw,72px);align-items:center}
@media (min-width:62rem){.opening:not(.opening--kort) .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.opening--kort .op-tekst{max-inline-size:860px}
.op-label{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-licht)}
.op-label::before{content:"";inline-size:27px;block-size:12px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 16' fill='none' stroke='%2312a5e6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 14H14V10H26V6H38V2H50'/%3E%3C/svg%3E") left center/contain no-repeat}
.op-kop{margin:0;font-family:'Bebas','PublicSans',Impact,sans-serif;font-weight:400;font-size:clamp(50px,6.2vw,100px);line-height:.9;letter-spacing:.005em;text-transform:uppercase;color:var(--inkt);text-wrap:balance}
.op-kop em{font-style:normal;color:var(--accent-licht)}
.op-zin{margin:22px 0 0;max-inline-size:54ch;font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:#3b3e42}
.op-feiten{margin:22px 0 0}
.op-lokaal{margin:16px 0 0;max-inline-size:56ch;color:var(--stil);line-height:1.6}
.op-lokaal:empty{display:none}
.op-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.op-knoppen .knop{inline-size:auto;flex:0 0 auto;padding-inline:24px;min-block-size:54px}
.op-rechts{min-inline-size:0}

/* De dienst: zijn foto, onbedekt, met het keurmerk als kaartje op de hoek. */
.op-beeld{position:relative}
.op-beeld > picture,.op-beeld > picture img{display:block;inline-size:100%}
.op-beeld > picture img{block-size:auto;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r)}
.op-beeld .fotovak{aspect-ratio:5/4}
/* De brede busfoto (2000x924) op de diensten-pagina helemaal tonen op zijn eigen verhouding, niet bijgesneden in de 5/4-bak. */
.op-beeld.op-vol > picture img{aspect-ratio:auto;object-fit:contain}
.op-keur{display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px 16px 12px 12px;max-inline-size:340px;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);color:var(--inkt);text-decoration:none;transition:border-color .16s}
.op-keur img{inline-size:88px;block-size:auto;flex:none}
.op-keur span{display:grid;gap:2px;font-size:14px;line-height:1.35;color:var(--stil)}
.op-keur b{color:var(--inkt);font-size:15px}
.op-keur:hover{border-color:var(--accent-licht)}
@media (min-width:62rem){.op-keur{position:absolute;left:-28px;bottom:-26px;margin:0;box-shadow:0 18px 40px -18px rgba(20,20,20,.45)}}

/* ------------------------------------------------------------------ de kaart van Google, in een kaart */
/* Tot iemand toestemming geeft, ligt er een plaatje van de kaart in het vak (kaartbeelden.mjs); de uitleg en de knop staan eroverheen.
   Na het laden vult de kaart van Google hetzelfde vak, dus er verschuift niets. */
.opening--kaart .op-rechts{display:flex;align-items:center}
.kaartkaart{margin:0;inline-size:100%;padding:10px;background:var(--wit);border:1px solid var(--haar);border-top:3px solid var(--accent);border-radius:var(--vorm);box-shadow:var(--diepte)}
.kaartkaart .kaartslot{border:0;border-radius:var(--vorm-in)}
.kaartkaart .kaartslot{aspect-ratio:1}
@media (min-width:48rem){.kaartkaart .kaartslot{aspect-ratio:16/11}}
.kaartkaart .kaartuit{background:#ECE9E3}
.kaartuit > picture{position:absolute;inset:0}
.kaartuit > picture img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.kaartkaart .kaartzin{max-inline-size:38ch;font-size:13px;box-shadow:0 10px 24px -14px rgba(20,20,20,.45)}
.kaartbron{position:absolute;top:8px;right:8px;padding:2px 7px;border-radius:4px;background:rgba(255,255,255,.88);font-size:11px;line-height:1.4;color:#333}
.kaartkaart-onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;padding:14px 8px 4px}
.kaartkaart-wie{display:flex;align-items:center;gap:12px;min-inline-size:0}
.kaartkaart-wie > .ic{display:grid;flex:none;place-items:center;inline-size:42px;block-size:42px;padding:11px;border-radius:50%;background:var(--zacht);color:var(--accent-licht)}
.kaartkaart-wie > span:not(.merk){display:grid;gap:1px;min-inline-size:0}
.kaartkaart-wie b{font-size:16px}
.kaartkaart-wie small{font-size:13.5px;color:var(--stil)}
.kaartkaart-onder .werkmeer{display:inline-flex;align-items:center;gap:6px;min-block-size:44px}


/* De voorpagina: alleen de kaart van het werkgebied, met het postcodevak erop (Aaron, 01-11-2026: "just like the map, with maybe the
   box that you can put in the address"). Op een laptop ligt het vak linksonder op de kaart, waar het gebied niet is; de uitleg over
   Google staat dan rechtsonder. Op een telefoon komt het vak onder de kaart, een stukje eroverheen. */
.gebiedkaart{position:relative}
.gebiedkaart > .kaartslot{aspect-ratio:1;border:0;border-radius:var(--r)}
@media (min-width:62rem){.gebiedkaart > .kaartslot{aspect-ratio:16/7}}
.gebiedkaart .kaartuit{background:#ECE9E3}
.gebiedkaart .kaartuit > picture{position:absolute;inset:0}
.gebiedkaart .kaartuit > picture img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.gebiedkaart .kaartzin{max-inline-size:38ch;font-size:13px;box-shadow:0 10px 24px -14px rgba(20,20,20,.45)}
@media (max-width:61.99rem){.gebiedkaart .kaartuit{padding-bottom:46px}}
@media (min-width:62rem){.gebiedkaart .kaartuit{align-items:flex-end}.gebiedkaart .kaartlaad{align-self:end}}
.gebiedkaart-vak{position:relative;z-index:3;margin:-30px 10px 0;padding:22px;background:var(--wit);border:1px solid var(--haar);border-top:3px solid var(--accent);border-radius:var(--vorm);box-shadow:var(--diepte)}
@media (min-width:62rem){.gebiedkaart-vak{position:absolute;left:32px;bottom:32px;margin:0;inline-size:410px;padding:28px}}
.gebiedkaart-vak .op-label{margin-bottom:10px}
.gebiedkaart-vak h2{margin:0 0 18px;font-family:'Bebas','PublicSans',Impact,sans-serif;font-weight:400;font-size:clamp(40px,3.6vw,52px);line-height:.92;text-transform:uppercase;color:var(--inkt)}
.gebiedkaart-vak .gebiedvorm{padding:0;border:0;background:none}
.gebiedkaart-vak .gebiedrij input{flex-basis:120px}
.gebiedkaart-vak .gebiedrij .knop{inline-size:auto;padding-inline:18px}
.gebiedvorm .gebieduit:empty{display:none}
.gebiedknop{inline-size:100%;margin-top:4px}
.gebiedvorm [hidden]{display:none!important}

/* De afstanden naast de kaart (werkgebied). */
.afstanden{list-style:none;margin:28px 0 0;padding:0;max-inline-size:440px;border-top:1px solid var(--haar)}
.afstanden a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-block-size:50px;border-bottom:1px solid var(--haar);color:var(--inkt);font-weight:650;text-decoration:none}
.afstanden b{font-weight:600;color:var(--stil);font-variant-numeric:tabular-nums}
.afstanden a:hover span{color:var(--accent-licht)}

/* ------------------------------------------------------------------ kop links, inhoud rechts */
.kopnaast{display:grid;gap:clamp(24px,4vw,64px);align-items:start}
@media (min-width:62rem){
  .kopnaast{grid-template-columns:minmax(0,.78fr) minmax(0,1.4fr)}
  .kopnaast > :first-child{position:sticky;top:calc(var(--balkh,72px) + 28px)}
}
.kopnaast-kop{display:grid;gap:12px;align-content:start}
.kopnaast-kop h2{margin:0}
.kopnaast-kop p{margin:0;color:var(--stil)}

/* ------------------------------------------------------------------ feitentabel, zonder nummers */
.feittabel{border-top:1px solid var(--haar)}
.feitrij{display:grid;gap:6px;padding:22px 0;border-bottom:1px solid var(--haar)}
.feitrij h3{margin:0;font-size:19px;letter-spacing:-.01em}
.feitrij p{margin:0;max-inline-size:62ch;color:var(--stil);line-height:1.65}

/* ------------------------------------------------------------------ waarom, in vier vakken */
.sectie--strak{padding-block:clamp(28px,3.5vw,48px)}
.waarom{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--haar);border:1px solid var(--haar);border-radius:var(--vorm);overflow:hidden;box-shadow:var(--diepte)}
@media (min-width:44rem){.waarom{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:70rem){.waarom{grid-template-columns:repeat(4,minmax(0,1fr))}}
.waarom a{display:grid;gap:4px;align-content:start;block-size:100%;padding:20px 22px;background:var(--wit);color:var(--inkt);text-decoration:none}
.waarom b{font-size:17px}
.waarom b::before{content:"";display:block;inline-size:22px;block-size:3px;margin-bottom:12px;border-radius:2px;background:var(--accent)}
.waarom span{font-size:15px;color:var(--stil)}
.waarom a:hover b{color:var(--accent-licht)}

/* ------------------------------------------------------------------ de diensten als kaarten met diepte */
/* Een witte kaart met een oranje streep bovenop en een schaduw eronder, in --vorm; zijn foto erin, daaronder de naam, een regel en de
   twee acties. Op een laptop de twee grote diensten breed bovenaan en de drie andere eronder. Geen nummers. */
.dkrij{display:grid;gap:clamp(16px,2vw,24px)}
@media (min-width:44rem){
  .dkrij{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dkrij > .dk:last-child:nth-child(odd){grid-column:span 2}
}
@media (min-width:44rem) and (max-width:61.99rem){.dkrij > .dk:last-child:nth-child(odd) .dk-beeld{aspect-ratio:21/9}}
@media (min-width:62rem){
  .dkrij:not(.dkrij--klein){grid-template-columns:repeat(2,minmax(0,1fr))}
  .dkrij:not(.dkrij--klein) > .dk{grid-column:auto}
  .dkrij:not(.dkrij--klein) > .dk .dk-beeld{aspect-ratio:16/9}
  .dkrij:not(.dkrij--klein) > .dk h3{font-size:clamp(22px,1.8vw,28px)}
}
.dk{position:relative;display:flex;flex-direction:column;padding:10px;background:var(--wit);border:1px solid var(--haar);border-top:3px solid var(--accent);border-radius:var(--vorm);box-shadow:var(--diepte);transition:transform .38s cubic-bezier(.215,.61,.355,1),box-shadow .38s cubic-bezier(.215,.61,.355,1)}
.dk:hover{transform:translateY(-4px);box-shadow:var(--diepte-op)}
.dk-beeld{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:var(--vorm-in);background:var(--grond)}
.dk-beeld picture,.dk-beeld img{display:block;inline-size:100%;block-size:100%}
.dk-beeld img{object-fit:cover;object-position:var(--fp,50% 50%);transition:transform .5s cubic-bezier(.215,.61,.355,1)}
.dk:hover .dk-beeld img{transform:scale(1.04)}
.dk-beeld .fotovak{block-size:100%;aspect-ratio:auto;border-radius:inherit}
.dk-in{display:flex;flex:1;flex-direction:column;gap:8px;padding:18px 12px 10px}
.dk h3{margin:0;font-size:clamp(20px,1.7vw,24px);line-height:1.15;letter-spacing:-.015em}
.dk h3 a{display:inline-block;padding-block:3px;color:var(--inkt);text-decoration:none}
.dk h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.dk:hover h3 a{color:var(--accent-licht)}
.dk p{margin:0;font-size:15.5px;line-height:1.5;color:var(--stil)}
.dk-acties{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-top:auto;padding-top:10px}
.dk-acties .knop{position:relative;z-index:2;inline-size:auto;min-block-size:46px;padding-inline:18px;font-size:15px}
.dk-meer{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--inkt)}
.dk-meer .ic,.dk-pijl .ic{inline-size:18px;block-size:18px;transition:transform .16s}
.dk:hover .dk-meer .ic,.dk:hover .dk-pijl .ic{transform:translateX(3px)}
/* Zonder eigen foto: het vak waar de foto komt. */
.dk--leeg .fotovak{place-content:center;padding:16px}
/* Klein: alleen de foto en de naam (Ook door Blommestijn, waar de verf op gaat). Twee per rij, op een laptop allemaal op een rij. */
.dkrij--klein{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:62rem){.dkrij--klein{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
.dk--klein{padding:8px}
.dk--klein .dk-in{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:14px 8px 6px}
.dk--klein h3{font-size:17px}
.dk-pijl{display:grid;flex:none;place-items:center;inline-size:36px;block-size:36px;border-radius:50%;background:var(--zacht);color:var(--accent-licht)}
.dk--klein .fotovak b,.dk--klein .fotovak span:last-child{display:none}

/* Iets anders: een smalle kaart onder de diensten. */
.anders{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:clamp(16px,2vw,24px);padding:20px 24px;background:var(--wit);border:1px solid var(--haar);border-top:3px solid var(--accent);border-radius:var(--vorm);box-shadow:var(--diepte)}
.anders p{margin:0;max-inline-size:70ch;color:var(--stil)}
.anders b{color:var(--inkt)}
.anders-knoppen{display:flex;flex-wrap:wrap;gap:10px}
.anders-knoppen .knop{inline-size:auto;min-block-size:46px;padding-inline:18px;font-size:15px}


/* ------------------------------------------------------------------ werk in een raster */
.ptrij{display:grid;gap:clamp(14px,2vw,22px)}
@media (min-width:52rem){.ptrij{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ptrij--een{max-inline-size:760px}
@media (min-width:52rem){.ptrij--een{grid-template-columns:1fr}}
.pt{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:var(--grond);border-radius:var(--r);color:#fff;text-decoration:none}
.pt picture,.pt img{display:block;inline-size:100%;block-size:100%}
.pt img{object-fit:cover;transition:transform .5s cubic-bezier(.215,.61,.355,1)}
.pt:hover img{transform:scale(1.035)}
.pt::after{content:"";position:absolute;inset:auto 0 0 0;block-size:55%;background:linear-gradient(to top,rgba(10,10,10,.72),rgba(10,10,10,0));pointer-events:none}
.pt-tekst{position:absolute;z-index:1;left:clamp(16px,2vw,26px);right:clamp(16px,2vw,26px);bottom:clamp(14px,2vw,24px);display:grid;gap:6px}
.pt-tekst small{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.pt-tekst b{font-size:clamp(20px,1.9vw,26px);line-height:1.15;letter-spacing:-.01em}
.pt-regel{font-size:14.5px;line-height:1.35;font-weight:500;color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.45)}
.pt--leeg{background:transparent;color:var(--inkt)}
.pt--leeg::after{display:none}
.pt--leeg .fotovak{position:absolute;inset:0;aspect-ratio:auto}
.pt-onder{position:absolute;z-index:1;left:16px;right:16px;bottom:14px;margin:0;font-size:14px}

/* ------------------------------------------------------------------ voor en na: erna groot, ervoor erop gelegd */
/* Nooit een schuifje (Aaron, 01-11-2026: "never use the sliding before and after"). Gekozen op de keuzepagina (stijl A): het resultaat
   groot en vierkant, de foto van ervoor als afdruk met een witte rand, licht schuin, over de hoek linksonder. */
.vnrij{display:grid;gap:clamp(36px,4vw,56px)}
@media (min-width:62rem){.vnrij{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vn{margin:0;max-inline-size:640px}
.vn-beeld{position:relative;padding-bottom:34px}
.vn-na{overflow:hidden;aspect-ratio:1;border-radius:var(--r);background:var(--grond)}
.vn-na picture,.vn-na img{display:block;inline-size:100%;block-size:100%}
.vn-na img{object-fit:cover}
.vn-lab{position:absolute;top:14px;right:14px;padding:6px 12px;border-radius:999px;background:#fff;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt)}
.vn-voor{position:absolute;left:-14px;bottom:0;inline-size:38%;padding:7px 7px 0;background:#fff;border-radius:6px;box-shadow:0 18px 40px -16px rgba(20,20,20,.45);rotate:-3deg}
.vn-voor picture,.vn-voor img{display:block;inline-size:100%}
/* block-size:auto, anders wint de height uit de HTML (1803px) van aspect-ratio (CSS-val 2 uit sjablonen/LEESMIJ.md). */
.vn-voor img{block-size:auto;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.vn-voor small{display:block;padding:7px 2px 8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--stil)}
.vn figcaption a{display:flex;align-items:baseline;gap:10px;min-block-size:48px;padding-top:12px;color:var(--inkt);text-decoration:none}
.vn figcaption b{font-size:18px}
.vn figcaption span{color:var(--stil)}
.vn figcaption .ic{align-self:center;margin-left:auto;inline-size:20px;block-size:20px;color:var(--accent-licht);transition:transform .16s}
.vn figcaption a:hover .ic{transform:translateX(4px)}
@media (max-width:43.99rem){.vn-voor{left:-8px;inline-size:42%}}

/* ------------------------------------------------------------------ een foto die op de pagina ligt */
/* Gekozen op de keuzepagina (stijl 1, zwevend): geen lijn of vlak erachter, de foto zelf ligt hoger, met een diepe zachte schaduw. */
.diep{position:relative}
.diep > picture,.diep > picture img{display:block;inline-size:100%}
.diep > picture img{block-size:auto}
.diep > picture img,.diep > .fotovak{border-radius:14px;box-shadow:0 2px 6px rgba(20,20,20,.06),0 30px 60px -22px rgba(20,20,20,.42)}

/* ------------------------------------------------------------------ een project */
.projectkop{background:var(--zacht);padding-block:clamp(36px,5vw,72px)}
.projectkop .op-kop{font-size:clamp(44px,4.6vw,76px)}
.projectbeeld-groot picture img{block-size:auto}
.projectbeeld-uitleg{margin:10px 0 0}
.projectrij{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
@media (min-width:62rem){.projectrij{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.projectinfo{display:grid;gap:22px;align-content:start}
.projectinfo .tekst p{margin:0 0 10px}
@media (max-width:61.99rem){.projectbeeld-groot{order:-1}}
.feiten--kaart{margin:0;padding:22px 24px;background:var(--wit);border:1px solid var(--haar);border-top:3px solid var(--accent);border-radius:var(--vorm);box-shadow:var(--diepte)}
.keurmerk{border-top:3px solid var(--accent);border-radius:var(--vorm);box-shadow:var(--diepte)}
.projectlink{margin:18px 0 0}

/* ------------------------------------------------------------------ eigen verf, als een productpagina */
.product{background:var(--zacht);padding-block:clamp(44px,6vw,96px);text-align:center}
.product .op-label{justify-content:center}
.product .op-kop{margin-inline:auto;max-inline-size:14ch}
.product .op-zin{margin-inline:auto}
.product-beeld{display:grid;gap:14px;margin-top:clamp(28px,4vw,48px);text-align:left}
@media (min-width:52rem){.product-beeld{grid-template-columns:1.6fr 1fr}}
.product-klein{display:grid;gap:14px}
.fotovak--groot{aspect-ratio:16/10}
.product-klein .fotovak{aspect-ratio:auto;block-size:100%;min-block-size:170px}

/* ------------------------------------------------------------------ over ons */
.uitspraak{background:var(--zacht);padding-block:clamp(56px,8vw,128px)}
.uitspraak-kop{margin:0;max-inline-size:22ch;font-family:'Bebas','PublicSans',Impact,sans-serif;font-weight:400;font-size:clamp(56px,8.4vw,136px);line-height:.88;text-transform:uppercase;color:var(--inkt);text-wrap:balance}
.uitspraak-kop em{display:block;font-style:normal;color:var(--accent-licht)}
.tweeluik--beeld{align-items:center}
@media (min-width:62rem){.tweeluik--beeld{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.fotovak--staand{aspect-ratio:4/5}
.werklijst{list-style:none;margin:0;padding:0;display:grid;gap:0 28px;border-top:1px solid var(--haar)}
@media (min-width:44rem){.werklijst{grid-template-columns:repeat(2,minmax(0,1fr))}}
.werklijst li{display:flex;gap:10px;align-items:center;min-block-size:52px;border-bottom:1px solid var(--haar)}
.werklijst .ic{flex:none;inline-size:20px;block-size:20px;color:var(--accent-licht)}

/* ------------------------------------------------------------------ een review als citaat */
.citaat{margin:0;padding:clamp(22px,3vw,36px);background:var(--wit);border:1px solid var(--haar);border-top:3px solid var(--accent);border-radius:var(--vorm);box-shadow:var(--diepte)}
.citaat blockquote{margin:14px 0 16px;font-size:clamp(19px,1.7vw,24px);line-height:1.45;letter-spacing:-.01em;color:var(--inkt)}
.citaat figcaption{font-size:15px;color:var(--stil)}
.citaat figcaption b{color:var(--inkt)}
.citaat + .citaat{margin-top:20px}
.googlelink{display:inline-flex;align-items:center;min-block-size:44px}

/* ------------------------------------------------------------------ contact: het formulier meteen */
.contactkop{background:var(--zacht);padding-block:clamp(40px,5.5vw,88px)}
.contactkop .wrap{display:grid;gap:clamp(32px,4.5vw,72px);align-items:start}
@media (min-width:62rem){.contactkop .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.contactlijst{display:grid;grid-template-columns:max-content 1fr;gap:0;margin:30px 0 0;border-top:1px solid var(--haar)}
.contactlijst dt,.contactlijst dd{margin:0;padding:14px 0;border-bottom:1px solid var(--haar)}
.contactlijst dt{padding-inline-end:24px;font-size:15px;color:var(--stil)}
.contactlijst dd{font-weight:600}
.contactlijst dd a{display:inline-flex;align-items:center;min-block-size:44px;margin-block:-12px;color:var(--inkt)}
.contact-groot{font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-.01em;text-decoration:none}

/* ------------------------------------------------------------------ de afsluiter, licht */
/* De voet eronder is al zwart; twee zwarte vlakken onder elkaar was te veel (Aaron, 01-11-2026). Een wit vlak op de lichte grond,
   met een oranje streep bovenop: links de vraag en de ene knop, rechts de drie manieren om hem te bereiken. */
.eind{background:var(--zacht);padding-block:clamp(48px,6vw,96px)}
.eind-kaart{display:grid;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(26px,4vw,56px);background:var(--wit);border:1px solid var(--haar);border-top:3px solid var(--accent);border-radius:var(--vorm);box-shadow:var(--diepte)}
@media (min-width:62rem){.eind-kaart{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.eind-tekst h2{margin:0;font-family:'Bebas','PublicSans',Impact,sans-serif;font-weight:400;font-size:clamp(40px,4.6vw,68px);line-height:.95;text-transform:uppercase;color:var(--inkt);text-wrap:balance}
.eind-tekst p:not(.op-label){margin:14px 0 26px;max-inline-size:50ch;font-size:17px;line-height:1.6;color:var(--stil)}
.eind-tekst .knop{inline-size:auto;min-block-size:54px;padding-inline:26px}
.eind-weg{list-style:none;margin:0;padding:0;border-top:1px solid var(--haar)}
.eind-weg a{display:flex;align-items:center;gap:16px;min-block-size:78px;border-bottom:1px solid var(--haar);color:var(--inkt);text-decoration:none}
.eind-weg .ic{display:grid;flex:none;place-items:center;inline-size:48px;block-size:48px;padding:13px;border-radius:50%;background:var(--zacht);color:var(--accent-licht)}
.eind-weg img{flex:none;inline-size:48px;block-size:auto}
.eind-weg a > span:not(.merk){display:grid;gap:2px;min-inline-size:0}
.eind-weg small{font-size:13px;color:var(--stil)}
.eind-weg b{overflow:hidden;font-size:17px;text-overflow:ellipsis}
.eind-weg a:hover b{color:var(--accent-licht)}

@media (prefers-reduced-motion: reduce){.dk,.dk-beeld img,.pt img,.dk-meer .ic,.dk-pijl .ic,.vn figcaption .ic{transition:none}.dk:hover,.dk:hover .dk-beeld img,.pt:hover img{transform:none}}

/* ------------------------------------------------------------------ zesde ronde (01-11-2026) */
/* Het logo boven de foto: geen wit vlakje meer (Aaron: "I don't like the white logo ... on the top, transparent, the logo is weird"),
   maar dezelfde vorm met witte schrijfletters (logodonker.mjs). Zodra de balk dicht is, het gewone logo. */
:root{--logo-vlak-boven:transparent;--logo-pad-boven:0}
.balklogo .logo-donker{display:none}
.balk[data-boven] .balklogo .logo-licht{display:none}
.balk[data-boven] .balklogo .logo-donker{display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}

/* Het formulier: een witte kaart met de oranje streep, zoals de andere kaarten, en de kop licht met zijn logo in eigen kleuren. */
.aanvraag{border-top:3px solid var(--accent);border-radius:var(--vorm)}
.aanvraagkop{background:var(--wit);border-block-end:1px solid var(--haar);padding-block:12px}
.aanvraagkop img{block-size:46px;background:none;padding:0;border-radius:0}
.aanvraagkop span{color:var(--accent-licht)}
.vensterdicht{background:var(--zacht);color:var(--inkt)}
.vensterdicht:hover{background:#ECE8E2}
.vensterdicht:focus-visible{outline-color:var(--accent)}
.veld small{font-weight:500;color:var(--stil)}
/* De stappen (.vraagstappen en .vraagstap, want .stappen en .stap zijn van de werkwijze). min-block-size:inherit neemt de gemeten hoogte over, zodat de knoppen in elke stap onderaan staan. */
.stapbalk{display:flex;gap:6px;margin:0 0 16px}
.stapbalk[hidden]{display:none}
.stapbalk span{flex:1;block-size:4px;border-radius:2px;background:var(--lijn);transition:background-color .25s}
.stapbalk span.is-aan{background:var(--accent)}
.vraagstap{display:flex;flex-direction:column;min-inline-size:0;margin:0;padding:0;border:0}
.vraagstap + .vraagstap{margin-top:22px}
/* Met script: de stappen op elkaar in een cel, alleen de huidige zichtbaar. Zonder script staan ze onder elkaar. */
/* Met script: alleen de huidige stap telt mee voor de hoogte; de andere liggen onzichtbaar en uit de flow. Zonder script staan ze
   onder elkaar. Tijdens het wisselen glijdt de hoogte (formulier.js, is-glijdend). */
.is-stappen .vraagstappen{position:relative}
.is-stappen .vraagstap + .vraagstap{margin-top:0}
.is-stappen .vraagstap[data-uit]{position:absolute;inset:0 0 auto 0}
.vraagstappen.is-glijdend{overflow:hidden;transition:height .28s cubic-bezier(.215,.61,.355,1)}
.vraagstap[data-uit]{visibility:hidden}
.vraagstap .stapfout + .keusgroep,.vraagstap > .keuzes + .keusgroep{margin-top:16px}
.vraagstap .veld{margin-block-end:10px}
.stapkop{padding:0;margin:0 0 14px;font-size:clamp(19px,1.7vw,22px);font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--inkt)}
.stapknoppen{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px}
.stapknoppen .knop{flex:1 1 auto;inline-size:auto}
.stapknoppen [hidden]{display:none!important}
.stapterug{flex:none;min-block-size:46px;padding:0 10px;border:0;background:none;font:inherit;font-size:15px;font-weight:700;color:var(--stil);cursor:pointer}
.stapterug:hover{color:var(--inkt)}
.stapfout{margin:10px 0 0;font-size:14px;font-weight:600;color:#B3261E}
.keuzes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.keusgroep{min-inline-size:0;margin:0 0 14px;padding:0;border:0}
.keuslabel{padding:0;margin:0 0 7px;font-size:14.5px;font-weight:600}
.keus{position:relative;display:flex;min-inline-size:0}
.keus input{position:absolute;inset:0;inline-size:100%;block-size:100%;margin:0;opacity:0;cursor:pointer}
.keus span{flex:1;display:flex;align-items:center;gap:9px;min-block-size:46px;padding:9px 11px;border:1px solid var(--lijn);border-radius:var(--rk);background:var(--wit);font-size:14.5px;font-weight:600;line-height:1.2;transition:border-color .16s,background-color .16s}
.keus span::before{content:"";flex:none;inline-size:18px;block-size:18px;border:2px solid #BFC3C8;border-radius:5px;background:#fff center/12px 12px no-repeat}
.keus input[type=radio] + span::before{border-radius:50%}
.keus:hover span{border-color:#8A8E93}
.keus input:checked + span{border-color:var(--accent);background:#FFF5ED}
.keus input:checked + span::before{border-color:var(--accent);background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.keus input[type=radio]:checked + span::before{background-image:radial-gradient(circle,#fff 3.5px,transparent 4px);background-size:auto}
.keus input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}

/* Voor en na: met een tik wisselen (JS_VOORNA). */
.vn-beeld{cursor:pointer;-webkit-tap-highlight-color:transparent}
.vn-beeld:focus-visible{outline:3px solid var(--accent);outline-offset:6px;border-radius:var(--r)}
.vn-beeld img{transition:opacity .18s ease}
.vn-beeld.is-wissel img{opacity:0}
.vn-voor{transition:rotate .25s ease,translate .25s ease}
.vn-beeld:hover .vn-voor{rotate:-1.5deg;translate:0 -4px}
.vn-voor small{display:flex;align-items:center;justify-content:space-between;gap:6px}
.vn-wis{flex:none;inline-size:17px;block-size:17px;color:var(--accent-licht)}

/* De kleine tegels: de foto vult de tegel, de naam erop, de pijl in de hoek. Geen wit vlak eronder. */
.dktrij{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:62rem){.dktrij{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:18px}}
@media (max-width:61.99rem){.dktrij > .dkt:last-child:nth-child(odd){grid-column:span 2;aspect-ratio:21/9}}
.dkt{position:relative;isolation:isolate;display:block;overflow:hidden;aspect-ratio:4/3;border-radius:var(--r);background:var(--donker);color:#fff;text-decoration:none;box-shadow:var(--diepte)}
.dkt-beeld,.dkt-beeld picture,.dkt-beeld img{position:absolute;inset:0;display:block;inline-size:100%;block-size:100%}
.dkt-beeld{z-index:-2}
.dkt-beeld img{object-fit:cover;object-position:var(--fp,50% 50%);transition:transform .5s cubic-bezier(.215,.61,.355,1)}
.dkt:hover .dkt-beeld img{transform:scale(1.05)}
.dkt::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,10,10,.8) 0%,rgba(10,10,10,.35) 40%,rgba(10,10,10,0) 70%);pointer-events:none}
.dkt-naam{position:absolute;left:14px;right:14px;bottom:13px;font-size:clamp(15px,1.25vw,18px);font-weight:700;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.dkt-pijl{position:absolute;top:10px;right:10px;display:grid;place-items:center;inline-size:34px;block-size:34px;border-radius:50%;background:var(--wit);color:var(--accent-licht);transition:transform .16s}
.dkt-pijl .ic{inline-size:17px;block-size:17px}
.dkt:hover .dkt-pijl{transform:translateX(3px)}
.dkt:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.dkt--leeg{background:#FFF7F0;color:var(--inkt)}
.dkt--leeg::after{display:none}
.dkt--leeg .dkt-beeld .fotovak{block-size:100%;aspect-ratio:auto;border-radius:inherit;padding:12px}
.dkt--leeg .fotovak b,.dkt--leeg .fotovak span:last-child{display:none}
.dkt--leeg .dkt-naam{text-shadow:none}

@media (prefers-reduced-motion: reduce){.vn-voor,.vn-beeld img,.dkt-beeld img,.dkt-pijl,.stapbalk span{transition:none}.vn-beeld:hover .vn-voor{rotate:-3deg;translate:none}.dkt:hover .dkt-beeld img{transform:none}}

/* De beoordelingen op de voorpagina met een of twee reviews: het cijfer links, het citaat rechts. */
.revkort{display:grid;gap:clamp(24px,4vw,64px);align-items:center}
@media (min-width:62rem){.revkort{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}}
.revcijfer .stil{margin:6px 0 0}
.revlinks{display:flex;flex-wrap:wrap;gap:4px 18px;margin:12px 0 0}
/* Kleinere reviewsectie zolang er nog geen citaten zijn (02-11-2026, op verzoek Tibbe). */
#reviews{padding-block:clamp(30px,3.6vw,52px) clamp(14px,1.8vw,24px)}
.revkort .gcijfer b{font-size:clamp(34px,4vw,46px)}
.revkort--leeg{grid-template-columns:minmax(0,1fr)!important;gap:0}
.revkort--leeg .revcijfer{max-inline-size:34rem}
.afstanden--smal{margin-top:8px}

/* ------------------------------------------------------------------ zevende ronde (01-11-2026) */
/* Contact als regels die je kunt aantikken: icoon, wat het is, en een pijl. De hele regel is de link. */
.contactweg{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px;max-inline-size:520px}
.contactweg a{display:flex;align-items:center;gap:14px;min-block-size:66px;padding:10px 16px 10px 12px;background:var(--wit);border:1px solid var(--haar);border-radius:var(--rk);color:var(--inkt);text-decoration:none;transition:border-color .16s,box-shadow .16s}
.contactweg a > .ic:first-child{display:grid;flex:none;place-items:center;inline-size:42px;block-size:42px;padding:11px;border-radius:50%;background:var(--zacht);color:var(--accent-licht)}
.contactweg a > span:not(.ic):not(.merk){display:grid;gap:1px;min-inline-size:0;flex:1}
.contactweg small{font-size:13px;color:var(--stil)}
.contactweg b{overflow:hidden;font-size:16.5px;text-overflow:ellipsis;white-space:nowrap}
.contactweg .cw-pijl{flex:none;inline-size:18px;block-size:18px;color:var(--accent-licht);transition:transform .16s}
.contactweg a:hover{border-color:var(--accent);box-shadow:0 10px 24px -16px rgba(20,20,20,.35)}
.contactweg a:hover b{color:var(--accent-licht)}
.contactweg a:hover .cw-pijl{transform:translateX(3px)}
.contactweg a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Op telefoon het contactblok (bellen/mailen/route) weglaten; de offerte blijft. Nummer en route staan ook in de kop en de kaart. */
@media (max-width:47.99rem){.contactweg{display:none}}
.contactklein{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0;font-size:14px;color:var(--stil)}
.contactkop .op-kop{font-size:clamp(40px,4.6vw,66px)}

/* De werkwijze op een lijn: vier stappen naast elkaar, een stip per stap, de laatste in het oranje. Op een telefoon onder elkaar. */
.werkkop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-bottom:clamp(26px,3vw,40px)}
.werkkop .sectiekop{margin:0}
.werkkop .knop{inline-size:auto;padding-inline:22px}
/* Het verfspoor (bouw.mjs, secWerkwijze): de baan van de roller loopt achter de rondjes langs, van de eerste stap tot voorbij de
   laatste. Op de telefoon loopt hij naar beneden: dezelfde baan, gedraaid en niet uitgerekt, anders vervormt de verf (--vs-h zet
   basis.js, JS_SPOOR). Dat de baan zich over de stappen rolt, staat bij "beweging bij het scrollen". */
.vs{position:relative}
.vs-baan{position:absolute;left:0;right:0;top:6px;block-size:52px;pointer-events:none;background:url(beeld/roller.svg) left center/100% 100% no-repeat}
.vs-stappen{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:26px}
@media (min-width:62rem){.vs-stappen{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}}
.vs-stappen li{display:grid;gap:8px;align-content:start}
.vs-ico{display:grid;place-items:center;inline-size:64px;block-size:64px;margin-bottom:10px;border-radius:50%;background:var(--wit);color:var(--accent-licht);
  box-shadow:0 12px 26px -12px rgba(20,20,20,.45),0 0 0 6px rgba(255,255,255,.6)}
.vs-ico svg{inline-size:28px;block-size:28px}
.vs-stappen li:last-child .vs-ico{background:var(--inkt);color:#fff}
.vs-stappen h3{margin:0;font-size:19px}
.vs-stappen p{margin:0;max-inline-size:32ch;color:var(--stil);font-size:15.5px;line-height:1.55}
@media (max-width:61.99rem){
  .vs-baan{left:61px;right:auto;top:0;inline-size:var(--vs-h,600px);block-size:58px;transform-origin:0 0;rotate:90deg}
  .vs-stappen li{grid-template-columns:64px 1fr;column-gap:18px}
  .vs-ico{grid-row:span 2;margin:0}
}

/* De vragen in een paneel (bouw.mjs, secVragen): wit met de oranje streep, de kop links, de vragen rechts met een icoon per vraag, en
   onderin een strook met de bel- en de mailtegel. */
.vr-paneel{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px) clamp(28px,4vw,64px);padding:clamp(24px,3.2vw,48px);
  background:var(--wit);border:1px solid var(--haar);border-top:3px solid var(--accent);border-radius:var(--vorm);box-shadow:var(--diepte)}
@media (min-width:62rem){.vr-paneel{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}.vr-strook{grid-column:1/-1}}
.vr-links .sectiekop{margin:0}
.vr-zin{margin:12px 0 0;max-inline-size:36ch;color:var(--stil)}
.vr-vraag{border-bottom:1px solid var(--haar)}
.vr-vraag summary{display:flex;align-items:center;gap:16px;min-block-size:76px;list-style:none;cursor:pointer;font-weight:700;font-size:17.5px;color:var(--inkt)}
.vr-vraag summary::-webkit-details-marker{display:none}
.vr-vraag summary::before{content:"";flex:none;inline-size:30px;block-size:30px;border-radius:50%;
  background:#eaf6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312a5e6' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;transition:rotate .25s}
.vr-vraag[open] summary::before{rotate:45deg}
.vr-vraag summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.vr-ico{display:grid;flex:none;place-items:center;inline-size:44px;block-size:44px;border-radius:13px;background:#FFF3EA;color:var(--accent-licht)}
.vr-ico svg{inline-size:22px;block-size:22px}
.vr-antw p{margin:0 0 20px 46px;max-inline-size:60ch;color:var(--stil);font-size:16px;line-height:1.6}
@media (max-width:43.99rem){.vr-antw p{margin-left:0}.vr-vraag summary{font-size:16.5px}}
.vr-strook{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--haar)}
.vr-strook p{margin:0;color:var(--stil)}
.vr-strook b{color:var(--inkt)}
.vr-wegen{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));flex:1 1 min(600px,100%);min-inline-size:0;max-inline-size:640px}
.hulp-weg{display:flex;align-items:center;gap:14px;min-block-size:64px;padding:10px 14px 10px 10px;background:var(--wit);border:1px solid var(--haar);border-radius:var(--rk);color:var(--inkt);text-decoration:none;transition:border-color .16s,box-shadow .16s}
.hulp-weg .merk{inline-size:42px;block-size:42px}
.hulp-weg > span:not(.merk):not(.ic){display:grid;gap:1px;flex:1;min-inline-size:0}
.hulp-weg small{font-size:13px;color:var(--stil)}
.hulp-weg b{font-size:16px}
.hulp-weg > .ic{inline-size:18px;block-size:18px;color:var(--accent-licht);transition:transform .16s}
.hulp-weg:hover{border-color:var(--accent);box-shadow:0 10px 24px -16px rgba(20,20,20,.35)}
.hulp-weg:hover > .ic{transform:translateX(3px)}
.hulp-weg:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* De openingen met iets ernaast: de foto's van de verf, de slogan van over ons. */
.product-naast{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.product-naast > .diep{grid-column:1/-1}
.opening .product-naast > .diep > .fotovak{aspect-ratio:2/1}
.product-naast > .fotovak{aspect-ratio:16/9;padding:12px}
.opening--uitspraak .op-kop{font-size:clamp(46px,5vw,84px)}
.opening .diep > .fotovak{aspect-ratio:5/4}
.opening--foto .vn{max-inline-size:480px;margin-inline:auto}
/* Telefoonronde (01-11-2026): het adres breekt af in plaats van weg te vallen, de verffoto's blijven binnen het scherm, het lege
   projectvak zegt het maar een keer, en de plaatsen onderaan een plaatspagina zijn een afstandenlijst (op een laptop in twee kolommen). */
.contactweg b{white-space:normal;overflow-wrap:anywhere}
.product-naast{grid-template-columns:repeat(2,minmax(0,1fr))}
.product-naast > .fotovak{min-inline-size:0}
@media (max-width:47.99rem){.product-naast > .fotovak span:last-child{display:none}.product-naast > .fotovak{aspect-ratio:4/3}}
.pt--leeg .fotovak span:last-child{display:none}
.afstanden--rij{max-inline-size:none;margin-top:0}
@media (min-width:52rem){.afstanden--rij{columns:2;column-gap:clamp(28px,4vw,64px);border-top:0}.afstanden--rij li{break-inside:avoid}.afstanden--rij a{border-top:1px solid var(--haar);border-bottom:0}}

/* ------------------------------------------------------------------ de achtergrond: warme grond met verf (01-11-2026) */
/* Aaron: "the background, white or off-white, I feel like something is missing ... what could make it feel more alive, more premium."
   Eerst koos hij een zachte oranje gloed; daarna wilde hij echte verf zien ("a paint roller, but also the smaller brush ... at places
   where it looks good, not random"), en uit roller, kwast en allebei koos hij allebei, met de gloed eruit. Nu: een warme grond onder
   de hele pagina, de secties doorzichtig zodat er geen naden zijn, en verf op een paar vaste plekken (zie "de verf" hieronder). De
   kaarten, het formulier en de foto's blijven wit en liggen erop. */
:root{--warm:#FAF6F1}
body{background:var(--warm)}
main{position:relative}
/* Alle vlakken van een sectie doorzichtig; de kop van de voorpagina houdt zijn foto. */
main > section:not(.kop),.sectie--grond,.opening,.eind,.contactkop,.projectkop{background:transparent}
@media (max-width:47.99rem){main > .kop{background:transparent}}

/* ------------------------------------------------------------------ de verf (01-11-2026) */
/* Twee streken, als SVG met rafelige randen, strepen en een droog uiteinde (bronbeeld/roller.svg en kwast.svg), zodat het verf is en
   geen vlak. Steeds op dezelfde soort plek, nooit willekeurig:
   - de kwast (.streep, {{streep:...}} in bouw.mjs): onder het belangrijkste woord van de koppen die op meer pagina's terugkomen
     (diensten, eigen verf, voor en na, werkwijze), zoals een schilder iets aanstreept;
   - de roller (.rol, {{rol:...}}): een baan achter de kop van elk slot met de offerteknop (de afsluiter onderaan, het contactblok),
     het moment waarop iemand besluit; per regel, dus ook als de kop over twee regels loopt;
   - een vlak van de roller rechtsonder achter de foto van hen samen (.verf-vlak), waar er geen tekst achter staat. */
.streep{position:relative;z-index:0;white-space:nowrap}
.streep::after{content:"";position:absolute;z-index:-1;left:-2%;right:-3%;bottom:-.02em;block-size:.26em;border-radius:.13em;
  background:#12a5e6}
.rol{padding:.02em .3em .06em;margin-inline:-.3em;border-radius:.18em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(#e6f4fb,#e6f4fb) left 55%/100% 90% no-repeat}
.verfdrager{isolation:isolate}
/* Gespiegeld (scale), zodat het volle begin van de streek onder de foto uitkomt en niet het droge eind. */
.verf-vlak{position:absolute;z-index:-1;right:-11%;bottom:-11%;inline-size:66%;block-size:42%;rotate:-7deg;scale:-1 1;pointer-events:none;
  background:url(beeld/roller.svg) center/100% 100% no-repeat}
@media (max-width:61.99rem){.verf-vlak{right:-8%;bottom:auto;top:-9%;inline-size:78%;block-size:34%;rotate:6deg}}
#persoonlijk{overflow-x:clip}

/* ------------------------------------------------------------------ beweging bij het scrollen (01-11-2026) */
/* Aaron: "when you scroll down, some little animations, really little, not too crazy, so it feels more alive." Wat onder de vouw staat
   komt rustig 18 pixels omhoog en in beeld (premium-web: fade en translate, meer niet), naast elkaar een tikje na elkaar; en de verf
   zet zich op zijn plek terwijl de kop verschijnt: de kwast trekt van links naar rechts, de roller rolt over de kop. Alleen met
   script en alleen voor wat bij het openen nog niet in beeld is (basis.js, JS_BEWEEG), dus er knippert niets en zonder script staat
   alles er gewoon. Wie minder beweging vraagt, krijgt niets. */
.bw-aan .bw{opacity:0;translate:0 18px;transition:opacity .6s cubic-bezier(.215,.61,.355,1),translate .6s cubic-bezier(.215,.61,.355,1);transition-delay:var(--bw-d,0ms)}
.bw-aan .bw.is-in{opacity:1;translate:0 0}
.bw-aan .bw .streep::after{clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.45,0,.2,1) .35s}
.bw-aan .bw.is-in .streep::after{clip-path:inset(0 0 0 0)}
.bw-aan .bw .rol{background-size:0% 112%;transition:background-size .9s cubic-bezier(.45,0,.2,1) .3s}
.bw-aan .bw.is-in .rol{background-size:100% 112%}
.bw-aan .vs.bw .vs-baan{background-size:0% 100%;transition:background-size 1.4s cubic-bezier(.45,0,.2,1) .2s}
.bw-aan .vs.bw.is-in .vs-baan{background-size:100% 100%}
.bw-aan .bw .verf-vlak{clip-path:inset(0 0 0 100%);transition:clip-path .9s cubic-bezier(.45,0,.2,1) .25s}
.bw-aan .bw.is-in .verf-vlak{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.bw-aan .bw{opacity:1;translate:none;transition:none}.bw-aan .bw .streep::after,.bw-aan .bw .verf-vlak{clip-path:none;transition:none}.bw-aan .bw .rol{background-size:100% 112%;transition:none}.bw-aan .vs.bw .vs-baan{background-size:100% 100%;transition:none}}

/* Het formulier in de kop staat op de computer in het midden naast de tekst (Aaron, 01-11-2026: "on the bottom there's less space
   than the top"). basis.css zette het onderaan (align-self:end, voor de oude kop met de tekst onderin); bij de affiche-kop staan tekst
   en formulier allebei in het midden, met evenveel ruimte erboven als eronder. */
@media (min-width:62rem){.koprij:has(.koptekst--affiche) > .aanvraag{align-self:center}}

/* Herkenbare logo's (bouw.mjs, MERK): Google Maps en Facebook in hun eigen kleuren, bellen en mailen als de tegels van een telefoon.
   Een zachte schaduw eronder, zodat ze een beetje van de pagina af komen. */
.merk{display:inline-grid;flex:none;place-items:center;filter:drop-shadow(0 3px 6px rgba(20,20,20,.16))}
.merk svg{display:block;inline-size:100%;block-size:100%}
.merk--maps svg{inline-size:auto}
.merk--tegel{background:#fff;border:1px solid var(--haar);border-radius:24%}
/* Breedte en niet hoogte: een hoogte in procenten heeft in een raster geen vaste maat om op te rekenen, en dan blies het vakje op. */
.merk--tegel.merk--maps svg{inline-size:46%;block-size:auto}
.merk--rond{padding:3px;background:#fff;border-radius:50%}
.contactweg .merk{inline-size:44px;block-size:44px}
.eind-weg .merk{inline-size:46px;block-size:46px}
.kaartkaart-wie .merk{inline-size:42px;block-size:42px}
.kaartlaad .merk{inline-size:26px;block-size:26px;filter:none}
.voet a .merk{inline-size:24px;block-size:24px;filter:none}
.voet a .merk--maps{padding-block:1px}

/* De kaart als voorwerp en niet als achtergrond (01-11-2026). Aaron: op de telefoon "the Google Maps section disappears a bit in the
   background". Het werkgebied op de voorpagina krijgt dezelfde kaart als de rest (wit, oranje streep, schaduw), het plaatje van de
   kaart iets meer kleur, en op de telefoon nemen de uitleg en de knop minder van de kaart in. */
.gebiedkaart{padding:10px;background:var(--wit);border:1px solid var(--haar);border-top:3px solid var(--accent);border-radius:var(--vorm);box-shadow:var(--diepte)}
.gebiedkaart > .kaartslot{border-radius:var(--vorm-in)}
.kaartuit > picture img{filter:saturate(1.25) contrast(1.06)}
@media (min-width:62rem){.gebiedkaart-vak{left:42px;bottom:42px}}
@media (max-width:61.99rem){
  .gebiedkaart-vak{margin:-34px 6px 4px;box-shadow:0 18px 34px -22px rgba(20,20,20,.45)}
  .kaartslot .kaartuit{gap:8px;padding:10px}
  .kaartslot .kaartzin{max-inline-size:30ch;padding:7px 10px;font-size:12px;line-height:1.4}
  .kaartslot .kaartlaad{min-block-size:44px;padding-inline:14px;font-size:14.5px}
  .kaartslot .kaartlaad .merk{inline-size:22px;block-size:22px}
  .gebiedkaart .kaartuit{padding-bottom:42px}
}

/* ------------------------------------------------------------------ het menu (01-11-2026) */
/* Aaron: "navigatie op telefoon is echt heel onduidelijk, en zorg dat de navigatie op pc wat beter wordt."
   Computer: een oranje streepje onder de pagina waar je bent en onder wat je aanwijst, de groene beltegel bij het nummer, en Diensten
   klapt uit tot een paneel met per dienst een icoon en een regel, en een vak om meteen een offerte te vragen of te bellen.
   Telefoon: een belknop en een knop met Menu erop in de balk; het menu zelf licht, in gewone letters, de diensten als rijen met een
   icoon, de andere pagina's als tegels, en onderin altijd bellen en de offerte. */
.nico{display:grid;flex:none;place-items:center;inline-size:40px;block-size:40px;border-radius:12px;background:#FFF3EA;color:var(--accent-licht)}
.nico svg{inline-size:21px;block-size:21px}
.balktel .merk{inline-size:30px;block-size:30px}
.balknav > a,.navdrop > a{position:relative;background:none!important}
.balknav > a::before,.navdrop > a::before{content:"";position:absolute;left:clamp(7px,.8vw,12px);right:clamp(7px,.8vw,12px);bottom:6px;block-size:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s cubic-bezier(.215,.61,.355,1)}
.navdrop > a::before{right:calc(clamp(7px,.8vw,12px) + 14px)}
.balknav > a:hover::before,.navdrop:hover > a::before,.balknav > a[aria-current]::before,.navdrop > a[aria-current]::before{transform:scaleX(1)}
.balknav > a[aria-current],.navdrop > a[aria-current]{color:var(--balk-inkt)}
.balknav > a:focus-visible,.navdrop > a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Het uitklappaneel van de diensten. */
.navlijst.navmega{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:8px;inline-size:min(720px,90vw);min-inline-size:0;padding:10px;inset-inline-start:-24px;
  border:1px solid var(--haar);border-top:3px solid var(--accent);border-radius:16px;box-shadow:0 30px 60px -24px rgba(20,20,20,.45)}
.navmega-diensten{display:grid;align-content:start;gap:2px;padding:2px}
.balk .navmega a.navmega-dienst{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;white-space:normal;color:var(--inkt)}
.navmega-dienst > span:last-child{display:grid;gap:1px}
.navmega-dienst b{font-size:15px}
.navmega-dienst small{font-size:13px;font-weight:500;color:var(--stil)}
.balk .navmega a.navmega-dienst:hover,.balk .navmega a.navmega-dienst[aria-current]{background:var(--zacht)}
.balk .navmega a.navmega-alle{display:inline-flex;align-items:center;gap:6px;margin:4px 10px 2px;padding:8px 0;font-weight:700;color:var(--accent-licht);background:none}
.navmega-alle .ic{inline-size:16px;block-size:16px}
.navmega-vak{display:grid;align-content:start;gap:14px;padding:18px;border-radius:12px;background:var(--zacht)}
.navmega-vak p{margin:0;font-size:14.5px;line-height:1.5;color:var(--stil)}
.navmega-vak b{display:block;margin-bottom:4px;font-size:15.5px;color:var(--inkt)}
.balk .navmega-vak .knop{inline-size:auto;justify-self:start;padding-inline:18px;color:#141414}
.balk .navmega a.navmega-bel{display:inline-flex;align-items:center;gap:10px;padding:4px 0;font-weight:800;color:var(--inkt);background:none}
.navmega-bel .merk{inline-size:32px;block-size:32px}
/* De telefoon: belknop en Menu in de balk. */
.balkbel{display:none}
.menuknop .mk-dicht{display:none}
.menuknop[aria-expanded="true"] .mk-open{display:none}
.menuknop[aria-expanded="true"] .mk-dicht{display:block}
@media (max-width:63.99rem){
  .menuknop{inline-size:auto;gap:8px;padding:0 14px;font:inherit;font-weight:700;font-size:15px}
  .balk:has(.menupaneel[data-open]){--balk-grond:var(--wit);--balk-inkt:var(--inkt);--balk-stil:var(--stil);--balk-lijn:var(--haar)}
  .menupaneel{background:var(--warm);color:var(--inkt);padding-block:16px 22px;border-block-start:1px solid var(--haar)}
  .menupaneel .mp a{font-family:'PublicSans',system-ui,sans-serif;font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--inkt);border:0;min-block-size:0}
  .menupaneel .mp a::after{content:none}
  .mp-kop{margin:2px 2px 8px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-licht)}
  .mp-diensten{display:grid;margin-bottom:18px;overflow:hidden;background:var(--wit);border:1px solid var(--haar);border-radius:16px}
  .menupaneel .mp a.mp-rij{display:flex;align-items:center;gap:12px;min-block-size:58px;padding:8px 14px 8px 9px;font-size:16.5px;border-block-end:1px solid var(--haar)}
  .menupaneel .mp a.mp-rij:last-child{border-block-end:0}
  .mp-rij .mp-pijl{margin-left:auto;inline-size:18px;block-size:18px;color:var(--accent-licht)}
  .mp-drop{margin-bottom:18px;background:var(--wit);border:1px solid var(--haar);border-radius:16px;overflow:hidden}
  .mp-drop .mp-sum{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;min-block-size:58px;padding:8px 16px;font-size:16.5px;font-weight:700;color:var(--inkt)}
  .mp-drop .mp-sum::-webkit-details-marker{display:none}
  .mp-drop .mp-sum::after{content:"";inline-size:11px;block-size:11px;flex:none;border-right:2.4px solid var(--accent-licht);border-bottom:2.4px solid var(--accent-licht);transform:rotate(45deg);transition:transform .2s}
  .mp-drop[open] .mp-sum::after{transform:rotate(225deg)}
  .mp-drop .mp-diensten{margin:0;border:0;border-radius:0;border-block-start:1px solid var(--haar)}
  .menupaneel .mp a[aria-current]{background:#FFF3EA}
  .mp-tegels{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:18px}
  .menupaneel .mp a.mp-tegel{display:flex;align-items:center;gap:10px;min-block-size:58px;padding:8px 12px 8px 8px;background:var(--wit);border:1px solid var(--haar);border-radius:14px;font-size:15.5px}
  .menupaneel .mp a.mp-tegel[aria-current]{border-color:var(--accent)}
  .mp-acties{display:grid;gap:10px}
  .menupaneel .mp a.mp-bel{display:flex;align-items:center;gap:12px;min-block-size:62px;padding:8px 12px 8px 9px;background:var(--wit);border:1px solid var(--haar);border-radius:14px}
  .mp-bel .merk{inline-size:44px;block-size:44px}
  .mp-bel > span:last-child{display:grid;gap:1px}
  .mp-bel small{font-size:13px;font-weight:500;color:var(--stil)}
  .mp-bel b{font-size:17px}
  .menupaneel .mp-offerte{inline-size:100%;margin:0;min-block-size:54px;justify-content:center;font-size:16.5px}
}
/* Op telefoon geen groene belknop meer, maar gewoon het nummer als tekstlink (meekleurend met de balk). */
@media (max-width:47.99rem){.balkbel{display:inline-flex;align-items:center;min-block-size:44px;font-weight:800;font-size:16px;white-space:nowrap;text-decoration:none;color:var(--balk-inkt)}}
.balk[data-boven] .balkbel{text-shadow:0 1px 3px rgba(0,0,0,.55)}

/* De werkwijze met echte tegels (bouw.mjs, stapBeeld): de tegels op de baan van de roller, met een rand in de kleur van de grond. */
.vs-ico,.vs-stappen li:last-child .vs-ico{position:relative;background:none;box-shadow:none;border-radius:0;color:inherit}
.vs-ico .merk{inline-size:60px;block-size:60px;border-radius:24%;box-shadow:0 0 0 5px rgba(250,246,241,.92);filter:drop-shadow(0 10px 14px rgba(20,20,20,.22))}
.vs-ico--twee .vs-tweede{position:absolute;right:-8px;bottom:-6px;inline-size:30px;block-size:30px;box-shadow:0 0 0 3px #FAF6F1}
.merk--keur{display:grid;place-items:center;padding:7px;background:#fff;border:1px solid var(--haar)}
.merk--keur img{display:block;inline-size:100%;block-size:auto}
@media (max-width:63.99rem){.menupaneel .mp a.mp-tegel,.menupaneel .mp a.mp-bel,.menupaneel .mp a.mp-rij{justify-content:flex-start}}

/* Scherpe menutekst (01-11-2026). Aaron: "de navigatie tekst is wazig op pc." Over de foto stond er een vervaagde schaduw onder de
   witte letters (basis.css, .balk[data-boven]); op Windows maakt een tekstschaduw de letters zacht, omdat de scherpe randen van het
   lettertype dan wegvallen. Nu zonder schaduw, met het verloop achter de balk iets donkerder zodat wit op elke foto leest; en na het
   scrollen bijna zwart in plaats van lichtgrijs. */
.balk[data-boven] .balknav a,.balk[data-boven] .balktel,.balk[data-boven] .balklogo{text-shadow:none}
.balk[data-boven]::before{background:linear-gradient(180deg,rgba(8,10,9,.74) 0%,rgba(8,10,9,.46) 62%,rgba(8,10,9,0) 100%)}
.balk:not([data-boven]) .balknav > a,.balk:not([data-boven]) .navdrop > a{color:#25282C}
.balknav > a,.navdrop > a,.balktel{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* App-tegels (bouw.mjs, APP): in het menu en bij de vragen, net als de bel- en mailtegel in de voet. De oude lijniconen op een licht
   vlakje (.nico, .vr-ico) zijn weg. Vinkjes zijn een blauw rondje met een wit vinkje. */
.merk--app{border-radius:24%}
.navmega-dienst .merk,.mp-rij .merk,.mp-tegel .merk{inline-size:40px;block-size:40px}
.vr-vraag summary > .merk{inline-size:44px;block-size:44px}
.vinklijst .ic{display:grid;place-items:center;inline-size:22px;block-size:22px;padding:5px;border-radius:50%;
  background:linear-gradient(180deg,#45bdf2,#0a6fa6);color:#fff;box-shadow:0 3px 6px -2px rgba(18,165,230,.42)}
.vinklijst .ic svg{inline-size:100%;block-size:100%;stroke-width:3.4}
.knop--bel{gap:10px}
.knop--bel .merk{inline-size:26px;block-size:26px;filter:none}
.formvoet .ic{display:grid;place-items:center;flex:none;inline-size:20px;block-size:20px;padding:4px;border-radius:50%;background:linear-gradient(180deg,#45bdf2,#0a6fa6);color:#fff}
.formvoet .ic svg{inline-size:100%;block-size:100%;stroke-width:3.4}

/* GALERIJ per project: de WeTransfer-foto's per map in een raster (02-11-2026, op verzoek Tibbe). */
.galerij{display:grid;gap:clamp(10px,1.4vw,16px);grid-template-columns:1fr}
@media(min-width:40rem){.galerij{grid-template-columns:1fr 1fr}}
@media(min-width:62rem){.galerij{grid-template-columns:1fr 1fr 1fr}}
.galf{margin:0;border-radius:var(--r);overflow:hidden;background:var(--grond)}
.galf picture{display:block}
.galf img{display:block;inline-size:100%;block-size:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.galf:hover img{transform:scale(1.03)}

/* Home: compactere diensten en "Ons werk" dichter erop (02-11-2026, verzoek Tibbe: nam veel ruimte in, grote witte balk ervoor). */
#diensten{padding-block:clamp(14px,1.8vw,26px) clamp(22px,2.6vw,36px)}
#projecten{padding-block:clamp(20px,2.2vw,32px) clamp(22px,2.6vw,40px)}
/* Het gat tussen de knop "Bekijk ons werk" (eind Mijn werk) en de werkgebied-kaart kleiner. */
#werkgebied{padding-block-start:clamp(22px,2.6vw,40px)}
@media (min-width:62rem){
  #diensten .dk-beeld{aspect-ratio:16/9}
  #diensten .dk-in{padding-block:16px 8px;gap:7px}
}

/* De diensten-punten als rustige lijst met een klein streepje i.p.v. vinkjes (02-11-2026, verzoek Tibbe: vinkjes voelden te AI). */
.op-punten{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px}
.op-punten li{position:relative;padding-inline-start:18px;color:var(--inkt);font-size:16px;line-height:1.5}
.op-punten li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;inline-size:9px;block-size:2px;border-radius:1px;background:var(--accent)}

/* Kaart-slot zonder gegenereerd plaatje: een nette link naar Google Maps i.p.v. een gebroken afbeelding (02-11-2026). */
.kaartslot--link{border:1px solid var(--haar);border-radius:var(--r);background:var(--wit);padding:clamp(16px,2.2vw,22px);box-shadow:var(--diepte)}
.kaartslot--link a{display:flex;align-items:center;gap:12px;color:var(--inkt);font-weight:700}
.kaartslot--link .merk{inline-size:40px;block-size:40px;flex:none}
.kaartslot--link .ic{margin-inline-start:auto}