/* ============================================================
   Beco Bouwgroep — de gedeelde blokken

   De blauwdruk in docs/architectuur/pagina-blueprints.md beschrijft
   een reeks blokken die op meerdere paginatypes terugkomen. Dit
   bestand bouwt ze, zodat elke pagina die erna komt ze alleen nog
   hoeft aan te roepen:

     .hero-smal      een hero die niet het volle scherm vult
     .snelantwoord   G3, de definiërende zinnen boven de vouw
     .samenvatting   G3, de samenvatting, boven de sprong
     .raster         G12, kaarten die naar onderliggende pagina's
                     verdelen, elk met een eigen voordeel
     .vlak-donker    één donkere sectie per pagina, voor variatie
     .sprong         G16, ankerlinks op een lange pagina
     .watwedoen      de opsomming van wat een stiel concreet doet
     .materialen     G15, wat er verwerkt is, met het project erbij
     .samen          G5, stielen die vaak samen op één werf staan
     .lokaal         waar wij deze stiel uitvoeren
     .volgorde       de fasenlijst; staat nu op één pagina, maar
                     hoort hier omdat de stielhubs hem erven

   G9, de oproep, staat al in home.css als .daadstrook met .daadvlak
   erin. Die wordt hier hergebruikt en niet opnieuw gedefinieerd.

   Waarom niet in basis.css: die draagt de chrome van alle 178
   pagina's (balk, paneel, hero, voet). Dit zijn secties die een
   pagina kiest. En niet in home.css: dat bestand is uitdrukkelijk
   alleen de homepage.
   ============================================================ */


/* ══ HERO-SMAL ═══════════════════════════════════════════════
   De hero op de homepage is een raster van 46 op 54 dat het volle
   scherm vult, met een beeld dat rechts van de pagina afloopt. Dat
   werkt daar omdat er niets boven staat. Op elke andere pagina
   staat er wel iets boven, namelijk het kruimelpad, en moet de
   bezoeker binnen één scherm bij de inhoud kunnen. Vandaar een
   tweede component en geen variant: andere hoogte, ander
   beeldgedrag, en het pad erboven.                             */
/* Boven: de balk uit de weg, plus --lucht. Onder: --lucht.
   De sectie eronder krijgt haar bovenruimte weggenomen in home.css,
   anders telt die er nog eens bij op en staat de hero scheef in
   zijn eigen pagina.                                            */
.hero-smal{padding-block:calc(var(--balk-top) + var(--balk-hoog) + var(--lucht))
  var(--lucht)}
.hero-smal .kruimels{margin-bottom:clamp(24px,3.2vw,38px)}
.hero-smal .binnen{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(32px,5vw,80px);align-items:center}
@media(max-width:940px){
  .hero-smal .binnen{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}
}
.hero-smal .mini{margin-bottom:clamp(14px,1.8vw,22px)}
.hero-smal h1{font-size:clamp(2.3rem,5.2vw,4.2rem);line-height:.98;
  letter-spacing:-.045em;max-width:15ch;text-wrap:balance}
/* Op een telefoon is de kolom al smal: de regelbreedte van 15ch
   knijpt de titel dan nog eens samen en laat rechts een lege strook
   staan. Onder 700px neemt de titel dus de volle breedte, en
   balanceren hoeft niet meer.                                   */
@media(max-width:700px){
  .hero-smal h1{max-width:none;text-wrap:wrap;text-wrap:pretty}
}
.hero-smal .kleurlijn{height:clamp(9px,1.1vw,13px);width:min(320px,74%);
  margin-top:clamp(20px,2.6vw,30px)}
.hero-smal .onder{margin-top:clamp(22px,3vw,32px);max-width:50ch;
  font-size:clamp(1rem,1.35vw,1.14rem);line-height:1.66}
.hero-smal .beeld{position:relative;overflow:hidden;
  aspect-ratio:3/2;border-radius:var(--rond-l) 0 var(--rond-l) 0}
.hero-smal .beeld img{width:100%;height:100%;object-fit:cover}
@media(max-width:940px){.hero-smal .beeld{aspect-ratio:16/10}}


/* ══ G3 · SNELANTWOORD ═══════════════════════════════════════
   Eén tot twee zinnen die het onderwerp als entiteit vastleggen.
   Dit is de alinea die een zoekmachine of een AI-antwoord
   letterlijk overneemt, dus hij staat boven de vouw en krijgt
   nooit een reveal: hij mag nooit van beweging afhangen.      */
/* De diagonale ronding is het merkteken van de site: linksboven en
   rechtsonder rond, de twee andere hoeken scherp. Elk beeldkader doet
   het, dus dit tekstblok hoort het ook te doen. De gouden rand blijft
   links staan en volgt de ronding mee.                            */
.snelantwoord{margin-top:clamp(28px,4vw,44px);
  padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,34px);
  background:#fff;border:1px solid var(--lijn);
  border-left:4px solid var(--goud);
  border-radius:var(--rond-m) 0 var(--rond-m) 0;
  max-width:72ch}
.snelantwoord p{margin:0;font-size:clamp(1rem,1.3vw,1.12rem);
  line-height:1.62;color:var(--grijs-900)}



/* ══ DE SAMENVATTING ═════════════════════════════════════════════
   De samenvatting van de pagina, boven de sprongnavigatie. Eén
   zin die het onderwerp vastlegt, plus drie punten. Dat is geen
   willekeurige vorm: de zin is wat een zoekmachine als alinea
   uitknipt, de punten zijn wat ze als lijst uitknipt.

   De rand links draagt de stielkleur. Het vierkantje voor een
   punt is hetzelfde teken als in .watwedoen, zodat er geen
   tweede vormtaal bij komt.                                   */
/* HOEVEEL LUCHT ER ROND HET BLOK STAAT. Het stond met 40 pixels
   onder de hero en 96 erboven de oproep: krap boven, ruim onder, en
   dus scheef. Eén maat nu, aan allebei de kanten dezelfde, en ruimer
   dan de grootste van de twee was.

   De onderruimte is de padding van de hero zelf, want dit blok staat
   IN de hero en niet erna. Daarom zet dezelfde variabele hier de
   marge en verderop de padding van de hero eronder. Verander je er
   één, verander dan allebei; of beter, verander alleen --samen-lucht.
                                                                */
.samenvatting{margin-top:var(--samen-lucht);
  padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,34px);
  background:#fff;border:1px solid var(--lijn);
  border-left:4px solid var(--kleur,var(--indigo));
  border-radius:var(--rond-m) 0 var(--rond-m) 0;
  /* Het blok is het derde kind van het tweekolomsraster van de hero
     en viel daardoor onder de tekstkolom, op iets meer dan de halve
     breedte. Het hoort over beide kolommen te lopen. De bovengrens
     is de container (--max), niet een regelbreedte in ch: die 76ch
     kneep het blok nog een tweede keer samen.                    */
  grid-column:1 / -1;max-width:none}
.hero-smal:has(.samenvatting){padding-bottom:var(--samen-lucht)}
.samenvatting-etiket{display:block;margin-bottom:10px;
  font-family:var(--tekst);font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--kleur,var(--indigo))}
.samenvatting > p{margin:0;font-size:clamp(1rem,1.3vw,1.12rem);
  line-height:1.62;color:var(--grijs-900)}
/* Drie punten naast elkaar zodra de volle breedte er is, eronder
   gestapeld zoals voorheen. Zonder dit staan drie korte regels over
   de hele breedte uitgesmeerd.                                   */
.samenvatting ul{margin:clamp(14px,1.7vw,19px) 0 0;padding:0;list-style:none;
  display:grid;gap:11px clamp(22px,2.6vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.samenvatting li{display:grid;grid-template-columns:9px minmax(0,1fr);gap:13px;
  align-items:start;font-size:15.5px;line-height:1.55;
  color:var(--grijs-900)}
.samenvatting li::before{content:"";margin-top:.46em;width:9px;height:9px;
  border-radius:3px 0 3px 0;background:var(--kleur,var(--indigo))}
/* De naam is bewust .samenvatting en niet .kort. Er bestaat al een
   .daadstrook.kort voor de korte gouden oproep, en een kale .kort
   trok die oproep in dit witte kader. Dat is één keer gebeurd en
   het mag niet nog eens.                                       */

/* ══ HET PROJECTRASTER ═══════════════════════════════════════
   Twee kaarten op een rij en niet drie. Bij drie werd het beeld te
   klein en viel geen enkel project nog op. Dezelfde regel staat in
   realisatie.css en realisaties.css voor de pagina's die dat blad
   laden; hier staat ze voor elke andere pagina die een greep uit het
   werk toont, zoals de childpagina's onder een stiel. Zonder dit
   stond elke kaart daar over de volle breedte, één per rij.

   De kaart draagt in het spoor van de homepage een vaste breedte; in
   een raster bepaalt de kolom die.                               */
.rea-raster{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,3.4vw,48px) clamp(20px,2.6vw,38px);
  margin-top:clamp(24px,3.2vw,38px)}
@media(max-width:620px){ .rea-raster{grid-template-columns:1fr} }
.rea-raster .rea-kaart{flex:initial; scroll-snap-align:none}

/* ══ G12 · KAARTENRASTER ═════════════════════════════════════
   Beeld, titel, één onderscheidende regel, een link. De regel uit
   de blauwdruk die dit blok draagt: elke kaart benoemt zijn eigen
   voordeel. Staan er zes kaarten die allemaal hetzelfde beloven,
   dan is de splitsing mislukt, hoe mooi de kaarten ook staan.

   De kaart erft de stielkleur via --kleur op het element zelf,
   net als in de stielensectie op de homepage.                 */
.raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px)}
@media(max-width:960px){.raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.raster{grid-template-columns:1fr}}
/* Niet elke stiel heeft er zes. Afbraakwerken heeft er één en
   grondwerken en vloerwerken elk twee. Eén kaart die de volle
   breedte pakt of twee met een leeg derde vak leest als een fout,
   dus het raster telt zichzelf.                                 */
@media(min-width:961px){
  .raster:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .raster:has(> :only-child){grid-template-columns:minmax(0,calc(50% - clamp(9px,1.2vw,15px)))}
}

.raster-kaart{position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--lijn);
  border-radius:var(--hoek) 0 var(--hoek) 0;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
/* Bij hover alleen optillen en schaduw. De kaart draagt al een rand
   en links de stielkleur; die rand dan óók nog laten kleuren maakt
   er een tweede omlijning bij die niets toevoegt.              */
.raster-kaart:hover{transform:translateY(-3px);
  box-shadow:0 24px 50px -34px rgba(20,21,60,.4)}
/* De stielkleur zat hier als brede streep over de volle hoogte. Die
   is eruit: het teken bij de titel en de kleur van de link zeggen al
   om welke stiel het gaat, en een balk erlangs maakte er een derde
   keer hetzelfde van.                                           */

/* Het beeld is zelf ook de weg naar de pagina. Het draagt geen eigen
   naam voor een schermlezer, want de titel eronder wijst al naar
   dezelfde plek; twee keer hetzelfde doel aankondigen helpt niemand.
   Vandaar aria-hidden en tabindex -1 op de link in de opmaak.    */
.raster-beeld{display:block;aspect-ratio:16/10;overflow:hidden}
.raster-beeld img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.raster-kaart:hover .raster-beeld img{transform:scale(1.04)}

.raster-binnen{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,26px) clamp(20px,2.4vw,26px) clamp(24px,2.8vw,30px)}
/* Het teken van de stiel, hetzelfde vierkantje met de merkhoek als
   in het megamenu en in de stielenlijst op de homepage. Het draagt
   de stielkleur, dus het zegt om welke stiel het gaat nog voor je
   de titel gelezen hebt.                                        */
.raster-hoofd{display:flex;align-items:center;gap:11px}
.raster-teken{display:block;width:14px;height:14px;flex:none;
  border-radius:4px 0 4px 0;background:var(--kleur,var(--indigo));
  transition:transform .35s var(--ease)}
.raster-kaart:hover .raster-teken{transform:scale(1.3)}
.raster-kaart h3{font-family:var(--disp);font-size:clamp(1.2rem,1.7vw,1.5rem);
  letter-spacing:-.03em;line-height:1.14;color:var(--indigo-900)}
/* De titel is zelf de weg naar de pagina. Hij kleurt mee op hover,
   zodat je ziet dat er iets achter zit.                         */
.raster-kaart h3 a{color:inherit;transition:color .2s var(--ease)}
.raster-kaart h3 a:hover{color:var(--kleur,var(--indigo))}
/* De onderscheidende regel. Eén per kaart, en op elke kaart een
   andere: dat is de hele reden dat dit blok bestaat.          */
.raster-kaart p{font-size:15px;line-height:1.6;margin:0}
.raster-kaart .meer-link{margin-top:auto;padding-top:16px;
  display:inline-flex;align-items:center;gap:9px;width:fit-content;
  font-weight:600;font-size:14.5px;color:var(--kleur,var(--indigo))}
.raster-kaart .meer-link{text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1.5px;text-decoration-color:transparent;
  transition:text-decoration-color .25s var(--ease)}
.raster-kaart .meer-link:hover{
  text-decoration-color:color-mix(in srgb,var(--kleur,var(--indigo)) 45%,transparent)}
.raster-kaart .meer-link svg{transition:transform .35s var(--ease)}
.raster-kaart .meer-link:hover svg,
.raster-kaart:hover .meer-link svg{transform:translateX(4px)}
/* ── De onderliggende pagina's, in de kaart zelf ───────────
   Vanaf het overzicht moet je in één klik op de pagina kunnen die
   je zoekt, niet eerst langs de stielhub. De negentien
   childpagina's stonden tot nu toe alleen in het megamenu.

   Er staat bewust GEEN klikvlak meer over de hele kaart: met zeven
   links erin zou dat de onderliggende links onbereikbaar maken en
   voor een schermlezer één doel voorspiegelen waar er zeven zijn. */
.raster-kinderen{display:flex;flex-direction:column;gap:1px;
  margin-top:6px;padding-top:14px;border-top:1px solid var(--lijn)}
.raster-kinderen a{display:flex;align-items:center;gap:10px;
  padding:7px 8px;margin-left:-8px;border-radius:8px;
  font-size:14.5px;line-height:1.35;color:var(--tekst-kleur);
  transition:color .2s var(--ease),background .2s var(--ease)}
.raster-kinderen a::before{content:"";flex:none;width:6px;height:6px;
  border-radius:2px 0 2px 0;background:var(--kleur,var(--indigo));opacity:.42;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.raster-kinderen a:hover{color:var(--kleur,var(--indigo));
  background:color-mix(in srgb,var(--kleur,var(--indigo)) 7%,transparent)}
.raster-kinderen a:hover::before{opacity:1;transform:scale(1.25)}

/* De hublink blijft de zwaarste van de kaart: hij staat onderaan,
   met lucht erboven en de kleur voluit.                        */
.raster-kaart .meer-link{border-top:1px solid var(--lijn);margin-top:auto;
  padding-top:14px;width:100%}


/* ══ DE VOLGORDE ═════════════════════════════════════════════
   Welke stiel in welke fase van een werf aan bod komt. Een lijst
   met de stielkleur als merkteken en een lijn die de fasen aan
   elkaar rijgt, zodat je ziet dat het een volgorde is en geen
   opsomming.                                                   */
.volgorde{display:flex;flex-direction:column;gap:0;counter-reset:fase}
.volgorde li{position:relative;display:grid;
  grid-template-columns:clamp(46px,5vw,64px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,30px);
  padding-block:clamp(20px,2.6vw,30px)}
.volgorde li + li{border-top:1px solid var(--lijn)}
/* Het bolletje met het fasenummer, en de lijn die naar de
   volgende fase loopt.                                        */
.volgorde .stip{position:relative;display:grid;place-items:center;
  width:clamp(38px,4vw,50px);height:clamp(38px,4vw,50px);
  border-radius:var(--pil);flex:none;
  background:color-mix(in srgb,var(--kleur) 14%,#fff);
  color:var(--kleur);font-family:var(--disp);font-weight:600;
  font-size:clamp(13px,1.1vw,15px);font-variant-numeric:tabular-nums}
.volgorde li:not(:last-child) .stip::after{content:"";position:absolute;
  top:100%;left:50%;translate:-50% 0;width:2px;
  height:calc(clamp(20px,2.6vw,30px) * 2);
  background:linear-gradient(var(--kleur),transparent)}
.volgorde h3{font-family:var(--disp);font-size:clamp(1.15rem,1.8vw,1.5rem);
  letter-spacing:-.03em;margin-bottom:7px}
.volgorde h3 a{color:var(--indigo-900);transition:color .2s var(--ease)}
.volgorde h3 a:hover{color:var(--kleur)}
.volgorde p{font-size:15.5px;line-height:1.62;max-width:56ch;margin:0}
/* ── Twee routes: alles samen, of maar één ────────────────
   De vraag die een bezoeker op dit punt heeft, is niet "in welke
   volgorde" maar "moet ik dit allemaal afnemen". Die twee routes
   staan daarom naast elkaar vóór de lijst, elk in een eigen vak,
   zodat het antwoord zichtbaar is nog voor je leest. Het vak
   links draagt de eerste stielkleur, dat rechts de laatste: samen
   zijn ze de twee uiteinden van de kleurlijn.                  */
.tweeroutes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px);margin-bottom:clamp(34px,4.4vw,56px)}
@media(max-width:720px){.tweeroutes{grid-template-columns:1fr}}
/* De rand staat onderaan, en hij zegt zelf welke route het is. Bij
   "alles samen" loopt de volledige kleurlijn eronder, in de vaste
   volgorde die bij bruin begint. Bij "of maar één" ligt er één
   kleur. Zo hoeft dat verschil niet in woorden.               */
.route{position:relative;padding:clamp(22px,2.8vw,32px)
  calc(clamp(22px,2.8vw,32px) + 4px);
  background:#fff;border:1px solid var(--lijn);
  border-radius:var(--hoek) 0 var(--hoek) 0;overflow:hidden}
.route::after{content:"";position:absolute;inset:auto 0 0 0;height:5px}
.route-alles::after{background:linear-gradient(to right,
  var(--vloer) 0 16.667%, var(--grond) 16.667% 33.333%,
  var(--afbraak) 33.333% 50%, var(--timmer) 50% 66.667%,
  var(--dak) 66.667% 83.333%, var(--bouw) 83.333% 100%)}
.route-een::after{background:var(--vloer)}
.route-etiket{display:block;font-family:var(--disp);font-weight:600;
  font-size:clamp(1.15rem,1.8vw,1.5rem);letter-spacing:-.03em;
  color:var(--indigo-900);margin-bottom:10px}
.route p{margin:0;font-size:15.5px;line-height:1.62;max-width:44ch}

/* De regel die de lijst hieronder aankondigt. */
.volgorde-lijn{margin-bottom:clamp(10px,1.4vw,16px);
  font-family:var(--tekst);font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--indigo)}

/* De noot onder de lijst hoort bij de leeskolom, niet bij de volle
   paginabreedte: anders leest hij als een aparte sectie.       */
.volgorde-noot{margin-top:clamp(24px,3vw,36px);max-width:72ch;
  font-size:15.5px;line-height:1.66;color:var(--grijs-600)}
.volgorde-noot a:not(.knop):not(.knop-leeg){color:var(--indigo);font-weight:500;text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--indigo) 35%,transparent);
  transition:text-decoration-color .2s var(--ease)}
.volgorde-noot a:not(.knop):not(.knop-leeg):hover{text-decoration-color:var(--indigo)}

/* Volgt de noot op twee routes in plaats van op de fasenlijst, dan
   draagt .tweeroutes de onderruimte al. Zonder deze regel staan de
   twee marges op elkaar en valt de noot los van het blok waar hij
   het voorbehoud bij maakt.                                    */
.tweeroutes + .volgorde-noot{margin-top:0}

.volgorde .stiel{display:inline-block;margin-left:10px;
  font-family:var(--tekst);font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--kleur);
  vertical-align:.14em}



/* ══ DONKER VLAK ═════════════════════════════════════════════
   Eén sectie per pagina op diep indigo, met de kop links en een
   korte lijst rechts. Hij breekt de pagina en zorgt voor variatie
   op een plek waar anders drie lichte secties na elkaar komen.

   Wat erin staat verschilt per pagina. Op het dienstenoverzicht is
   dat het eigen materieel. Het was eerst het grensblok (G18) uit
   de blauwdruk, maar een hele sectie van "dit doen wij niet" viel
   te negatief uit voor de plek waar hij staat. Die grens staat nu
   in de FAQ, waar een ontkenning wel op zijn plaats is.        */
.vlak-donker{padding-block:var(--blok);background:var(--indigo-900);color:#C7C8E4}
.vlak-donker .binnen{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,5vw,80px);align-items:start}
@media(max-width:900px){.vlak-donker .binnen{grid-template-columns:1fr;gap:32px}}
.vlak-donker .merklint span{color:var(--goud)}
.vlak-donker h2{color:#fff;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.04;
  letter-spacing:-.04em;text-wrap:balance}
.vlak-donker .inleiding{margin-top:clamp(18px,2.4vw,26px);color:#C7C8E4;
  max-width:44ch;font-size:15.5px;line-height:1.66}
.vlak-donker ul{display:flex;flex-direction:column;gap:2px}
.vlak-donker li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;
  padding-block:clamp(14px,1.8vw,20px);align-items:start}
.vlak-donker li + li{border-top:1px solid rgba(255,255,255,.12)}
/* Het teken uit het megamenu, in goud. Het kruisje dat hier eerst
   stond hoorde bij een opsomming van ontkenningen.            */
.vlak-donker li .vlak-teken{margin-top:8px;width:11px;height:11px;flex:none;
  border-radius:3px 0 3px 0;background:var(--goud)}
.vlak-donker li b{display:block;font-family:var(--disp);font-weight:600;color:#fff;
  font-size:clamp(1rem,1.3vw,1.12rem);letter-spacing:-.02em;margin-bottom:5px}
.vlak-donker li span{display:block;font-size:15px;line-height:1.6;color:#A9ABD2}
.vlak-donker li a:not(.knop):not(.knop-leeg){color:#fff;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.4);
  transition:text-decoration-color .2s var(--ease)}
.vlak-donker li a:not(.knop):not(.knop-leeg):hover{color:var(--goud);text-decoration-color:var(--goud)}



/* ══ INLEIDING IN EEN PROJECTKOP ═════════════════════════════
   .rea-kop lijnt zijn twee kolommen op de onderrand uit, omdat er
   normaal alleen een kop en een knop in staan. Komt er een
   inleiding onder de kop, dan hoort die uitlijning boven.      */
.rea-kop:has(.rea-intro){align-items:start}
.rea-intro{margin-top:clamp(16px,2vw,22px);max-width:52ch;
  font-size:16px;line-height:1.64}


/* ══ G16 · SPRONGNAVIGATIE ═══════════════════════════════════
   Een stielhub is op een telefoon vijftien tot twintig schermen.
   Zonder springpunten scrolt de bezoeker langs alles heen wat hij
   niet zoekt. Vier tot zes ankers, direct onder de kop.        */
.sprong{display:flex;flex-wrap:wrap;gap:9px}
/* De rij staat onderaan in de hero, onder het beeld of de
   samenvatting, en neemt dezelfde stap als de samenvatting boven
   haar. De oproep staat verderop, net boven de vragen.         */
.hero-smal .sprong{margin-top:clamp(28px,3.6vw,40px)}
/* Deze pil is ook de filterknop op /realisaties/. Eén definitie,
   zodat er niet twee bijna-gelijke knoppen op de site staan. */
.sprong a,.filters label{display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px;border-radius:var(--pil);
  background:#fff;border:1px solid var(--lijn);
  font-size:14px;font-weight:600;color:var(--indigo);
  transition:border-color .25s var(--ease),background .25s var(--ease),
    transform .25s var(--ease)}
.sprong a::before,.filters label::before{content:"";width:10px;height:10px;flex:none;
  border-radius:3px 0 3px 0;background:var(--kleur,var(--indigo))}
.sprong a:hover,.filters label:hover{border-color:var(--kleur,var(--indigo));
  background:color-mix(in srgb,var(--kleur,var(--indigo)) 7%,#fff);
  transform:translateY(-2px)}


/* ══ WAT WIJ CONCREET DOEN ═══════════════════════════════════
   De klantgevalideerde opsomming. Twee kolommen op een breed
   scherm, want acht regels onder elkaar leest als een boodschappen-
   lijst en naast elkaar als een aanbod.                        */
.watwedoen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(24px,4vw,64px)}
@media(max-width:760px){.watwedoen{grid-template-columns:1fr}}
.watwedoen li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;
  align-items:start;padding-block:clamp(13px,1.6vw,17px);
  border-top:1px solid var(--lijn);font-size:16px;line-height:1.55}
.watwedoen li .teken{margin-top:.42em;width:9px;height:9px;flex:none;
  border-radius:3px 0 3px 0;background:var(--kleur,var(--indigo))}


/* ══ G15 · MATERIAALREGISTER ═════════════════════════════════
   Wat er werkelijk verwerkt is, met per materiaal het project
   waar het ligt. Dit is de enige claim op de site die de bezoeker
   letterlijk kan narekenen: hij klikt door en ziet de foto.

   Het beeldfragment bij hover uit de blauwdruk zit hier nog niet
   in. Dat vraagt per materiaal een eigen uitsnede.             */
.materialen{display:flex;flex-direction:column;gap:0}
.materialen li{display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:14px 26px;align-items:baseline;
  padding-block:clamp(15px,1.8vw,20px);border-top:1px solid var(--lijn)}
.materialen li:last-child{border-bottom:1px solid var(--lijn)}
.materialen b{font-family:var(--disp);font-weight:600;color:var(--indigo-900);
  font-size:clamp(1rem,1.4vw,1.18rem);letter-spacing:-.02em}
.materialen .waar{display:inline-flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:600;color:var(--kleur,var(--indigo));
  white-space:nowrap}
.materialen .waar svg{transition:transform .3s var(--ease)}
.materialen .waar:hover svg{transform:translateX(4px)}
@media(max-width:640px){
  .materialen li{grid-template-columns:1fr;gap:8px}
  .materialen .waar{white-space:normal}
}


/* ══ G5 · VAAK SAMEN UITGEVOERD ══════════════════════════════
   Twee tot drie kaarten naar de stielen die op dezelfde werf
   opduiken, met de streep in hun eigen kleur.                  */
.samen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,26px)}
@media(max-width:820px){.samen{grid-template-columns:1fr}}
.samen a{position:relative;display:flex;flex-direction:column;gap:9px;
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,26px)
    clamp(20px,2.4vw,26px) clamp(24px,2.8vw,30px);
  background:#fff;border:1px solid var(--lijn);
  border-radius:var(--hoek) 0 var(--hoek) 0;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.samen a::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;
  background:var(--kleur)}
.samen a:hover{transform:translateY(-3px);
  box-shadow:0 22px 46px -32px rgba(20,21,60,.4)}
.samen b{font-family:var(--disp);font-size:clamp(1.05rem,1.5vw,1.3rem);
  letter-spacing:-.03em;color:var(--indigo-900)}
.samen span{font-size:15px;line-height:1.58}
.samen .heen{margin-top:auto;padding-top:12px;display:inline-flex;
  align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--kleur)}


/* ══ WAAR WIJ DEZE STIEL UITVOEREN ═══════════════════════════
   Vier tot acht gemeenten in lopende tekst, met de gemeentenaam
   als echte link. Geen telefoonboek: dat is wat de werkgebiedtak
   doet.                                                        */
.lokaal-lijst{display:flex;flex-wrap:wrap;gap:10px;
  margin-top:clamp(22px,3vw,32px)}
.lokaal-lijst a{display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px;border-radius:var(--pil);background:#fff;
  border:1px solid var(--lijn);font-size:14.5px;font-weight:600;
  color:var(--indigo);
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.lokaal-lijst a::before{content:"";width:7px;height:7px;flex:none;
  border-radius:2px 0 2px 0;background:var(--kleur,var(--indigo))}
.lokaal-lijst a:hover{border-color:var(--kleur,var(--indigo));
  transform:translateY(-2px)}
/* Op een smal scherm past er soms één en soms twee naast elkaar,
   en dan staat de rij scheef. Dan liever alle acht onder elkaar,
   over de volle breedte.                                       */
@media(max-width:700px){
  .lokaal-lijst{flex-direction:column;align-items:stretch;gap:8px}
}


/* ══ DE KLEURLIJN ALS NAVIGATIE ══════════════════════════════
   Op een dienstpagina wijst de kleurlijn aan waar in de zes stielen
   je zit. Dat gebeurde eerst door de vijf andere segmenten naar 35
   procent te laten zakken, en dat kostte de lijn haar kracht: het
   signatuurelement van de camion stond vijf zesde van de tijd te
   verbleken.

   Nu staan alle zes voluit en groeit het segment van DEZE stiel naar
   boven uit. De onderkant blijft op één lijn met de rest, dus de
   lijn blijft een lijn; alleen dit ene blokje is hoger. Aanwezigheid
   in plaats van afwezigheid.

   GEEN TRANSFORM, en dat is met reden. Eerst groeide dit met
   scaleY, omdat dat op de compositor blijft. Het gevolg was een
   zichtbaar gat links en rechts van de balk: de zes segmenten zijn
   53,33 pixels breed, en een getransformeerd element krijgt zijn
   eigen laag die op hele pixels afgerond wordt terwijl de buren op
   hun breukdeel blijven staan. De boxen raakten elkaar exact, maar
   de RASTER liet er een naad tussen. Met height groeien blijft alles
   in dezelfde laag en sluit de lijn dicht.

   Dat het element daardoor per frame opnieuw gemeten wordt is hier
   geen bezwaar: het gaat om zes blokjes in één flexrij, geen tekst
   die eromheen moet herschikken.

   align-self houdt het blokje op de onderrand en de hoogte gaat
   naar 240 procent, dus het groeit naar boven uit terwijl de
   onderkant op één lijn blijft met de rest. De omhullende
   .kleurlijn heeft overflow:hidden nodig voor het tekenen; hier
   moet dat juist open, anders wordt het uitgroeien afgesneden.

   Het start pas nadat de lijn zichzelf getekend heeft: --start plus
   --kl-groei-wacht (zie het tempo in brand.css). Twee bewegingen
   tegelijk lezen als één rommeltje.

   Op een projectpagina groeien ALLE stielen van die werf uit, elk
   met zijn naam erbij, en ze komen na elkaar op: --n is de plaats
   in de rij (0, 1, 2, 3) en zet de vertraging met --kl-stap. Vier
   stielen tegelijk laten oppoppen leest als één schok; na elkaar
   lees je ze als vier.                                        */
/* container-type: de namen erboven meten zich aan de lijn (cqw), zie
   verderop. inline-size raakt de lijn zelf niet: die heeft een vaste
   breedte, en er wordt niets afgesneden.                        */
.kleurlijn.deze{overflow:visible;container-type:inline-size}
.kleurlijn.deze i{opacity:1}
.kleurlijn.deze i.aan{position:relative;align-self:flex-end;
  animation:balk-groeit var(--kl-groei) var(--ease-uit)
    calc(var(--start,.3s) + var(--kl-groei-wacht) + var(--n,0) * var(--kl-stap)) both}
@keyframes balk-groeit{from{height:100%}to{height:240%}}

/* DE NAAM VAN DE STIEL BOVEN DE BALK. Hier stond eerst de B van
   het logo uitgespaard in het stuk dat uitgroeit. Mooi, maar het
   zei niets: een merkteken op een merkpagina. Nu staat er waar het
   over gaat.

   De vorm komt van .gem-wenk op de werkgebiedkaart: een indigo balk
   met de naam en een punt eronder die naar het ding wijst. Twee keer
   hetzelfde gebaar op één site is geen herhaling maar een taal.

   Het label hangt aan het segment en niet aan de lijn, dus het staat
   altijd boven de juiste kleur, of die nu vooraan of achteraan
   staat. white-space houdt het op één regel; een stielnaam is nooit
   zo lang dat dat een probleem wordt.

   De kleurlijn is aria-hidden, dus een schermlezer krijgt dit label
   niet. Dat is juist: de h1 eronder zegt hetzelfde, en twee keer
   dezelfde naam achter elkaar voorlezen helpt niemand.        */
.kleurlijn.deze i.aan::after{content:attr(data-stiel);
  position:absolute;left:50%;bottom:calc(100% + 9px);translate:-50% 0;
  /* De naam staat in de achtergrondkleur van de sectie, dus hij lijkt
     uit het balkje geknipt. Daarvoor moet het balkje donker genoeg
     zijn: --kleur-label komt uit de generator, waar per stiel is
     uitgerekend hoeveel eigen kleur er nog in kan zonder dat de naam
     onleesbaar wordt. Afbraak blijft zuiver, grond gaat het diepst. */
  background:var(--kleur-label,var(--kleur,var(--indigo)));color:var(--papier);
  font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:-.01em;
  /* de segmenten zijn <i>, en dat is schuin; het label niet */
  font-style:normal;
  padding:6px 12px;border-radius:8px;white-space:nowrap;
  box-shadow:0 12px 26px -12px rgba(20,21,60,.6);
  opacity:0;animation:merk-op var(--kl-label) var(--ease-uit)
    calc(var(--start,.3s) + var(--kl-label-wacht) + var(--n,0) * var(--kl-stap)) both}
/* ALTIJD GECENTREERD OP DE EIGEN BALK, ook op het eerste en het
   laatste segment. Een naam die breder is dan zijn segment valt dan
   een stuk buiten de lijn ("Bouwwerken" op het laatste segment: 22
   pixel). Dat is de bedoeling: een naam die naar binnen schuift staat
   scheef boven zijn balk, en dat leest als een fout. De lijn is geen
   kader; ernaast is lucht.                                      */

/* het punt eronder, dat naar de balk wijst */
.kleurlijn.deze i.aan::before{content:"";position:absolute;
  left:50%;bottom:calc(100% + 5px);width:9px;height:9px;
  background:var(--kleur-label,var(--kleur,var(--indigo)));translate:-50% 0;rotate:45deg;border-radius:0 0 2px 0;
  opacity:0;animation:merk-op var(--kl-label) var(--ease-uit)
    calc(var(--start,.3s) + var(--kl-label-wacht) + var(--n,0) * var(--kl-stap)) both}
@keyframes merk-op{to{opacity:1}}

/* ELKE NAAM IN ZIJN EIGEN STIELKLEUR. De lijn zegt met nth-child al
   welk segment welke stiel is; hier leest het label diezelfde plaats
   terug. Zo hoeft de generator geen kleur mee te geven en kan de naam
   nooit in de kleur van een andere stiel staan. Op een pagina met één
   stiel is dit dezelfde kleur als die de hero al zette.        */
.kleurlijn.deze.omgekeerd i:nth-child(1){--kleur-label:var(--vloer)}
.kleurlijn.deze.omgekeerd i:nth-child(2){--kleur-label:var(--grond)}
.kleurlijn.deze.omgekeerd i:nth-child(3){--kleur-label:var(--afbraak)}
.kleurlijn.deze.omgekeerd i:nth-child(4){--kleur-label:var(--timmer)}
.kleurlijn.deze.omgekeerd i:nth-child(5){--kleur-label:var(--dak)}
.kleurlijn.deze.omgekeerd i:nth-child(6){--kleur-label:var(--bouw)}

/* MEERDERE NAMEN OP ÉÉN LIJN: DE LIJN WORDT BREDER.
   Alle namen staan boven de lijn, op één hoogte. Twee namen naast
   elkaar staan dan één segment uit elkaar, een zesde van de lijn, en
   ze mogen elkaar nooit raken. Dat is een rekensom, geen gevoel:
   de breedste combinatie van twee buren (Afbraakwerken naast
   Timmerwerken) is 8,2 keer de lettergrootte breed, dus de lijn moet
   minstens 49 keer de lettergrootte zijn.

   Daarom twee dingen. De lijn pakt de breedte van de kolom, tot een
   bovengrens. En de naam schaalt mee met de lijn: cqw is een procent
   van de lijnbreedte, dus de verhouding klopt op élke schermbreedte,
   ook bij formaten die we nooit getest hebben.

   Hoeveel procent, dat hangt af van WELKE namen er staan: "Dak" naast
   "Bouw" heeft minder nodig dan "Afbraakwerken" naast "Timmerwerken".
   De generator rekent het per pagina uit (--kl-c voor de volle namen,
   --kl-ck voor de korte; zie naam_factor in maak-realisatie.py) met
   0,8 em lucht tussen twee namen, en cms-collections.js doet dat
   rekenwerk nog eens over met de letterbreedtes die de browser echt
   tekent. De terugval, zonder een van beide: het slechtste geval.  */
.hero-smal .kleurlijn.deze:has(i.aan ~ i.aan){width:min(680px,100%)}
.kleurlijn.deze:has(i.aan ~ i.aan) i.aan::after{padding:.45em .7em}
.kleurlijn.deze:not([data-namen]):has(i.aan ~ i.aan) i.aan::after{
  font-size:clamp(10px,calc(var(--kl-c,1.95) * 1cqw),12.5px)}

/* Wordt de lijn zo smal dat de volle naam onder de tien pixel zou
   zakken, dan staat de korte naam er: "Dak" in plaats van
   "Dakwerken". Dat is niet afgekapt maar hoe Beco zelf over zijn
   stielen praat, en het past waar de volle naam dat niet doet.
   Dezelfde rekensom, andere breedtes: de korte namen vragen 29 keer
   de lettergrootte in plaats van 49.                            */
   Zonder JavaScript gebeurt die wissel op een vaste breedte, die van
   het slechtste geval. Met JavaScript zet cms-collections.js
   data-namen op de lijn (vol | kort | hoofd) op de breedte die voor
   DEZE namen klopt, en dan gelden de regels daaronder.          */
@container (max-width:499px){
  .kleurlijn.deze:not([data-namen]):has(i.aan ~ i.aan) i.aan::after{content:attr(data-kort);
    font-size:clamp(9px,calc(var(--kl-ck,3.3) * 1cqw),12.5px)}
}
@container (max-width:264px){
  .kleurlijn.deze:not([data-namen]):has(i.aan ~ i.aan) i.aan:not(.hoofd)::after,
  .kleurlijn.deze:not([data-namen]):has(i.aan ~ i.aan) i.aan:not(.hoofd)::before{content:none}
}
/* Dezelfde :has() erbij als in de terugvalregels: anders wegen die
   zwaarder en zou de stand die JavaScript koos niet doorkomen.    */
.kleurlijn.deze[data-namen="vol"]:has(i.aan ~ i.aan) i.aan::after{content:attr(data-stiel);
  font-size:clamp(10px,calc(var(--kl-c,1.95) * 1cqw),12.5px)}
.kleurlijn.deze[data-namen="kort"]:has(i.aan ~ i.aan) i.aan::after{content:attr(data-kort);
  font-size:clamp(9px,calc(var(--kl-ck,3.3) * 1cqw),12.5px)}
/* En past zelfs de korte naam niet meer naast de andere, dan blijft
   alleen de hoofdstiel staan. De andere balken groeien wel gewoon uit,
   dus je blijft zien hoeveel stielen er op deze werf stonden.   */
.kleurlijn.deze[data-namen="hoofd"]:has(i.aan ~ i.aan) i.aan::after{content:attr(data-kort)}
.kleurlijn.deze[data-namen="hoofd"]:has(i.aan ~ i.aan) i.aan:not(.hoofd)::after,
.kleurlijn.deze[data-namen="hoofd"]:has(i.aan ~ i.aan) i.aan:not(.hoofd)::before{content:none}

/* Het label vraagt lucht tussen de kop en de lijn, want het staat
   ertussen. Zonder deze regel schuift het over de laatste regel van
   de h1.                                                       */
.hero-smal:has(.kleurlijn.deze) h1{margin-bottom:0}
.hero-smal .kleurlijn.deze{margin-top:clamp(70px,5.8vw,82px)}


@media(prefers-reduced-motion:reduce){
  .kleurlijn.deze i.aan{animation:none;height:240%}
  .kleurlijn.deze i.aan::after,
  .kleurlijn.deze i.aan::before{animation:none;opacity:1}
}


/* ══ DE KEUZEVRAAG OP EEN CHILDPAGINA ════════════════════════
   Dezelfde twee vakken als op het dienstenoverzicht, maar hier
   staan ze niet voor "alles of één" en dragen ze dus geen
   kleurlijn. Ze krijgen de kleur van hun eigen stiel, de tweede
   lichter, zodat ze als twee varianten van hetzelfde lezen en
   niet als twee tegengestelden.                                */
.route-1::after{background:var(--kleur,var(--indigo))}
.route-2::after{background:color-mix(in srgb,var(--kleur,var(--indigo)) 38%,var(--lijn))}


/* ══ DE WERF, IN VOLGORDE ════════════════════════════════════
   Vier beelden van één werf, elk met een bijschrift dat zegt wat
   het echt is. Dit blok bestaat omdat een pagina zonder
   opgeleverd project toch bewijs mag tonen, zolang het bijschrift
   niet meer belooft dan het beeld waarmaakt. Een render heet hier
   dus een render.                                              */
.werfreeks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px)}
/* Niet elke pagina heeft vier bewijsbeelden, en er is er geen enkel
   bij te verzinnen. Een reeks van drie in een raster van vier laat
   rechts een gat dat leest als een beeld dat niet geladen is, en dat
   is precies de verkeerde indruk bij een sectie die bewijs toont.
   Het raster telt daarom de kaarten en past zich aan.            */
.werfreeks:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.werfreeks:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:960px){
  .werfreeks,
  .werfreeks:has(> :nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .werfreeks,
  .werfreeks:has(> :nth-child(3):last-child),
  .werfreeks:has(> :nth-child(2):last-child){grid-template-columns:1fr}
}
.werfbeeld{margin:0;display:flex;flex-direction:column;gap:14px}
.werfvlak{display:block;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--rond-m) 0 var(--rond-m) 0}
.werfvlak img{width:100%;height:100%;object-fit:cover}
.werfbeeld figcaption{display:flex;flex-direction:column;gap:4px}
.werfbeeld b{font-family:var(--disp);font-size:clamp(1rem,1.3vw,1.14rem);
  letter-spacing:-.025em;color:var(--indigo-900)}
.werfbeeld figcaption span{font-size:14.5px;line-height:1.5;color:var(--grijs-600)}
/* De regel die zegt wat er níét te tonen is. Die hoort er even
   nadrukkelijk bij als de beelden zelf.                        */
.werf-noot{margin-top:clamp(26px,3.4vw,40px);max-width:62ch;
  padding-left:16px;border-left:3px solid var(--goud);
  font-size:15.5px;line-height:1.66}


/* ══ HET GOUDEN OPROEPPANEEL ═════════════════════════════════
   Dezelfde vorm als .daadvlak, maar in het goud. Een lange pagina
   heeft twee oproepen nodig en twee identieke indigo panelen lezen
   als één vraag die blijft aandringen. Op goud draait alles om:
   de tekst wordt indigo, de knop wordt indigo met wit, en het
   merkteken is de indigo versie in plaats van de witte.

   .kort haalt de min-height van 75svh eraf. Die staat op de
   homepage zodat de oproep daar ruimte om zich heen krijgt, maar
   halverwege een lange pagina zou hij een gat slaan.            */
/* .kort onderscheidde zich in hoogte van de brede oproep. Nu beide
   dezelfde lucht dragen blijft alleen het paneel zelf verschillen. */
.daadstrook.kort{min-height:0}

.daadvlak.goud{background:var(--goud)}
.daadvlak.goud .merklint span{color:var(--indigo)}
/* De kop draagt het merkblauw zelf, niet de bijna-zwarte variant. */
.daadvlak.goud h2{color:var(--indigo)}
.daadvlak.goud p{color:var(--indigo-700)}
.daadvlak.goud .knop{background:var(--indigo);color:#fff}
.daadvlak.goud .knop:hover{background:var(--indigo-900)}
.daadvlak.goud .knop-leeg{color:var(--indigo-900);
  border-color:rgba(20,21,60,.28)}
.daadvlak.goud .knop-leeg:hover{color:var(--indigo-900);
  border-color:var(--indigo-900);background:rgba(255,255,255,.28)}