/* ============================================================
   Beco Bouwgroep — basislaag

   Dit bestand draagt de hele site: de paginatokens, de basistypografie,
   de knoppen, de navigatiebalk, het mobiele paneel, de hero, de
   stielensectie, de realisatierij en de voet. Alle 178 pagina's laden
   het.

   home.css ligt hierbovenop en bevat alleen de secties van de
   homepage. brand.css staat eronder met de merktokens.

   Eén component staat op één plek. Vind je een selector die ook in
   home.css voorkomt, dan hoort hij hier of daar, niet in beide: die
   splitsing heeft eerder stilzwijgend regels laten overschrijven.
   ============================================================ */

:root{
  --disp:'Archivo','Helvetica Neue',system-ui,sans-serif;
  --tekst:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --papier:#FCFDFE;   /* koel gebroken wit, dicht bij wit */
  --lijn:#E7EAF1;     /* lijnen mee koel getrokken */
  --marge:clamp(22px,5.5vw,84px);
  --max:1520px;
  /* De inspringing aan weerszijden. De navigatiebalk en elke sectie
     rekenen met dezelfde waarde, dus staan hun randen exact boven
     elkaar. Wijzig je hem, dan schuift alles mee.               */
  --rand:clamp(20px,3vw,34px);
  /* De binnenmarge van de balk. De inhoud van een sectie lijnt uit
     op de INHOUD van de balk (het logo, het menu), niet op de rand
     van de witte pil zelf.                                       */
  --balk-pad:clamp(18px,1.7vw,26px);

  /* De balk staat vast, dus de hero moet eronderuit beginnen. Deze
     twee maten zeggen waar de onderkant van de balk ligt.

     De hoogte van de balk staat verderop al als --balk-hoog, en die
     kent het verschil tussen desktop en telefoon. Hier stond even
     een tweede --balk-h van 64px naast, wat op desktop zes pixels
     te weinig was. Weg ermee: één maat, en dat is --balk-hoog.

     --lucht is de maat die een losstaand blok boven en onder zich
     laat. Eén waarde voor allebei de kanten, zodat zo een blok
     nooit scheef in zijn omgeving staat. Ze wordt gebruikt door de
     hero en door de inhoudsopgave op een blogartikel.           */
  --balk-top:clamp(12px,1.6vh,20px);
  /* De ondergrens stond op 56px. Op een telefoon is 7vw maar 27px,
     dus daar viel ze altijd op die ondergrens terug en werd het gat
     onder een hero de helft van wat het daarvoor was. 76px geeft er
     merkbaar lucht bij zonder dat desktop verschuift.           */
  --lucht:clamp(76px,7vw,96px);
  /* De lucht boven en onder het blok "In het kort" op een
     dienstpagina. Apart van --lucht omdat dat blok IN de hero staat
     en dus aan de onderkant tegen de padding van de hero aanleunt:
     die twee moeten gelijk zijn, en ruimer dan de hero elders nodig
     heeft. Zie .samenvatting in blokken.css.                    */
  --samen-lucht:clamp(76px,7.4vw,106px);
  /* Waar het logo in de balk begint. Elke sectie start hier, ook
     de secties die van rand tot rand lopen zoals de hero.        */
  --kant:calc(max(var(--rand),(100vw - var(--max)) / 2) + var(--balk-pad));
  /* De witruimte tussen de secties. Eén waarde, dus elke sectie die
     --blok gebruikt ademt mee.                                      */
  --blok:clamp(112px,15vw,224px);
  /* Wat de zwevende balk bovenaan van het scherm afsnoept. Hij ligt
     over elke pagina heen, dus secties die de VOLLE schermhoogte
     vullen rekenen hiermee: zo verdwijnt er niets onder de balk.
     Verander je de balk, dan verschuift alles hier mee.          */
  --balk-ruimte:calc(clamp(12px,1.6vh,20px) + 70px);
  --rond-k:14px;
  --hoek:clamp(20px,2.4vw,36px);
  /* Tekst is nooit zwart. De basiskleur is blauwgrijs, koppen staan
     in het diepe indigo van het merk.                               */
  --tekst-kleur:#4C5183;
}

body{font-family:var(--tekst);background:var(--papier);color:var(--tekst-kleur);line-height:1.6}
.omhulsel{width:calc(100% - 2 * var(--kant));margin-inline:auto;padding-inline:0}

p{color:var(--tekst-kleur)}
/* Koppen staan in het diepe indigo van het merk, niet in inkt: dat is
   de kleur die de rest van de site ook draagt.                       */
h1,h2,h3,h4,.disp{font-family:var(--disp);font-weight:600;color:var(--indigo);
  letter-spacing:-.035em}
/* Het kleine label. De kleur is indigo en niet --grijs-400: die haalt
   2.91 op papier en dit label draagt echte tekst.                    */
.mini{font-family:var(--tekst);font-size:11.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--indigo);
  display:inline-flex;align-items:center;gap:9px;
  white-space:nowrap;flex-wrap:nowrap}
.mini .merkje{width:15px;height:auto;flex:none}

/* ── Knoppen ─────────────────────────────────────────────── */
.knop,.knop-leeg{display:inline-flex;align-items:center;gap:11px;
  padding:17px 32px;border-radius:var(--pil);font-weight:600;font-size:15px;
  letter-spacing:-.005em;transition:background .3s var(--ease),
  transform .3s var(--ease),border-color .3s,color .3s}
.knop{background:var(--indigo);color:#fff}
.knop:hover{background:var(--indigo-900);transform:translateY(-2px)}
/* AFSPRAAK. Een knop krijgt nooit een onderlijning, waar hij ook
   staat. Schrijf je ergens een blanket-regel voor links in lopende
   tekst, dan hoort daar :not(.knop):not(.knop-leeg) bij. Zonder die
   uitzondering pakt zo een regel de knop mee, en dat is precies wat
   .naast a in over.css deed op tweehonderd pagina's.             */
.knop-leeg{color:var(--inkt);background:transparent;border:1px solid var(--lijn)}
.knop-leeg:hover{border-color:var(--indigo);color:var(--indigo);transform:translateY(-2px)}
/* Grendel tegen class="knop knop-leeg". In rust won .knop-leeg
   al, want die regel staat na .knop, dus zo'n knop zag er gewoon
   leeg uit. Bij hover pakte hij de donkere vulling van .knop én de
   indigo tekst van .knop-leeg: #2D2E83 op #14153C, contrast 1.52.
   Onleesbaar, en alleen te zien met de muis erop. Deze twee
   regels raken enkel elementen die beide klassen dragen, dus de
   gevulde knop en varianten als .pk-knop blijven ongemoeid.    */
.knop.knop-leeg{background:transparent;color:var(--inkt)}
.knop.knop-leeg:hover{background:transparent;color:var(--indigo)}
/* Iconen schuiven alleen horizontaal. Verticaal bewegen liet het
   pijltje zakken terwijl de tekst bleef staan, en dan lijkt de
   tekst omhoog te springen. Alles blijft op dezelfde as.       */
.knop svg,.knop-leeg svg{transition:transform .4s var(--ease)}
.knop:hover svg,.knop-leeg:hover svg{transform:translateX(4px)}

/* ══ NAV — zwevende lichte balk ═══════════════════════════════
   Licht, dun omrand, met diepte eronder. Breed genoeg voor de
   pagina's die er nog bij komen.

   De balk ligt bóven het mobiele menu (z-index 70 tegen 60). Dat
   is met opzet: het menu rolt eronderuit en de hamburger blijft
   staan waar hij stond, alleen verandert hij van vorm.

   --scrollbalk vult de breedte van de schuifbalk in zodra het
   menu de pagina vastzet. Zonder die correctie wordt het venster
   op dat moment breder en springt de hele balk een centimeter
   naar rechts.                                                 */
.balk{position:fixed;top:var(--balk-top);left:50%;
  translate:calc(-50% - var(--scrollbalk,0px) / 2) 0;z-index:70;
  width:min(var(--max),calc(100% - 2 * var(--rand)))}
/* De balk is ook het anker van het megamenu: dat hangt niet onder
   de knop Diensten maar onder de balk zelf, zodat het nooit
   buiten het scherm kan vallen. Vandaar position:relative.     */
.balk-in{position:relative;display:flex;align-items:center;gap:clamp(16px,2vw,32px);
  padding:9px 9px 9px var(--balk-pad);border-radius:var(--pil);
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(20,21,60,.08);
  box-shadow:0 1px 0 0 rgba(255,255,255,.9) inset,
             0 18px 46px -20px rgba(20,21,60,.32)}
/* Het logo is een link naar de home. Op een telefoon was het
   klikvlak maar 32 pixels hoog, minder dan een vinger nodig
   heeft. De binnenmarge maakt het 44 en past nog altijd binnen
   de balk, dus die wordt er niet hoger van.                   */
.balk .merk{display:flex;align-items:center;flex:none;padding-block:6px}
.balk .merk img{height:38px;width:auto}

.balk .menu{display:flex;align-items:center;gap:clamp(10px,1.3vw,22px);margin-right:auto}
/* Geen zwart in de navigatie: de tekst staat in het merkblauw,
   net als elke kop op de site.

   De hoverbeweging is dezelfde als die van de kleurlijn onder de
   titel: een streep die zich van links naar rechts tekent. Hij
   staat in goud, want dat is op deze site de kleur van "hier
   moet je zijn". Alleen de regels van de balk zelf, niet alles
   wat in het megamenu eronder hangt: die kregen anders dezelfde
   pilvorm, dezelfde maat en white-space:nowrap, waardoor de
   langste dienst uit zijn kolom liep.                          */
.balk .menu > a,.balk .menu .mega-link{position:relative;padding:9px 3px;
  font-size:15px;font-weight:500;color:var(--indigo);white-space:nowrap;
  transition:color .25s var(--ease)}
.balk .menu > a::after,.balk .menu .mega-link::after{content:"";position:absolute;
  left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--goud);
  transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease)}
.balk .menu > a:hover,.balk .menu .mega-link:hover{color:var(--indigo)}
.balk .menu > a:hover::after,.balk .menu .mega-link:hover::after,
.balk .menu .mega-link[aria-expanded="true"]::after{transform:scaleX(1)}
.mega a{white-space:normal}

/* ── Hier sta je ───────────────────────────────────────────
   site.js vergelijkt het adres van de pagina met dat van elke
   link in het menu en zet twee tekens: aria-current="page" op
   de pagina zelf, data-hier op de rubriek eromheen. Op
   /realisaties/rijwoning-assebroek/ licht Realisaties dus op,
   op /diensten/vloerwerken/tegelwerken/ zowel Diensten hier als
   Vloerwerken en Tegelwerken in het megamenu.

   Het teken is dezelfde gouden streep als bij aanraking, alleen
   blijft hij staan, met een donkerder blauw ernaast. Wie er met
   de muis over gaat ziet niets veranderen, en dat klopt: je
   bent er al. De letterdikte blijft met opzet gelijk, want de
   markering wordt pas na de eerste tekening gezet en zwaardere
   letters zouden de hele balk op dat moment nog verschuiven. */
.balk .menu > a[aria-current="page"],.balk .menu > a[data-hier],
.balk .menu .mega-link[aria-current="page"],.balk .menu .mega-link[data-hier]{
  color:var(--indigo-900)}
.balk .menu > a[aria-current="page"]::after,.balk .menu > a[data-hier]::after,
.balk .menu .mega-link[aria-current="page"]::after,
.balk .menu .mega-link[data-hier]::after{transform:scaleX(1)}

.balk .rechts{display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);flex:none}
.balk .tel{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;
  color:var(--indigo);white-space:nowrap;transition:color .25s,background .25s}
.balk .tel:hover{color:var(--indigo-700)}
.balk .tel svg{color:var(--indigo)}
/* Op de brede balk staat het volledige nummer; het korte label
   springt pas in wanneer daar geen plaats meer voor is.       */
.balk .tel .tel-kort{display:none}
.balk .nav-knop{padding:13px 24px;font-size:14.5px}

/* ── De hamburger die een kruisje wordt ────────────────────
   Eén knop voor open én dicht. Er springt niets meer van plek:
   de drie streepjes draaien mee naar het kruis en de knop kleurt
   indigo zolang het menu openstaat.                           */
.menu-knop{display:none;width:42px;height:42px;border-radius:var(--pil);flex:none;
  place-items:center;color:#fff;border:1px solid var(--indigo);background:var(--indigo);
  transition:background .35s var(--ease),border-color .35s var(--ease)}
/* Blijft blauw, ook open: indigo-900 werd naast de contactknop
   bijna zwart en dat is precies wat er uit de navigatie moest. */
.menu-knop:hover,.menu-knop[aria-expanded="true"]{background:var(--indigo-700);border-color:var(--indigo-700)}
.ham{position:relative;display:block;width:18px;height:12px;
  transition:transform .5s var(--ease)}
.menu-knop[aria-expanded="true"] .ham{transform:rotate(180deg)}
.ham i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:currentColor;
  transition:transform .45s var(--ease),opacity .25s var(--ease)}
.ham i:nth-child(1){top:0}
.ham i:nth-child(2){top:5px}
.ham i:nth-child(3){top:10px}
.menu-knop[aria-expanded="true"] .ham i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-knop[aria-expanded="true"] .ham i:nth-child(2){opacity:0;transform:scaleX(.1)}
.menu-knop[aria-expanded="true"] .ham i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ══ MEGAMENU ════════════════════════════════════════════════
   Het pijltje naast Diensten is het enige teken dat er meer
   achter zit; zonder dat teken zag je niet dat er iets te
   openen viel.

   Het paneel hing eerder onder de knop zelf (left:50% van een
   knop van 90 pixels breed) en liep daardoor links het scherm
   uit: de eerste kolom was half afgesneden. Nu hangt het aan de
   balk, met left:0 en right:0, dus het is per definitie even
   breed als de balk en valt er nooit buiten.                   */
.mega-houder{position:static;display:inline-flex;align-items:center}
.balk .menu .mega-link{display:inline-flex;align-items:center;gap:7px}
.mega-pijl{flex:none;opacity:.65;transition:transform .35s var(--ease),opacity .3s}
.mega-link[aria-expanded="true"] .mega-pijl{transform:rotate(180deg);opacity:1}

/* De diagonaal van de site: linksboven en rechtsonder rond, de
   twee andere hoeken recht. Zie .blog-kaart en .review-kaart. */
.mega{position:absolute;top:calc(100% + 12px);left:0;right:0;
  background:#fff;border:1px solid var(--lijn);
  border-radius:var(--hoek) 0 var(--hoek) 0;
  box-shadow:0 30px 70px -30px rgba(20,21,60,.4);
  padding:clamp(20px,1.7vw,26px) clamp(22px,2vw,32px);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);z-index:50;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s}
.mega.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
/* De brug over de opening tussen balk en paneel: zonder deze
   strook viel de muis er tussenin en klapte het menu dicht. */
.mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
/* Zes kolommen, elk met een blokje in de eigen stielkleur voor
   de titel. Datzelfde teken staat in het uitklapmenu op een
   telefoon, en het draagt de diagonaal van de site: linksboven
   en rechtsonder rond, de twee andere hoeken recht.          */
.mega-raster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 22px}
.mega-groep > a{display:flex;align-items:center;gap:10px;padding:0 0 11px;
  font-family:var(--disp);font-weight:600;font-size:15.5px;letter-spacing:-.02em;
  color:var(--indigo);transition:color .2s var(--ease)}
.mega-groep > a i{width:11px;height:11px;border-radius:4px 0 4px 0;flex:none;
  background:var(--kleur);transition:transform .3s var(--ease)}
.mega-groep > a:hover{color:var(--indigo-700)}
.mega-groep > a:hover i{transform:scale(1.35)}
.mega-groep ul{display:flex;flex-direction:column;gap:1px}
/* Ook hier schuift de regel op in plaats van dat er een grijs
   blokje achter springt: dezelfde beweging als in het paneel. */
.mega-groep ul a{display:block;padding:6px 0;font-size:13.8px;line-height:1.35;
  color:var(--tekst-kleur);
  transition:color .25s var(--ease),transform .25s var(--ease)}
.mega-groep ul a:hover{color:var(--indigo);transform:translateX(5px)}
.mega-voet{margin-top:20px;padding-top:16px;border-top:1px solid var(--lijn);
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:flex-start;justify-content:space-between}
.mega-voet a{position:relative;font-size:14px;font-weight:600;color:var(--indigo);
  transition:color .25s var(--ease)}
.mega-voet a:hover{color:var(--indigo-700)}
/* Beide regels bewegen op dezelfde manier: goud dat zich van links
   naar rechts tekent, net als de kleurlijn onder de titel en de
   regels in de balk. Links is dat een streep; rechts doet de zwiep
   het zelf, want daar ligt het gouden teken al en een tweede erbij
   zou er twee maken. De zwiep gebruikt een animatie in plaats van
   een overgang, zodat hij bij elke hover opnieuw getekend wordt en
   in rust exact blijft staan waar hij stond.                     */
.mega-voet a:not(.zwiep)::after{content:"";position:absolute;left:0;right:0;bottom:-3px;
  height:2px;border-radius:2px;background:var(--goud);
  transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease)}
.mega-voet a:not(.zwiep):hover::after{transform:scaleX(1)}
.mega-voet .zwiep::after{transform-origin:left}
.mega-voet .zwiep:hover::after{animation:zwiep-tekenen .5s var(--ease-uit)}
@keyframes zwiep-tekenen{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Hier sta je, in het megamenu: het stielblokje staat groot,
   net als wanneer je de kolom aanraakt, en de pagina zelf staat
   in het merkblauw. Het paneel is dicht tot je het opent, dus
   een zwaardere letter verschuift hier niets.                */
.mega-groep > a[aria-current="page"],.mega-groep > a[data-hier]{color:var(--indigo-700)}
.mega-groep > a[aria-current="page"] i,.mega-groep > a[data-hier] i{transform:scale(1.35)}
.mega-groep ul a[aria-current="page"]{color:var(--indigo);font-weight:600}
.mega-voet a:not(.zwiep)[aria-current="page"]::after{transform:scaleX(1)}
/* De gouden zwiep uit het logo, dezelfde die onder de
   realisatiekaarten op de home staat, sluit de verwijzing naar
   het volledige dienstenoverzicht af. Rechts uitgelijnd, net als
   daar (.zwiep-rechts).

   De tekst valt in de boog, zoals het B-teken in het logo: de
   vlakke kant schuift onder de regel en de staart komt ernaast
   omhoog. Dat kan alleen als de staart naast de laatste letter
   staat, vandaar de verschuiving naar rechts.

   De breedte staat in pixels en niet in procent. Bij procenten
   groeit de vorm mee met de lengte van de regel, wordt hij door
   zijn vaste verhouding hoger, en snijdt de staart alsnog door
   de tekst.                                                    */
.mega-voet .zwiep,.pm-alles.zwiep{display:inline-block;
  padding-bottom:13px;--zwiep-breed:76px;--zwiep-uit:0px}
.mega-voet .zwiep::after,.pm-alles.zwiep::after{right:-14px}
.pm-alles.zwiep{padding-bottom:14px;--zwiep-breed:88px}
.pm-alles.zwiep::after{right:-20px}
/* Onder de 1400 worden zes kolommen te smal voor de langste
   titels; dan gaan ze in drieën, twee rijen diep.            */
@media(max-width:1400px){
  .mega-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
}

@media(max-width:1080px){
  /* Het hoofdmenu duwde met margin-right:auto de rechterkant naar
     de rand. Zodra het verdwijnt, valt die duw weg en schoof alles
     naar links met een groot leeg vlak rechts. De verdeling hoort
     bij de balk zelf, niet bij een onderdeel dat er soms is.   */
  .balk-in{justify-content:space-between}
  .balk .menu{display:none}
  .mega{display:none}
  .menu-knop{display:grid}
  /* Het telefoonnummer stond hier als een kaal icoontje van 16
     pixels naast de knop: te klein om te raken en niet als knop
     te herkennen. Op elk scherm zonder hoofdmenu is het nu een
     gouden pil van 46 pixels hoog, de kleur die op deze site
     altijd "doe dit" betekent.                                */
  .balk .tel{height:46px;padding:0 18px;gap:8px;border-radius:var(--pil);
    background:var(--goud);color:var(--indigo-900);font-size:14.5px}
  .balk .tel:hover{background:var(--goud-700);color:var(--indigo-900)}
  .balk .tel svg{color:var(--indigo-900);width:18px;height:18px}
  /* Bellen en contact staan naast elkaar en horen dus even hoog
     te zijn; anders lijkt de ene knop in de andere te zakken. */
  .balk .nav-knop{height:46px;padding:0 22px}
}
/* Vanaf hier past het volledige nummer niet meer naast de knop */
@media(max-width:660px){
  .balk .tel .tel-nr{display:none}
  .balk .tel .tel-kort{display:inline}
}
/* En hieronder passen bellen én de contactknop niet meer samen.
   Bellen wint: het is op een telefoon de kortste weg naar een
   antwoord. Contact staat nog altijd in het menu en onderaan in
   het paneel als knop.                                        */
@media(max-width:500px){.balk .nav-knop{display:none}}

/* ══ MOBIEL PANEEL ═══════════════════════════════════════════
   Het menu is geen scherm meer dat over de site valt, maar een
   blad dat onder de balk vandaan naar beneden uitrolt, in dezelfde
   vorm als het megamenu op een breed scherm: even breed als de
   balk, met de diagonale hoeken van de site.

   De rol zit in clip-path, met negatieve waarden opzij en
   onderaan: die laten de slagschaduw staan (clip-path snijdt ook
   schaduw weg) terwijl de onderrand recht meeschuift, zoals bij
   een rolgordijn.

   --balk-hoog is de hoogte van de balk. Daar begint het blad.  */
:root{--balk-hoog:70px}
@media(max-width:720px){:root{--balk-hoog:64px}}

.paneel-waas{position:fixed;inset:0;z-index:55;background:rgba(12,13,38,.42);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.paneel-waas.open{opacity:1;visibility:visible}

.paneel{position:fixed;z-index:60;left:50%;
  translate:calc(-50% - var(--scrollbalk,0px) / 2) 0;
  top:calc(var(--balk-top) + var(--balk-hoog) + 10px);
  width:min(var(--max),calc(100% - 2 * var(--rand)));
  max-height:calc(100vh - var(--balk-top) - var(--balk-hoog) - 26px);
  max-height:calc(100dvh - var(--balk-top) - var(--balk-hoog) - 26px);
  display:flex;flex-direction:column;
  background:var(--papier);border:1px solid var(--lijn);
  border-radius:var(--hoek) 0 var(--hoek) 0;
  box-shadow:0 34px 80px -34px rgba(20,21,60,.5);
  clip-path:inset(0 -90px 100% -90px);visibility:hidden;
  transition:clip-path .58s var(--ease),visibility .58s}
.paneel.open{clip-path:inset(0 -90px -90px -90px);visibility:visible}

/* De schuifbalk stond in de rechterrand van het blad en liep
   dwars door de ronde rechteronderhoek: de curve was eruit. Hij
   is nu verborgen, niet uitgezet. Scrollen blijft volledig
   werken, met de vinger, het muiswiel, de pijltjes en Page Down;
   er is alleen geen balk meer te zien. overflow:hidden op het
   blad zelf houdt de inhoud binnen de afgeronde hoeken.       */
.paneel{overflow:hidden}
.paneel-rol{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;display:flex;flex-direction:column;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:clamp(16px,2.4vh,26px) clamp(20px,5vw,34px) clamp(20px,3vh,30px)}
.paneel-rol::-webkit-scrollbar{width:0;height:0}

/* de regels komen na elkaar binnen, van boven naar beneden */
.paneel-menu > *,.paneel-kaart{opacity:0;transform:translateY(16px);
  transition:opacity .46s var(--ease-uit),transform .46s var(--ease-uit)}
.paneel.open .paneel-menu > *,.paneel.open .paneel-kaart{opacity:1;transform:none}
.paneel.open .paneel-menu > *:nth-child(1){transition-delay:.12s}
.paneel.open .paneel-menu > *:nth-child(2){transition-delay:.16s}
.paneel.open .paneel-menu > *:nth-child(3){transition-delay:.20s}
.paneel.open .paneel-menu > *:nth-child(4){transition-delay:.24s}
.paneel.open .paneel-menu > *:nth-child(5){transition-delay:.28s}
.paneel.open .paneel-menu > *:nth-child(6){transition-delay:.32s}
.paneel.open .paneel-menu > *:nth-child(7){transition-delay:.36s}
.paneel.open .paneel-menu > *:nth-child(8){transition-delay:.40s}
.paneel.open .paneel-kaart{transition-delay:.44s}

.paneel-menu{margin-bottom:clamp(22px,3.5vh,34px)}
/* De regel staat in het merkblauw en schuift bij aanraking op,
   met de gouden streep die van links naar rechts meegroeit:
   dezelfde beweging als in de balk en als de kleurlijn.       */
.pm-rij{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:14px;width:100%;padding:14px 0;border-bottom:1px solid var(--lijn);text-align:left;
  font-family:var(--disp);font-weight:600;letter-spacing:-.035em;color:var(--indigo);
  font-size:clamp(1.4rem,5.6vw,1.9rem);line-height:1.15;
  transition:color .3s var(--ease)}
.pm-rij > span:first-child,.pm-rij > .pm-etiket{transition:transform .35s var(--ease)}
.pm-rij::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;
  background:var(--goud);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease)}
.pm-rij:hover,.pm-rij:focus-visible,.pm-rij[aria-expanded="true"]{color:var(--indigo)}
.pm-rij:hover::after,.pm-rij:focus-visible::after,.pm-rij[aria-expanded="true"]::after{transform:scaleX(1)}
.pm-rij:hover .pm-etiket,.pm-rij:focus-visible .pm-etiket{transform:translateX(8px)}
.pm-pijl{flex:none;color:var(--indigo);transition:transform .35s var(--ease)}
[aria-expanded="true"] > .pm-pijl{transform:rotate(180deg)}

/* De lade groeit van 0fr naar 1fr. Dat werkt ook bij een lade in
   een lade: de buitenste rekent zijn hoogte gewoon opnieuw uit
   zodra er binnenin iets opengaat.                            */
.pm-lade{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease)}
/* De omslag draagt zelf geen marge of binnenmarge. Zet je die er
   wel op, dan houdt een dichtgeklapte lade toch die hoogte over
   en staat er een gat onder elke gesloten regel.               */
.pm-lade > .pm-lade-in{overflow:hidden;min-height:0;padding:0;margin:0;
  visibility:hidden;transition:visibility .45s}
.pm-lade.open{grid-template-rows:1fr}
.pm-lade.open > .pm-lade-in{visibility:visible}

.pm-stielen{padding:4px 0 14px}
/* De stielregel was één knop die alleen uitklapte; de stielpagina
   zelf stond als "Overzicht bouwwerken" ergens onderin de lijst.
   De regel is nu een link naar die pagina en de pijl ernaast is de
   knop die uitklapt. Twee dingen op één regel, elk met een eigen
   doel en een eigen naam voor een schermlezer.                 */
.pm-stiel-rij{display:flex;align-items:center;gap:6px}
.pm-stiel-link{display:flex;align-items:center;gap:11px;flex:1 1 auto;padding:11px 0;
  font-family:var(--disp);font-weight:600;font-size:1.05rem;
  letter-spacing:-.02em;color:var(--indigo);transition:color .25s var(--ease)}
.pm-stiel-link:hover{color:var(--indigo-700)}
/* Hetzelfde teken als elk beeld en elke kaart op de site, alleen
   dan klein: linksboven en rechtsonder rond, de twee andere
   hoeken recht.                                               */
.pm-stiel-link i{width:11px;height:11px;border-radius:4px 0 4px 0;
  background:var(--kleur);flex:none;transition:transform .35s var(--ease)}
.pm-stiel-link:hover i{transform:scale(1.35)}
.pm-stiel-rij:has(.pm-stiel-knop[aria-expanded="true"]) .pm-stiel-link i{transform:scale(1.35)}
.pm-stiel-link span{transition:transform .35s var(--ease)}
.pm-stiel-link:hover span{transform:translateX(5px)}
/* 44 pixels, want dit is op een telefoon het enige wat je moet
   raken om de lijst open te krijgen. De negatieve marge houdt de
   pijl toch op één lijn met die van Diensten erboven.          */
.pm-stiel-knop{flex:none;display:grid;place-items:center;width:44px;height:44px;
  margin-right:-11px;color:var(--indigo);transition:color .25s var(--ease)}
.pm-sub{padding:2px 0 12px 21px;display:flex;flex-direction:column;gap:1px}
.pm-sub a{display:block;padding:8px 0;font-size:15px;color:var(--tekst-kleur);
  transition:color .25s var(--ease),transform .25s var(--ease)}
.pm-sub a:hover{color:var(--indigo);transform:translateX(6px)}
.pm-alles{display:inline-block;padding:10px 0 4px;font-size:15px;font-weight:600;
  color:var(--indigo);transition:transform .25s var(--ease)}
.pm-alles:hover{transform:translateX(6px)}

/* Totaalrenovatie in het paneel. Op een breed scherm staat die link al in
   de voet van het megamenu; op een telefoon stond hij nergens, terwijl het
   de pagina is waar iemand met een hele verbouwing terechtkomt. Subtiel: een
   regel boven het overzicht, kleiner en in het grijs, want het is geen
   zevende stiel maar de weg voor wie ze allemaal nodig heeft.          */
.pm-totaal{display:block;padding:10px 0 2px;font-size:13.5px;font-weight:600;
  color:var(--grijs-600);transition:color .25s var(--ease)}
.pm-totaal:hover{color:var(--indigo)}

/* Hier sta je, in het paneel: dezelfde gouden streep onder de
   regel als bij aanraking, hetzelfde grote stielblokje als in
   het megamenu.                                              */
.pm-rij[aria-current="page"]::after,.pm-rij[data-hier]::after{transform:scaleX(1)}
.pm-stiel-link[aria-current="page"],.pm-stiel-link[data-hier]{color:var(--indigo-700)}
.pm-stiel-link[aria-current="page"] i,.pm-stiel-link[data-hier] i{transform:scale(1.35)}
.pm-sub a[aria-current="page"]{color:var(--indigo);font-weight:600}

/* ── De contactkaart onderaan het paneel ───────────────────
   Het nummer en het mailadres stonden hier kaal onder de laatste
   scheidingslijn. Nu staan ze in het merkblauw, in dezelfde
   diagonale vorm als elk beeld op de site, met het logo erboven. */
.paneel-kaart{margin-top:auto;background:var(--indigo);color:#fff;
  border-radius:var(--hoek) 0 var(--hoek) 0;padding:clamp(22px,4vw,30px);
  display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.paneel-kaart .pk-merk{height:46px;width:auto}
.paneel-kaart .kleurlijn{height:5px;width:118px}
.pk-lijst{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.pk-lijst a{display:inline-flex;align-items:center;gap:11px;padding:7px 0;
  font-size:16px;font-weight:600;color:#fff;
  transition:color .25s var(--ease),transform .25s var(--ease)}
.pk-lijst a:hover{color:var(--goud);transform:translateX(5px)}
.pk-lijst svg{flex:none;color:var(--goud)}
.pk-adres{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.72);font-style:normal}
.pk-knop{align-self:flex-start;margin-top:4px;background:var(--goud);color:var(--indigo-900);
  border-radius:var(--pil)}
.pk-knop:hover{background:var(--goud-700);color:var(--indigo-900)}

/* Vanaf een tablet is het blad zo breed dat de regels links
   blijven staan met een halve pagina leegte ernaast. Daar gaat
   de contactkaart naast in plaats van eronder: even breed blad,
   maar gevuld.                                                 */
@media(min-width:700px){
  .paneel-rol{display:grid;grid-template-columns:minmax(0,1fr) minmax(272px,330px);
    gap:clamp(24px,3vw,46px);align-items:start}
  .paneel-menu{margin-bottom:0}
  .paneel-kaart{margin-top:0}
}

/* Op een laag scherm passen de regels alleen in een kleinere
   maat. Ze blijven ruim boven de 44 pixels die een vinger nodig
   heeft.                                                       */
@media(max-height:900px){
  .pm-rij{font-size:clamp(1.2rem,5vw,1.55rem);padding:11px 0}
  .paneel-menu{margin-bottom:clamp(16px,2.5vh,26px)}
  .paneel-kaart{padding:20px;gap:11px}
  .paneel-kaart .pk-merk{height:42px}
}
/* Wie beweging heeft uitgezet, hoort niet op een uitgestelde
   regel te wachten die er nooit aan komt.                     */
@media(prefers-reduced-motion:reduce){
  .paneel,.paneel *{transition-delay:0s!important}
  .paneel{clip-path:none}
}

/* ══ HERO — tekst links in het merkblauw, beeld rechts ═════
   Het linkervlak is indigo en draagt de kop in wit, met de
   kleurlijn eronder. Het beeld loopt rechts tot de rand en tot
   onderaan. Op elk scherm, ook op een telefoon, vult de hero het
   volledige beeldscherm: svh en niet vh, want op een telefoon
   telt vh de adresbalk mee en valt de onderrand weg.          */
.hero{position:relative;display:grid;
  grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  min-height:100svh}

/* De titel staat er meteen. Alleen het streepje tekent zich,
   en wat eronder staat komt daarna op.                         */
h1{font-size:clamp(2.6rem,5vw,4.9rem);line-height:.98;max-width:13ch}
h1 .naam{display:flex;align-items:center;gap:12px;
  font-family:var(--tekst);font-size:clamp(10.5px,.84vw,13.5px);
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo);
  line-height:1.5;margin-bottom:clamp(18px,2.4vh,28px);max-width:none}
h1 .naam .merkje{width:22px;height:auto;flex:none}
h1 .regel{display:block}
h1 .onderlijn{display:flex;height:12px;width:min(340px,72%);margin-top:.26em;border-radius:0}

/* Het linkervlak in de huiskleur, alles erop in wit. Ook het
   merkteken is de witte versie, niet de indigo.               */
.hero-tekst{position:relative;background:var(--indigo);display:flex;flex-direction:column;
  justify-content:center;
  padding:clamp(120px,15vh,170px) clamp(34px,4.5vw,72px) clamp(48px,7vh,86px) var(--kant)}
/* De kop draagt de hero, dus hij mag zwaar staan: grotere maat, het
   zwaarste snijdingsgewicht dat we laden, en de regels dicht op elkaar
   zodat het één blok wordt.                                          */
.hero-tekst h1{color:#fff;max-width:12ch;
  font-size:clamp(2.7rem,5.6vw,5.6rem);line-height:.9;
  letter-spacing:-.05em;font-weight:700}
.hero-tekst h1 .naam{font-size:clamp(12px,1.05vw,15.5px);font-weight:600;
  margin-bottom:clamp(14px,1.8vh,24px)}
.hero-tekst h1 .onderlijn{height:clamp(12px,1.5vw,20px);width:min(420px,80%);
  margin-top:clamp(20px,2.6vh,34px)}
.hero-tekst h1 .naam,
.hero-tekst h1 .regel{color:#fff}

/* Het beeld loopt door tot de rechterrand en tot onderaan. */
.hero-beeld{position:relative;overflow:hidden}
.hero-beeld .doek{position:absolute;inset:0;overflow:hidden;
  border-radius:0}
.hero-beeld img{width:100%;height:100%;object-fit:cover;object-position:41% 58%}

/* ══ DE DAAD IN DE HERO ═══════════════════════════════════
   Klein en rustig: één knop, en eronder een krul met een korte
   zin. Zo blijft de hero één scherm hoog en blijft het beeld de
   hoofdrol houden.

   Het komt op terwijl de kleurlijn onder de kop zichzelf nog
   tekent: die is klaar op --kl-na (brand.css), hier starten we
   .6s daarvoor. Eerst de belofte, dan pas de vraag, kort op
   elkaar. Wordt de lijn sneller, dan schuift dit mee.          */
.hero-daad{margin-top:clamp(26px,3.4vh,42px);
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  opacity:0;animation:daadop .55s var(--ease) calc(var(--kl-na) - .6s) both}
@keyframes daadop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero-knop{background:var(--goud);color:var(--indigo-900)}
.hero-knop:hover{background:var(--goud-700)}
/* De zin onder de knop vertelt wat er achter die knop zit. Geen
   link meer: de knop erboven is de link, en twee klikdoelen naast
   elkaar die hetzelfde doen is er één te veel.                  */
.hero-wenk{display:inline-flex;align-items:center;padding-left:10px;
  font-size:14px;line-height:1.4;color:rgba(255,255,255,.72);max-width:36ch}
/* De punt van de pijl ligt op 22px in de tekening. Met deze marge
   valt hij op het midden van de EERSTE tekstregel, ook als de zin
   over twee regels loopt.                                       */
.hero-wenk .krul{flex:none;color:var(--goud);align-self:flex-start;margin-top:-12px}

/* ── De krul tekent zichzelf ────────────────────────────────
   Het pijltje verschijnt niet, het wordt gezet: eerst de boog,
   dan de punt erop. pathLength="1" staat in de SVG en zet de
   lengte van elk pad op precies 1, dus de streepjesmaat hoeft de
   echte padlengte niet te kennen en beide paden tekenen even
   vloeiend, hoe verschillend lang ze in werkelijkheid ook zijn.

   De zin komt pas daarna op. Die volgorde is de bedoeling: eerst
   wijst de pijl, dan staat er wat hij aanwijst. De tijdlijn loopt
   dicht op de kleurlijn onder de kop: die tekent van .3s tot 1.4s,
   de knop staat er op 1.35s, de krul op 1.6s, de zin op 1.9s. De
   volgorde blijft, alleen de gaten ertussen zijn eruit.

   Dit zijn gewone CSS-animaties met fill-mode both. Ze lopen af
   zonder dat er JavaScript aan te pas komt, dus de garantie dat
   er nooit inhoud onzichtbaar blijft hangen blijft overeind.   */
.hero-wenk .krul path{stroke-dasharray:1;stroke-dashoffset:1}
.hero-wenk .krul-boog{animation:krul-trek .42s var(--ease-uit) calc(var(--kl-na) - .35s) both}
.hero-wenk .krul-punt{animation:krul-trek .2s var(--ease-uit) var(--kl-na) both}
@keyframes krul-trek{to{stroke-dashoffset:0}}
.hero-wenk .wenk-tekst{animation:wenk-op .4s var(--ease) calc(var(--kl-na) + .1s) both}
@keyframes wenk-op{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .hero-daad{animation:none;opacity:1}
  .hero-wenk .krul path{animation:none;stroke-dashoffset:0}
  .hero-wenk .wenk-tekst{animation:none;opacity:1;transform:none}
}

@media(max-width:1000px){
  /* Gestapeld, en samen vullen ze het scherm: het tekstvlak neemt
     wat het nodig heeft, het beeld krijgt de rest.             */
  .hero{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .hero-tekst{padding:clamp(104px,14vh,130px) var(--kant) clamp(34px,5vh,52px)}
  .hero-wenk{font-size:13px;max-width:none}
  /* De kop schaalde met vw en die is op een telefoon nu net klein,
     dus viel hij terug op de ondergrens van de clamp en bleef hij
     even groot als op een kleine laptop. Op een telefoon is de kop
     het enige dat er staat, dus mag hij de breedte pakken.      */
  .hero-tekst h1{max-width:none;font-size:clamp(2.9rem,13vw,4.6rem)}
  /* En de kleurlijn eronder loopt mee tot de rand van de tekst:
     de zes stielen als één streep, niet als een streepje.      */
  .hero-tekst h1 .onderlijn{width:100%;height:clamp(13px,3.4vw,20px)}
  .hero-beeld{min-height:240px}
}


/* ══ DE ZES STIELEN ════════════════════════════════════════
   Zes schermen scrollen. De inhoud kleeft; de stiel volgt je
   scrollpositie, of je klikt er een aan.                      */
/* De hoogte van deze sectie staat in home.css, samen met de rest
   van de stielensectie. */
.bouwt{position:relative}
.bouwt-kleeft{position:sticky;top:0;
  height:100svh;display:flex;
  align-items:center;overflow:hidden}
.bouwt-in{width:calc(100% - 2 * var(--kant));margin-inline:auto;padding-inline:0;
  display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  gap:clamp(30px,4vw,72px);align-items:center}

.bouwt-links .mini{color:var(--indigo);display:block;margin-bottom:clamp(20px,2.6vh,32px)}
.stappen{display:flex;flex-direction:column;gap:clamp(4px,.6vh,9px)}
.stappen li{--nr-kolom:clamp(11px,1.15vw,16px);--nr-gat:clamp(14px,1.6vw,22px)}
/* de stielkleur staat op de li, zodat zowel de knop als de link hem erft */
.stap{display:grid;grid-template-columns:var(--nr-kolom) minmax(0,1fr);gap:var(--nr-gat);
  align-items:start;width:100%;text-align:left;padding:6px 0;cursor:pointer}
/* Het teken van de stiel in plaats van het nummer: hetzelfde vierkantje
   met de merkhoek als in het megamenu en het mobiele paneel, linksboven
   en rechtsonder rond. Het staat op currentColor, dus de regels verderop
   die de actieve stiel inkleuren sturen dit teken mee aan zonder dat er
   één selector bij hoeft. De hoogte van de kolom volgt de titel ernaast,
   zodat het teken op de eerste regel gecentreerd blijft hoe groot die
   titel ook staat.                                                    */
.stap .nr{display:flex;align-items:center;
  font-size:clamp(1.5rem,3.3vw,2.9rem);line-height:1.08;height:1.08em;
  color:#DEE0E8;transition:color .4s var(--ease)}
.stap .nr i{width:clamp(11px,1.15vw,16px);height:clamp(11px,1.15vw,16px);
  flex:none;border-radius:4px 0 4px 0;background:currentColor;
  transition:transform .35s var(--ease)}
.stap:hover .nr i{transform:scale(1.3)}
.stap .wat b{display:block;font-family:var(--disp);font-weight:600;color:#D3D5DF;
  font-size:clamp(1.5rem,3.3vw,2.9rem);letter-spacing:-.04em;line-height:1.08;
  transition:color .45s var(--ease)}
.stap:hover .wat b{color:#A9ABBA}
.stap:hover .nr{color:#BEC1CC}
.stap .wat>span{display:block;font-size:15px;line-height:1.55;color:var(--grijs-600);
  max-width:40ch;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .6s var(--ease),opacity .45s var(--ease),margin-top .6s var(--ease)}

/* de stiel waar je bent, in haar eigen kleur */
.bouwt[data-fase="0"] .stappen li:nth-child(1) .stap b,
.bouwt[data-fase="1"] .stappen li:nth-child(2) .stap b,
.bouwt[data-fase="2"] .stappen li:nth-child(3) .stap b,
.bouwt[data-fase="3"] .stappen li:nth-child(4) .stap b,
.bouwt[data-fase="4"] .stappen li:nth-child(5) .stap b,
.bouwt[data-fase="5"] .stappen li:nth-child(6) .stap b,
.bouwt[data-fase="0"] .stappen li:nth-child(1) .nr,
.bouwt[data-fase="1"] .stappen li:nth-child(2) .nr,
.bouwt[data-fase="2"] .stappen li:nth-child(3) .nr,
.bouwt[data-fase="3"] .stappen li:nth-child(4) .nr,
.bouwt[data-fase="4"] .stappen li:nth-child(5) .nr,
.bouwt[data-fase="5"] .stappen li:nth-child(6) .nr{color:var(--kleur)}
.bouwt[data-fase="0"] .stappen li:nth-child(1) .wat>span,
.bouwt[data-fase="1"] .stappen li:nth-child(2) .wat>span,
.bouwt[data-fase="2"] .stappen li:nth-child(3) .wat>span,
.bouwt[data-fase="3"] .stappen li:nth-child(4) .wat>span,
.bouwt[data-fase="4"] .stappen li:nth-child(5) .wat>span,
.bouwt[data-fase="5"] .stappen li:nth-child(6) .wat>span{max-height:7em;opacity:1;margin-top:8px}

/* de link naar de expertisepagina, alleen bij de open stiel */
/* De stiellink is een omrande knop, net als elders op de site, zodat
   hij als knop leest en niet als losse tekst. Rand, label en pijl
   dragen alle drie de kleur van de stiel waar de knop bij hoort, dus
   de knop van Bouwwerken staat helemaal in #009FE3, die van
   Dakwerken in #E6007E, enzovoort. Zo hoort de knop zichtbaar bij
   één stiel in plaats van bij de site in het algemeen.

   LET OP: vier van de zes stielkleuren halen op wit geen 4.5:1
   (bouw 2.97, timmer 3.01, grond 2.35, vloer 3.50). Dit is een
   bewuste keuze van de opdrachtgever. Wil je hem terugdraaien of
   verzachten: zet color terug op var(--indigo), of maak per stiel
   een donkerder tekstvariant naast de merkkleur.               */
/* Dicht is echt dicht. max-height:0 alleen volstaat niet: met
   box-sizing:border-box kan de hoogte niet onder de binnenmarge en
   de rand zakken, dus elke gesloten stiel hield een onzichtbare
   knop van 20 pixels over. Vijf gesloten stielen samen was dat 100
   pixels lucht in een lijst die op een telefoon al niet paste.
   Vandaar dat de binnenmarge en de rand mee dichtklappen.       */
/* Blok en geen inline-flex: een inline element laat in zijn ouder
   altijd een regelvak achter met de regelhoogte van die ouder, ook
   als het zelf nul hoog is. Dat waren nog eens 26 pixels per
   gesloten stiel bovenop de knop hierboven.                     */
.meer{display:flex;width:fit-content;align-items:center;gap:9px;
  margin-left:calc(var(--nr-kolom) + var(--nr-gat));
  font-size:13.5px;font-weight:600;color:var(--kleur,var(--indigo));
  padding:0 20px;border-radius:var(--pil);background:#fff;
  border:0 solid var(--kleur);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .6s var(--ease),opacity .45s var(--ease),
  margin-top .6s var(--ease),padding-block .6s var(--ease),
  border-width .6s var(--ease),border-color .25s var(--ease),
  background .25s var(--ease),transform .25s var(--ease)}
.meer:hover{background:color-mix(in srgb,var(--kleur) 10%,#fff);transform:translateY(-2px)}
.meer svg{color:var(--kleur,var(--indigo));transition:transform .35s var(--ease)}
.meer:hover svg{transform:translateX(2px)}
.bouwt[data-fase="0"] .stappen li:nth-child(1) .meer,
.bouwt[data-fase="1"] .stappen li:nth-child(2) .meer,
.bouwt[data-fase="2"] .stappen li:nth-child(3) .meer,
.bouwt[data-fase="3"] .stappen li:nth-child(4) .meer,
.bouwt[data-fase="4"] .stappen li:nth-child(5) .meer,
.bouwt[data-fase="5"] .stappen li:nth-child(6) .meer{max-height:4.5em;opacity:1;
  margin-top:14px;padding-block:10px;border-width:1.5px}

/* ══ DE STUURKNOP ════════════════════════════════════════════
   Deze sectie beweegt op scroll in plaats van dat ze meescrolt, en
   dat is niet te raden. Hier stond eerst een wenk in kleine letters
   die na twee stielen verdween, en op een telefoon helemaal niet
   stond. Wie niet doorhad dat hij moest scrollen, of dat de grijze
   namen aanklikbaar zijn, bleef hier steken: de pagina leek stil te
   staan. Nu staat er altijd één knop die zegt wat het volgende is,
   "Volgende stiel: Dakwerken", en bij de laatste stiel "Verder naar
   ons werk", zodat de weg de site in nooit doodloopt. Ernaast de
   telling: er zijn er zes, en dit is de hoeveelste.

   De knop staat in het merkgoud, net als "Bel ons" in de balk: het
   is de ene handeling die hier gevraagd wordt. beweging.js vult de
   naam en de telling en wisselt het opschrift bij de laatste.  */
.stiel-stuur{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;
  margin-top:clamp(22px,3vh,36px)}
/* Dezelfde knop als overal: de letter, het gewicht en de maat van
   .knop, het goud van .hero-knop en de gouden belknop in de balk, en
   de ene schaduw van de site, die van de balk. De pijl staat los in
   de knop, zoals bij elke andere knop.                            */
.volgende{display:inline-flex;align-items:center;gap:11px;
  padding:15px 26px;border:0;border-radius:var(--pil);
  background:var(--goud);color:var(--indigo-900);
  font-size:15px;font-weight:600;letter-spacing:-.005em;
  line-height:1.3;text-align:left;cursor:pointer;
  box-shadow:0 18px 46px -20px rgba(20,21,60,.32);
  transition:background .3s var(--ease),transform .3s var(--ease)}
.volgende:hover{background:var(--goud-700);transform:translateY(-2px)}
.volgende b{font-weight:600}
.volgende b:not(:empty)::before{content:":\00a0"}
.volgende i{flex:none;display:grid;place-items:center;color:var(--indigo-900)}
.volgende i svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.volgende:hover i svg{transform:translateY(2px)}
/* Bij de laatste stiel is er geen knop meer (beweging.js zet hidden;
   de klasse zou anders van display winnen), alleen nog de zin
   "Scrol verder", iets groter dan het regeltje onder de knop. */
.volgende[hidden]{display:none}
.stiel-stuur:has(.volgende[hidden]) .scrol-mee{padding-left:0;font-size:14.5px;
  color:var(--indigo-900)}
.telling{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grijs-600);font-variant-numeric:tabular-nums;white-space:nowrap}
.telling b{color:var(--indigo)}
/* Eén regeltje onder de knop: scrollen werkt óók. De knop blijft de
   hoofdweg; dit is voor wie het toch met de vinger probeert en wil
   weten dat dat mag.                                             */
.scrol-mee{flex-basis:100%;font-size:12.5px;line-height:1.4;color:var(--grijs-600);
  letter-spacing:.01em;padding-left:22px}

/* het beeld wisselt mee */
.bouwt-rechts{position:relative;aspect-ratio:5/4;border-radius:var(--rond-l) 0 var(--rond-l) 0;
  overflow:hidden}
.fase-beeld{position:absolute;inset:0;opacity:0;transform:scale(1.04);
  transition:opacity .7s var(--ease),transform 1.3s var(--ease)}
.fase-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.bouwt[data-fase="0"] .fase-beeld:nth-of-type(1),
.bouwt[data-fase="1"] .fase-beeld:nth-of-type(2),
.bouwt[data-fase="2"] .fase-beeld:nth-of-type(3),
.bouwt[data-fase="3"] .fase-beeld:nth-of-type(4),
.bouwt[data-fase="4"] .fase-beeld:nth-of-type(5),
.bouwt[data-fase="5"] .fase-beeld:nth-of-type(6){opacity:1;transform:none}

/* de balk onderaan het beeld: zes vakjes, één per stiel. Elk
   vakje vult zich in zijn eigen kleur en blijft daarna staan,
   zodat je ziet hoeveel stielen je al gehad hebt.              */
.bouwt-rechts .voort{position:absolute;left:0;right:0;bottom:0;height:7px;z-index:3;
  display:flex}
.bouwt-rechts .voort i{flex:1;position:relative;overflow:hidden;
  background:rgba(255,255,255,.34)}
.bouwt-rechts .voort b{position:absolute;inset:0 auto 0 0;width:0;
  background:var(--kleur)}

@media(max-width:1000px){
  /* de hoogte van deze sectie staat op één plek, in home.css */

  /* De sectie kleeft over de volle schermhoogte, maar de zwevende
     balk bovenaan ligt daaroverheen. Zonder deze ruimte schoof de
     titel van de stiel waar je stond onder de balk.            */
  .bouwt-kleeft{align-items:stretch;
    padding-top:calc(var(--balk-ruimte) + 8px);
    padding-bottom:14px}

  /* Gestapeld: de lijst neemt wat hij nodig heeft, het beeld
     krijgt precies wat er overblijft. Geen vaste beeldverhouding
     meer, want die dwong een hoogte af die op de ene telefoon
     paste en op de andere niet.                                */
  .bouwt-in{grid-template-columns:1fr;grid-template-rows:auto;
    gap:clamp(12px,1.8vh,22px);align-content:center;align-items:center}

  /* Het beeldblok staat hier in de open stiel zelf (beweging.js
     verhuist het mee). Het lijnt uit met de tekst ernaast, niet
     met het nummer ervoor, dus het staat recht onder de knop.  */
  .stappen li > .bouwt-rechts{
    margin-left:calc(var(--nr-kolom) + var(--nr-gat));margin-top:14px;
    /* De breedte staat vast en de hoogte is wat er overblijft. Zonder
       die vaste breedte houdt de browser de verhouding aan door de
       foto SMALLER te maken zodra de hoogtegrens bijt, en dan wordt
       een beeld op een krappe telefoon een postzegel in plaats van
       een band. Met een vaste breedte snijdt object-fit de hoogte
       weg en blijft de foto over de volle kolom staan. De marge
       links gaat van die breedte af, anders steekt de foto er aan
       de rechterkant even ver buiten.                          */
    width:calc(100% - var(--nr-kolom) - var(--nr-gat));
    aspect-ratio:4/3;min-height:0;
    border-radius:var(--rond-m) 0 var(--rond-m) 0}
  /* Blijft het beeldblok toch naast de lijst staan (heel laag
     scherm, of wie geen beweging wil), dan houdt het zijn eigen
     rij en een bodem waaronder het niets meer voorstelt.       */
  .bouwt-in > .bouwt-rechts{aspect-ratio:16/10;min-height:110px}

  .bouwt-links .mini{margin-bottom:clamp(12px,1.8vh,22px)}
  .stap{padding:4px 0}

  /* De stielnaam is de kop van deze sectie en moet ook als kop
     lezen, dus niet een paar pixels groter dan de zin eronder.

     De maat hangt aan twee dingen tegelijk. Aan de breedte, want
     daar moet de naam op één regel in passen. En aan de hoogte,
     want zes namen plus de open stiel plus het beeld moeten samen
     binnen één scherm blijven; loopt het eroverheen, dan snijdt
     het kleefvak de onderste stiel af.

     De hoogte staat in svh en niet in vh. svh is de hoogte mét de
     balken van de browser in beeld, dus wat de bezoeker echt
     overhoudt op het moment dat hij begint te scrollen. Op een
     lage telefoon zakt de naam daardoor vanzelf mee in plaats van
     de lijst uit beeld te duwen.                               */
  .stappen li{--nr-kolom:13px;--nr-gat:15px}
  .stap .nr i{width:13px;height:13px}
  .stap .wat b{font-size:clamp(1.15rem,min(6.8vw,3.4svh),2.2rem)}
  .stap .nr{font-size:clamp(1.15rem,min(6.8vw,3.4svh),2.2rem)}
  .stap .wat>span{font-size:14px}
  .meer{padding-inline:17px;font-size:13px}

  /* Op een telefoon staan drie stielen in beeld: de open stiel en
     de twee die erna komen (bij de laatste: de twee ervoor). Alle
     zes was te druk op een klein scherm, maar met alleen de open
     stiel zag je niet dat er nog iets volgde. Twee grijze namen
     eronder zeggen precies genoeg: hier komt meer, scrol door. De
     weg loopt via de stuurknop en de telling, en de kleurbalk onder
     het beeld toont waar je staat. beweging.js zet .mee op de twee
     buren en data-alleen-open alleen zolang de sectie echt kleeft;
     zonder JavaScript, bij "geen beweging" of op een te laag scherm
     staan alle zes gewoon open.                                  */
  .bouwt[data-alleen-open] .stappen li:not(.open):not(.mee){display:none}

  /* De stuurknop is op een telefoon één volle balk, de tekst links
     en de pijl rechts, zodat de duim hem nooit mist. De telling staat
     hier niet naast de knop (met een lange stielnaam viel ze eronder)
     maar rechts naast het kopje "Onze stielen", op dezelfde regel.  */
  .bouwt-links{position:relative}
  .stiel-stuur{margin-top:12px;gap:6px 14px}
  .scrol-mee{padding-left:18px;font-size:12px}
  .volgende{width:100%;justify-content:space-between;padding:13px 18px;font-size:14.5px}
  .telling{position:absolute;top:1px;right:0}

  /* Het beeld is het enige blok dat mag krimpen, dus daar zit de
     rek. Twee grenzen: een vast deel van de schermhoogte, en wat
     er na de lijst nog overblijft. Die tweede is de scherpste op
     een lage telefoon, waar zes namen plus de open stiel het
     grootste deel van het scherm al opeten. Zonder deze grens
     stond er een foto van een halve schermhoogte boven een lijst
     die daardoor niet meer paste.                              */
  .stappen li > .bouwt-rechts{max-height:min(34svh,calc(100svh - 600px))}
  .bouwt[data-alleen-open] .stappen li > .bouwt-rechts{max-height:min(40svh,calc(100svh - 505px))}

  /* Blijft er zo weinig over dat de foto een strookje wordt, dan
     gaat ze eruit: liever de zes stielen volledig dan een reepje
     beeld met een halve stiel eronder.

     Dat oordeel staat in beweging.js en niet in een media query op
     hoogte. Zo'n query meet op een telefoon namelijk de hoogte
     zónder de balken van de browser, en dat scheelt op een kleine
     iPhone ruim honderd pixels: de query zei ruim genoeg terwijl
     de onderste stiel er al buiten viel. beweging.js meet de echte
     hoogte van het kleefvak (100svh) en zet data-krap.         */
  .bouwt[data-krap="ja"] .bouwt-rechts{display:none}
}

/* Een lage telefoon houdt minder over dan een hoge: van de 667
   pixels van een kleine iPhone gaat er 161 naar de twee balken.
   De lijst is de inhoud en blijft dus altijd staan; wat eromheen
   zit, wijkt. Hier is dat de lucht, die geen inhoud draagt. De
   namen en het beeld hangen aan svh en zakken zelf al mee.      */
@media(max-width:1000px) and (max-height:820px){
  .bouwt-links .mini{margin-bottom:10px}
  .stap{padding:2px 0}
}
/* Twee gevallen krijgen dezelfde uitweg. Wie geen beweging wil.
   En een scherm dat te laag is om iets te laten kleven: een
   telefoon in liggende stand houdt na de balk bovenaan zo'n 290
   pixels over, en daar passen zes stielnamen al niet in, laat
   staan met beschrijving en beeld.

   In beide gevallen wordt het een gewone lijst: alle zes de
   stielen staan open, elk met zijn beeld eronder. Niets kleeft,
   niets verdwijnt, je scrolt er gewoon doorheen.               */
@media(prefers-reduced-motion:reduce),(max-height:520px){
  .bouwt{height:auto}
  .bouwt-kleeft{position:static;height:auto;padding-block:clamp(48px,9vh,60px)}
  .bouwt-in{grid-template-rows:none;align-items:start}
  .stap .wat>span{max-height:none;opacity:1;margin-top:8px}
  .meer{max-height:none;opacity:1;margin-top:12px;padding-block:10px;border-width:1.5px}
  .fase-beeld{position:relative;opacity:1;transform:none}
  .bouwt-rechts{aspect-ratio:auto;display:grid;gap:10px;min-height:0}
  /* alles staat open, dus er is niets om naar door te klikken */
  .stiel-stuur{display:none}
}

/* ══ REALISATIES ═══════════════════════════════════════════
   Een horizontale rij kaarten die aan de rechterkant van het
   scherm afloopt, zodat je ziet dat er meer is. Gewone
   scroll-snap, dus vegen op mobiel werkt vanzelf.             */
.realisaties{padding-block:clamp(80px,12vh,150px) clamp(60px,9vh,110px)}

.rea-kop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,60px);
  align-items:end;margin-bottom:clamp(30px,4vh,48px)}
@media(max-width:860px){.rea-kop{grid-template-columns:1fr;align-items:start;gap:22px}}
.rea-kop .mini{color:var(--indigo);display:flex;align-items:center;gap:12px;
  margin-bottom:14px}
.rea-kop .mini .merkje{width:20px;height:auto;flex:none}
.rea-acties{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.rea-acties .knop-leeg{padding:14px 26px;font-size:14.5px}
.rea-link{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;
  color:var(--inkt);padding-bottom:3px;border-bottom:1.5px solid var(--lijn);
  transition:border-color .35s var(--ease),color .3s,gap .35s var(--ease)}
.rea-link:hover{color:var(--indigo);border-color:var(--indigo);gap:13px}

/* de twee pijlen boven de rij */
.rea-nav{display:flex;gap:10px;margin-bottom:clamp(18px,2.4vh,28px)}
.rea-knop{width:52px;height:52px;border-radius:var(--pil);flex:none;
  display:grid;place-items:center;color:var(--inkt);
  border:1px solid var(--lijn);background:#fff;
  transition:background .3s var(--ease),color .3s,border-color .3s,transform .3s var(--ease)}
.rea-knop:hover{background:var(--indigo);border-color:var(--indigo);color:#fff;
  transform:translateY(-2px)}
.rea-knop[disabled]{opacity:.35;pointer-events:none}

/* de rij zelf: loopt links mee met de marge en rechts van het scherm af.
   scroll-padding is nodig, anders knipt het snappen de linkermarge weg. */
.rea-spoor{--spoor-rand:var(--kant);
  display:flex;gap:clamp(18px,2.4vw,36px);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-inline:var(--spoor-rand);scroll-padding-inline:var(--spoor-rand);
  padding-bottom:6px;
  scrollbar-width:none;-ms-overflow-style:none}
.rea-spoor::-webkit-scrollbar{display:none}
.rea-spoor:focus-visible{outline:2px solid var(--indigo);outline-offset:4px}

/* slepen met de muis; tijdens het slepen mag snappen niet tegenwerken */
@media(pointer:fine){.rea-spoor{cursor:grab}}
.rea-spoor.sleept{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;
  user-select:none}
.rea-spoor.sleept img,.rea-spoor.sleept a{pointer-events:none}
.rea-spoor img{-webkit-user-drag:none;user-drag:none}

/* De kaarten rekken al mee tot de hoogte van de langste (dat doet
   een flexrij vanzelf), maar de INHOUD deed dat niet: een titel van
   één regel liet de tekst en het gouden boogje 55 pixels hoger
   eindigen dan een titel van twee. Vandaar de kolom: het beeld
   houdt zijn eigen maat, het tekstblok eronder rekt uit tot de
   onderkant van de kaart. Zo eindigen alle kaarten en alle boogjes
   op dezelfde lijn, hoe lang de titel ook is.                   */
.rea-kaart{flex:0 0 clamp(280px,32vw,470px);scroll-snap-align:start;
  display:flex;flex-direction:column}
.rea-kader{display:block;flex:none}
.rea-vlak{display:block;position:relative;overflow:hidden;
  aspect-ratio:3/2;border-radius:var(--rond-l) 0 var(--rond-l) 0}
/* een kaart uit het portaal zonder foto: het vak blijft staan, in grijs */
.rea-vlak-leeg{background:var(--grijs-100)}
.rea-vlak img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.6s var(--ease)}
.rea-kaart:hover img{transform:scale(1.05)}
.rea-vlak::after{content:"";position:absolute;inset:0;background:rgba(20,21,60,.14);
  opacity:0;transition:opacity .45s var(--ease)}
.rea-kaart:hover .rea-vlak::after{opacity:1}

/* het gouden boogje sluit de tekstcontainer af, onder het pijltje */
.rea-onder{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  flex:1 1 auto;
  margin-top:clamp(18px,2vw,26px);padding-bottom:clamp(14px,1.6vw,22px);
  --zwiep-breed:22%;--zwiep-uit:0px}
.rea-tekst b{display:block;font-family:var(--disp);font-weight:600;color:var(--inkt);
  font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:-.03em;transition:color .3s}
.rea-kaart:hover .rea-tekst b{color:var(--indigo)}
.rea-tekst span{display:block;font-size:14px;line-height:1.5;color:var(--grijs-400);
  margin-top:5px;max-width:34ch}
.rea-pijl{width:44px;height:44px;border-radius:var(--pil);flex:none;display:grid;
  place-items:center;color:var(--indigo);border:1px solid var(--lijn);background:#fff;
  transition:background .35s var(--ease),color .35s,border-color .35s}
.rea-kaart:hover .rea-pijl{background:var(--indigo);border-color:var(--indigo);color:#fff}

@media(max-width:700px){
  .rea-knop{width:46px;height:46px}
  .rea-pijl{width:38px;height:38px}
  .rea-tekst span{font-size:13.5px}
}


/* ══ KLEINE SCHERMEN ═══════════════════════════════════════ */
@media(max-width:720px){
  .balk-in{padding-left:16px}
  .balk .merk img{height:32px}
  .balk .nav-knop{padding:0 18px;height:44px;font-size:14px}
  .nav-knop .lang{display:none}
  .balk .tel{height:44px;padding:0 15px;font-size:14px}
  h1{font-size:clamp(2.5rem,12.5vw,3.4rem)}
  .knop,.knop-leeg{padding:14px 22px;font-size:14.5px}
}

.knop .etiket{display:inline}

/* ══ BEWEGING ═══════════════════════════════════════════════
   Het herobeeld is iets hoger dan zijn kader, zodat er ruimte
   is om te schuiven zonder dat je de randen ziet.             */
/* Dit beeld stond op 110% hoogte om ruimte te laten voor een
   parallax die er niet is: er staat geen data-parallax op, dus er
   bewoog nooit iets. Die extra 10% sneed alleen beeld weg en
   kostte scherpte, want cover moest verder opblazen.          */

/* ══ HET GOOGLE-KEURMERK ═════════════════════════════════════
   Geen kader, geen vlak, geen schaduw. Het is geen sectie en geen
   kaart maar een ondertekening: het hoort onder een tekst te staan
   zoals een handtekening onder een brief, en niet ernaast in een
   eigen doosje. Een kader eromheen maakte er een blok van dat om
   aandacht vroeg die het niet nodig heeft.

   De merkhoek zit hier dus niet op een rand maar in het streepje
   tussen het cijfer en de bron: hetzelfde vierkantje met de hoek
   van het logo dat op de hele site de opsomming draagt.

   Het staat nooit tegen de tekst aan. De lucht erboven en eronder
   staat in de klasse zelf, zodat het overal hetzelfde ademt en
   niemand het per pagina hoeft bij te stellen.              */
.google-score[hidden]{display:none}
.google-score{display:inline-flex;align-items:center;gap:11px;
  width:fit-content;max-width:100%;align-self:start;
  margin-block:clamp(18px,2.2vw,26px)}
.gs-sterren{display:inline-flex;gap:2px}
.gs-ster{width:16px;height:16px;fill:var(--goud)}
.gs-ster.is-leeg{fill:var(--grijs-200,#e7eaf1)}
.gs-cijfer{font-family:var(--disp);font-weight:700;font-size:1rem;line-height:1;
  color:var(--inkt);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* Het merkvierkantje als scheiding: linksboven en rechtsonder rond,
   net als het logo en als elk opsommingsteken op deze site. */
.gs-streep{width:9px;height:9px;flex:none;border-radius:4px 0 4px 0;
  background:var(--indigo);opacity:.4}

/* De bron in de zetting van het minilabel: klein, gespatieerd,
   in kapitalen. Dat is hoe dit merk een bijschrift zet.        */
.gs-bron{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--tekst);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grijs-600);
  white-space:nowrap}
.gs-logo{width:15px;height:15px;flex:none}
.gs-bron a{color:var(--grijs-600);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .25s var(--ease),
  border-color .25s var(--ease)}
.gs-bron a:hover{color:var(--indigo);border-bottom-color:var(--indigo)}

@media(max-width:430px){
  .google-score{gap:9px}
  .gs-ster{width:15px;height:15px}
  .gs-cijfer{font-size:.95rem}
  .gs-bron{font-size:10.5px;letter-spacing:.12em;gap:6px}
  .gs-logo{width:14px;height:14px}
}

/* Op een donkere ondergrond blijven het logo en de sterren zichzelf;
   alleen de tekst en het vierkantje draaien mee.                */
.op-donker .gs-cijfer,.voet-groot .gs-cijfer,
.daadvlak .gs-cijfer{color:#fff}
.op-donker .gs-streep,.voet-groot .gs-streep,
.daadvlak .gs-streep{background:#fff;opacity:.5}
.op-donker .gs-bron,.voet-groot .gs-bron,.daadvlak .gs-bron,
.op-donker .gs-bron a,.voet-groot .gs-bron a,.daadvlak .gs-bron a{color:rgba(255,255,255,.78)}
.op-donker .gs-bron a:hover,.voet-groot .gs-bron a:hover,
.daadvlak .gs-bron a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
.op-donker .gs-ster.is-leeg,.voet-groot .gs-ster.is-leeg,
.daadvlak .gs-ster.is-leeg{fill:rgba(255,255,255,.22)}

/* ══ DE TOESTEMMINGSBANNER ═══════════════════════════════════
   Rechtsonder, klein, en zo stil mogelijk. Dit is geen boodschap
   maar een formaliteit: de bezoeker kwam voor een dak of een
   verbouwing en niet voor een vraag over meten. Hij hoort dus
   niet de helft van het scherm te vragen.

   Op een telefoon gaat hij wel over de volle breedte, want daar
   is rechtsonder te smal om twee knoppen naast elkaar te zetten.

   De twee knoppen blijven even groot en staan naast elkaar.
   Weigeren moet net zo makkelijk zijn als aanvaarden, en dat is
   geen stijlkeuze maar een eis.                                */
.toestemming{
  position:fixed; z-index:120; left:12px; right:12px; bottom:12px;
  background:#fff; border:1px solid var(--lijn);
  border-radius:var(--rond-s) 0 var(--rond-s) 0;
  box-shadow:0 14px 34px -18px rgba(20,21,60,.26);
  opacity:0; transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.toestemming.is-er{opacity:1; transform:none}
.toestemming.is-weg{opacity:0; transform:translateY(8px)}
.toestemming-in{padding:14px 16px; display:flex; flex-direction:column; gap:8px}
.toestemming-kop{margin:0; font-family:var(--disp); font-weight:600;
  font-size:.92rem; letter-spacing:-.01em; color:var(--inkt)}
.toestemming-tekst{margin:0; font-size:12.5px; line-height:1.5;
  color:var(--grijs-600)}
.toestemming-tekst a{color:var(--indigo); text-decoration:underline;
  text-underline-offset:2px}
.toestemming-daden{display:flex; gap:8px; margin-top:2px}
.toestemming-knop{
  flex:1 1 0; min-width:0; padding:8px 12px;
  border:1.5px solid var(--lijn); border-radius:var(--pil);
  background:#fff; color:var(--inkt);
  font:inherit; font-size:12.5px; font-weight:600; line-height:1.25;
  cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease),
    color .25s var(--ease);
}
.toestemming-knop:hover{border-color:var(--indigo); background:#fff;
  color:var(--indigo); transform:none}
.toestemming-knop--ja{background:var(--indigo); border-color:var(--indigo);
  color:#fff}
.toestemming-knop--ja:hover{background:var(--indigo-900);
  border-color:var(--indigo-900); color:#fff}

@media(min-width:700px){
  .toestemming{left:auto; right:20px; bottom:20px; width:310px}
}
@media(prefers-reduced-motion:reduce){
  .toestemming{transition:none; opacity:1; transform:none}
}