/* Asbestverwijdering.be — eigen stylesheet voor de schone herbouw.
   Visueel gelijk aan het oorspronkelijke Divi-thema; waarden gemeten op de
   gerenderde referentie (desktop 1440, mobiel 390). */

:root {
    --geel: #f7e61c;
    --inkt: #030303;
    --grijs: #e6e6e6;
    --wit: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* De body staat op font-weight 300; de browserregel strong{font-weight:bolder}
   levert daardoor maar 400 op en vet is dan niet vet. */
strong, b { font-weight: 700; }

html, body { overflow-x: hidden; }

body {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.2;
    color: var(--inkt);
    background: var(--wit);
}

main { background: var(--grijs); }
.projectenblok { background-color: var(--wit); }
.avbe-sectie { background-color: var(--wit); }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.taalkeuze-mobiel { display: none; }

.omlijning { width: 80%; max-width: 1080px; margin: 0 auto; }

/* Zichtbare toetsenbordfocus, site-breed. Het origineel heeft die nergens; de
   browserstandaard valt weg op de gele en zwarte vlakken van deze site. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--inkt);
    outline-offset: 2px;
}
/* op zwarte vlakken een witte ring */
.vragenblok a:focus-visible, .vragenblok button:focus-visible,
.projectkaart a:focus-visible, .dienstkaart a:focus-visible,
.site-footer .whatsapp:focus-visible { outline-color: var(--wit); }

/* ---------- knoppen (Divi et_pb_button-look) ---------- */
.knop {
    display: inline-block;
    background: var(--geel);
    color: var(--inkt);
    border: 2px solid var(--geel);
    border-radius: 1px;
    font-size: 20px;
    font-weight: 700;
    line-height: 34px;
    text-transform: uppercase;
    padding: 6px 14px;
    position: relative;
    white-space: nowrap;
}
.knop::after { content: "\2794"; margin-left: 10px; font-size: 20px; line-height: 34px; }

/* ---------- kruimelpad (sitebreed) ----------
   Moderne, leesbare herwerking van het origineel (verzoek Lennert): één
   donkere chip in de kaarttaal in plaats van losse halfdoorzichtige
   blokjes per schakel. Zelfde opbouw op de fotokoppen én op de
   projectdetailkop; de schakel-teksten blijven per pagina in de views. */
.kruimelpad { margin-top: 40px; font-size: 14px; font-weight: 600; line-height: 20px; }
.kruimelpad ol {
    list-style: none; margin: 0; padding: 9px 14px;
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    background: rgba(3, 3, 3, .78); border-radius: 8px;
}
.kruimelpad li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 20px; }
.kruimelpad a { color: var(--wit); }
.kruimelpad a:hover {
    color: var(--geel);
    text-decoration: underline; text-decoration-color: var(--geel);
    text-underline-offset: 4px;
}
.kruimelpad .kruimel-huis { width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px; fill: var(--geel); }
/* enkele chevron als scheider; het teken in de markup blijft onzichtbaar
   (font-size 0) en de vorm komt uit het masker, gekleurd via background */
.kruimelpad .kruimel-scheiding {
    display: inline-block; width: 8px; height: 20px;
    font-size: 0; line-height: 20px;
    background-color: rgba(230, 230, 230, .55);
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.8 1.2 6.4 6 1.8 10.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 12px no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.8 1.2 6.4 6 1.8 10.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 12px no-repeat;
}
.kruimelpad .kruimel-naam { color: var(--geel); font-weight: 700; }

/* ---------- header ---------- */
/* Het origineel is een vloeiende Divi-rij: kolommen 7.7% / 73.6% / 7.7% met
   5.5% tussenruimte. Huisje = helft van de linkerkolom (min 30px afstand tot
   NL/FR), logo = (kolom - 25px) x 1.2, menu gecentreerd, lettergrootte
   max(12px, .8vw). De balk groeit mee met het huisje (65px op 1920). */
.site-header {
    background: var(--geel);
    min-height: 58px;
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 50;
}
/* Ondergrens 65.9px: het huisje heeft ratio 535.6/471.43, dus die breedte geeft
   precies de 58px van de balk. Zonder die ondergrens bleef er op schermen
   tussen ~1000 en 1500px een gele strook onder het huisje staan. */
.home-knop { flex: 0 0 auto; display: block; width: max(65.9px, min(3.85vw, calc(7.7vw - 52px))); }
.home-knop img { width: 100%; height: auto; display: block; }
.taalkeuze { margin-left: 30px; font-size: 16px; white-space: nowrap; line-height: 19.2px; align-self: center; }
.taalkeuze span { text-decoration: underline; }
.hoofdmenu { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; }
.hoofdmenu > ul { list-style: none; display: flex; height: 30px; padding-top: 8px; }
/* Divi zet de tussenruimte op het <li> (11px links en rechts) en houdt de
   <a> zo breed als zijn tekst; alleen het item met een submenu krijgt 10px
   extra rechts voor de chevron. */
.hoofdmenu > ul > li { position: relative; padding: 0 11px; }
.hoofdmenu > ul > li > a {
    display: inline-block;
    position: relative;
    font-size: max(12px, .8vw);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 14px;
    padding: 0 0 8px;
    letter-spacing: 0;
}
.hoofdmenu > ul > li.heeft-sub > a { padding-right: 20px; }
/* Het origineel tekent hier een chevron van 10x6 uit zijn icoonfont;
   alleen op het topniveau — de indicatoren ín het paneel en op mobiel
   hebben hun eigen regels hieronder. */
.hoofdmenu > ul > li.heeft-sub > a::after {
    content: "";
    position: absolute; right: 5px; top: 4px;
    width: 10px; height: 6px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Dropdownpaneel zoals het origineel: zwart, 325 breed, rijen van 40px in
   geel, met een zachte fade van 0.2s (paneel blijft in de flow;
   visibility regelt de zichtbaarheid). */
.hoofdmenu ul ul {
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease-in-out, visibility .2s ease-in-out, transform .2s ease-in-out;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--inkt);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    list-style: none;
    min-width: 325px;
    padding: 20px 0;
    z-index: 60;
}
/* Het flyout overlapt het ouderpaneel zoals het origineel (offset 240px
   bij een paneel van 325px — beide zwart, dus onzichtbaar). */
.hoofdmenu ul ul ul { top: 0; left: 240px; }
.hoofdmenu li:hover > ul { visibility: visible; opacity: 1; transform: translateY(0); }
.hoofdmenu ul ul a { display: block; color: var(--geel); font-size: 12px; font-weight: 700; text-transform: uppercase; line-height: 28px; padding: 6px 40px; }
.hoofdmenu ul ul a:hover { opacity: .7; }
/* Items in het paneel met een eigen flyout krijgen een gele chevron
   rechts in de rij (origineel: icoonfont-glyph op right 20). */
.hoofdmenu ul ul li.heeft-sub > a { position: relative; }
.hoofdmenu ul ul li.heeft-sub > a::after {
    content: "";
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    width: 12px; height: 7px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Het logo is een link naar de startpagina; de plaatsing zit op de link zelf,
   anders valt het klikvlak samen met niets (de img staat absoluut). */
.site-logo-link { position: absolute; right: calc(30px - .77vw); top: 50%; transform: translateY(-50%); width: calc(9.24vw - 30px); display: block; }
.site-logo { display: block; width: 100%; height: auto; }
.menu-knop { display: none; }

/* ---------- hero ---------- */
/* Zoals het origineel: de sectie is minstens 60vh hoog en de inhoud staat
   15vh vanaf boven, 20vw links, 35vw breed. Het origineel houdt de sectie
   op exact 60vh en laat de inhoud eronderuit steken; daardoor valt de
   knop op 981–1400 achter de badges. Wij laten de sectie meegroeien met de
   inhoud en houden onderaan een vrije strook zo hoog als de badge-overlap,
   zodat de knop altijd leesbaar boven de badges blijft.
   De badge-rij schuift 40% van (badgehoogte + 7vw) over de onderrand heen —
   precies waar het origineel hem op 1440/1920 zet. */
.hero {
    position: relative;
    min-height: 60vh;
    background: var(--grijs);
    margin-bottom: calc(9.6px - 6.8vw);
}
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
    content: ""; position: absolute; bottom: -85px; left: 50%; transform: translateX(-50%);
    width: 100vw; height: 150px; pointer-events: none; z-index: 10;
    background: url(/wp-content/uploads/2026/05/2pfalline.png) center / 100% auto no-repeat;
}
.hero-inhoud { position: relative; z-index: 5; width: 100%; min-height: 60vh; padding: 15vh 45vw max(40px, calc(6.8vw + 5.4px)) 20vw; }
.hero-inhoud h1 {
    font-size: 48px; line-height: 48px; font-weight: 700;
    color: var(--wit);
    padding-bottom: 10px;
    text-shadow: 0 0 .3em rgba(0, 0, 0, .4);
}
.hero-inhoud .knop { display: block; width: max-content; margin-top: 20px; font-weight: 500; }


/* ---------- badges ---------- */
/* Rij van 50% breed met vijf badges en 30px tussenruimte; de rij schuift over
   de onderrand van de hero heen via de negatieve marge van .hero. */
.badges { position: relative; z-index: 11; }
.badges-rij { width: 50%; margin: 0 auto; display: flex; gap: 30px; }
.badges-rij img { width: calc(10vw - 24px); height: auto; display: block; }
/* Elke badge is een link naar /certificering/. De <a> mag de rij niet
   veranderen (hij is precies zo groot als zijn badge) en moet zichtbaar
   aanwijsbaar zijn — ook met het toetsenbord, vandaar de ronde focusring. */
.badges-rij a { display: block; flex: 0 0 auto; border-radius: 50%; }
.badges-rij a img { transition: transform .18s ease; }
.badges-rij a:hover img, .badges-rij a:focus-visible img { transform: scale(1.06); }
.badges-rij a:focus-visible { outline: 3px solid var(--geel); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .badges-rij a img { transition: none; }
    .badges-rij a:hover img, .badges-rij a:focus-visible img { transform: none; }
}

/* ---------- generieke sectie ---------- */
.sectie-grijs { background: var(--grijs); }
.sectie h2.sectiekop { font-size: 32px; line-height: 32px; font-weight: 700; padding-bottom: 10px; }
.gecentreerd { text-align: center; }

/* ---------- erkende asbestverwijderaar ---------- */
/* De sectie begint 92px boven de onderkant van de badge-rij (zoals het
   origineel); de bovenopvulling houdt de kop altijd minstens 20px onder de
   badges, ook op smalle desktops waar de badges dieper doorlopen. */
.erkende { margin-top: calc(6.8vw - 101.6px); padding-top: max(2vw, calc(121.6px - 6.8vw)); padding-bottom: 300px; }
.erkende-kolommen { display: flex; gap: 5.5%; margin-top: 2.75%; }
.erkende-links { width: 57.8%; }
/* Divi-tekstmodule: alinea's 19.2px met 1em onderrand, h5 18px, lijsten 26px. */
.erkende-links p, .avbe-links p { line-height: 19.2px; padding-bottom: 16px; margin: 0; }
.erkende-links p:last-child, .avbe-links p:last-of-type { padding-bottom: 0; }
.erkende-links h5, .avbe-links h5 { font-size: 18px; line-height: 18px; font-weight: 700; padding-bottom: 10px; margin: 0; }
.erkende-links ul, .avbe-links ul { list-style: none; margin: 0; padding: 0 0 16px 16px; line-height: 26px; }
.erkende-links li, .avbe-links li { line-height: 26px; padding: 0; }
.erkende-rechts { width: 36.7%; margin-top: -6px; }
/* Divi-tekstmodule: 25/15/15 opvulling, drie lijstjes van 18px/26px met
   18px onderrand, en een lege alinea (18px) na het eerste lijstje. */
.gele-kaart { background: var(--geel); padding: 25px 15px 33px 33px; font-size: 18px; line-height: 26px; font-weight: 700; text-transform: uppercase; margin-bottom: 7.493%; }
.gele-kaart ul { list-style: none; }
.gele-kaart li { margin-bottom: 36px; }
.gele-kaart li:nth-child(2) { margin-bottom: 18px; }
.gele-kaart li:last-child { margin-bottom: 0; }
.citaat { margin-top: 0; max-width: 85%; font-size: 23px; line-height: 23px; font-weight: 700; font-style: italic; padding-bottom: 10px; }
.inbeeld-kop { margin-top: 0; }
.erkende .inbeeld-kop { text-align: center; margin-top: calc(2vw + 46px); }
/* Divi: rij-opvulling 2% tot 1350px, daarboven vast 27px. */
@media (min-width: 1350px) {
    .erkende { padding-top: max(27px, calc(121.6px - 6.8vw)); }
    .erkende .inbeeld-kop { margin-top: 73px; }
}

/* ---------- videoslider (in beeld) ---------- */
.avbe-sectie { background: var(--wit); padding-top: 2vw; }
.videoslider { margin-top: -300px; margin-bottom: 0; }
/* Hoofdvideo op 16:9 van de rijbreedte, zoals de Divi-videoslider (608px op 1080). */
.videoslider-hoofd { position: relative; aspect-ratio: 16 / 9; background: #000; }
.videoslider-hoofd img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.videoslider-hoofd iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.speel-knop {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 0; height: 0; border: 0; background: none; cursor: pointer;
    color: var(--wit); font-size: 96px; line-height: 1;
}
.speel-knop::before { content: "\25B6"; text-shadow: 0 0 20px rgba(0,0,0,.5); }
.videoslider-thumbs { display: flex; gap: 2%; margin-top: 2%; height: 140px; overflow: hidden; }
.videoslider-thumbs button { flex: 0 0 23.5%; width: auto; height: 140px; border: 0; padding: 0; cursor: pointer; position: relative; background: #000; }
.videoslider-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.videoslider-thumbs button::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.videoslider-thumbs button.actief::after { background: rgba(0, 0, 0, 0); }

/* ---------- Asbestverwijdering.be blok ---------- */
.avbe-kolommen { display: flex; gap: 5.5%; margin-top: calc(2vw + 94px); }
.avbe-links { width: 57.8%; }
.avbe-links h2 { font-size: 32px; line-height: 32px; font-weight: 700; padding-bottom: 10px; }
.avbe-links .zwarte-banner {
    display: block;
    background: var(--inkt);
    color: var(--geel);
    font-size: 20px; line-height: 20px; font-weight: 700;
    text-align: left;
    padding: 5px 19px 10px;
    width: 85%;
    margin-bottom: 4.758%;
}
.avbe-links .knop { margin-top: 4.758%; }
.avbe-rechts { width: 36.7%; }
.avbe-rechts img { width: 100%; height: auto; display: block; }
.avbe-sectie { padding-bottom: 50px; }

/* ---------- 3 stappen ---------- */
/* Divi: sectie 4% + rij 2% opvulling (54 + 27px vanaf 1350px). */
.stappen { padding-top: 6vw; padding-bottom: calc(2vw + 1px); }
.stappen h2 { text-align: center; }
.stappen-rij { display: flex; gap: 5.5%; margin-top: calc(4vw - 41px); position: relative; }
.stap { width: 29.667%; text-align: center; position: relative; z-index: 1; }
.stap img { width: 45%; height: auto; margin: 0 auto 9.27%; display: block; }
.stap h3 { font-size: 20px; line-height: 20px; font-weight: 700; text-transform: uppercase; padding-bottom: 10px; }
.stap h4 { font-size: 18px; line-height: 18px; font-weight: 700; text-transform: uppercase; padding-bottom: 10px; }
.stap p { line-height: 19.2px; }
/* Divi-scheidingslijn: 8px gestippelde rand over 75% van de rij, achter de iconen. */
.stap-stippen { position: absolute; top: calc(123px - 4vw); left: 12.5%; right: 12.5%; border-top: 8px dotted var(--inkt); }
.stappen .knop-rij { text-align: center; margin-top: 39px; }
.stappen .knop { width: 30%; padding: 6px 20px; white-space: normal; text-align: center; }

/* ---------- projecten ---------- */
.projectenblok {
    padding-top: 6vw; padding-bottom: calc(2vw + 1px);
    background-image: url(/wp-content/uploads/2024/07/Blokjesvlag-grijs.png);
    background-repeat: no-repeat;
    background-position: right 120px;
    background-size: 260px auto;
}
.projectenblok h2 { text-align: center; }
.projectenblok-slider { position: relative; margin-top: -4px; }
.projectenblok-spoor { overflow: hidden; padding: 30px 30px 0; }
/* De baan schuift binnen het stilstaande spoor (venster); site.js kloont
   kaarten aan beide kanten voor de naadloze lus, zoals de Swiper van het
   origineel. touch-action laat verticaal scrollen door terwijl horizontaal
   slepen van ons is. */
.slider-baan { display: flex; touch-action: pan-y; }
.slider-baan.sleept { user-select: none; -webkit-user-select: none; }
.projectenblok-spoor .slider-baan { gap: 30px; }
.schuifkaart { flex: 0 0 calc((100% - 60px) / 3); width: auto; height: 500px; background: var(--inkt); display: flex; flex-direction: column; }
.schuifkaart img { width: 100%; height: 200px; object-fit: cover; display: block; }
.schuifkaart-inhoud { padding: 20px; color: var(--wit); flex: 1; overflow: hidden; }
.schuifkaart-inhoud h3 { font-size: 26px; line-height: 26px; font-weight: 700; margin: 0; padding-bottom: 10px; }
.schuifkaart-inhoud p { font-size: 16px; line-height: 22.4px; }
.schuifkaart .kaartknop {
    display: block; margin: 0 20px 20px;
    background: var(--geel); color: var(--inkt); border: 2px solid var(--geel);
    text-align: center; font-size: 20px; line-height: 34px; font-weight: 500;
    padding: 6px 20px; border-radius: 1px;
}
.slider-pijl {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 40px; border: 0; cursor: pointer;
    background: var(--inkt); color: var(--geel);
    font-size: 22px; line-height: 1;
}
.slider-pijl.links { left: -70px; }
.slider-pijl.rechts { right: -70px; }
.slider-stippen { text-align: center; margin-top: 30px; }
/* Swiper-bolletjes van het origineel: actief geel 8px, de rest vaag 5px. */
.slider-stippen button { width: 5px; height: 5px; border-radius: 50%; border: 0; background: #fff3ef; margin: 0 4px; padding: 0; cursor: pointer; vertical-align: middle; }
.slider-stippen button.actief { width: 8px; height: 8px; background: var(--geel); }
.projectenblok .knop-rij { text-align: center; margin-top: calc(4vw + 1px); }

/* ---------- reviews ---------- */
.reviews { padding-top: 6vw; padding-bottom: calc(6vw + 31px); }
.teller { text-align: center; font-size: 33.3333px; line-height: 88px; font-weight: 700; padding: 0; margin: 0; }
.teller .teller-cijfer { text-decoration: underline; text-decoration-color: var(--geel); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.reviews-slider { position: relative; margin-top: 2.75%; }
.reviews-spoor { overflow: hidden; padding: 30px; margin: 0; }
.reviews-spoor .slider-baan { gap: 20px; }
.reviewkaart {
    flex: 0 0 calc((100% - 60px) / 4); width: auto; min-width: 0; min-height: 264px;
    background: var(--wit); box-shadow: 0 2px 10px rgba(0,0,0,.08);
    padding: 15px; text-align: center; font-size: 14px;
}
.reviewkaart .sterren { color: var(--geel); font-size: 29px; line-height: 19.2px; letter-spacing: 0; margin-bottom: 20px; }
.reviewkaart h3 { font-size: 22px; line-height: 22px; font-weight: 700; text-transform: uppercase; margin: 0; padding-bottom: 10px; }
.reviewkaart .tekst { font-size: 15px; line-height: 19.2px; margin: 0; }
.reviewkaart .leesverder { color: #e09900; display: inline-block; font-size: 15px; line-height: 19.2px; margin-bottom: 10px; }
.reviewkaart .naam { font-weight: 600; font-size: 12px; line-height: 12px; margin-bottom: 10px; }
.reviewkaart .bron { color: #999; font-size: 16px; line-height: 19.2px; margin-bottom: 10px; }
.reviewkaart .bron a { color: inherit; text-decoration: underline; }
.reviews-slider .slider-pijl { width: 35px; height: 35px; font-size: 16px; top: calc(50% + 14px); }
.reviews-slider .slider-pijl.links { left: -66px; }
.reviews-slider .slider-pijl.rechts { right: -66px; }

/* ---------- footer ---------- */
.site-footer {
    background: var(--geel) url(/wp-content/uploads/2024/07/beeldmerk-Recovered-copy-02.svg) no-repeat left -40px top -40px;
    background-size: 220px auto;
}
/* Divi-rij van drie kolommen (29.667% + 5.5% tussenruimte); modulemarges
   zijn 9.27% van de kolombreedte. Boven Diensten/Contact staat in het
   origineel een onzichtbare afbeelding van 20.43% kolombreedte. */
.footer-kolommen { display: flex; gap: 5.5%; padding: 0 0 2vw; }
.footer-kolom-1 { width: 29.667%; }
/* Divi's eigen ondermarge voor een afbeeldingsmodule is 29px; de opgegeven
   modulemarge van 9,27% van de kolom komt daar pas vanaf ~1350px boven. */
.footer-kolom-1 .footer-logo { width: 100%; margin: 20px 0 max(29px, 9.27%); display: block; }
.footer-kolom-1 p { line-height: 19.2px; margin-bottom: 9.27%; }
.footer-kolom-1 .vca-logo { width: 65%; margin-bottom: 9.27%; display: block; }
.footer-links a { display: block; font-size: 13px; font-weight: 700; line-height: 19.2px; }
.footer-kolommen h2 { font-size: 23px; line-height: 23px; font-weight: 700; padding-bottom: 10px; margin: 0; }
.footer-diensten { width: 29.667%; margin-top: 8.811%; }
.footer-diensten .leeg { line-height: 19.2px; }
.footer-diensten ul { list-style: square inside; padding: 0 0 16px 27px; line-height: 26px; }
.footer-contact { width: 29.667%; margin-top: 8.811%; }
.footer-contact p { line-height: 19.2px; padding-bottom: 16px; }
.footer-contact p:last-of-type { padding-bottom: 0; }
.footer-contact .leeg { height: 16px; padding: 0; }
.footer-contact strong { font-weight: 700; }
.footer-contact a { text-decoration: none; }
.whatsapp { display: flex; align-items: flex-start; gap: 15px; margin-top: 9.27%; }
/* Het origineel tekent hier alleen de WhatsApp-glief (icoonfont, 60px, ink
   53x53 in een vak van 53x60) — geen omlijnde cirkel eromheen. */
.whatsapp-icoon {
    width: 53px; height: 60px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
}
.whatsapp-icoon svg { width: 53px; height: 53px; }
.whatsapp h4 { font-size: 18px; line-height: 45px; font-weight: 700; padding-bottom: 10px; }
.copyright { background: var(--inkt); color: var(--geel); margin: 15px 0; padding: 5px 0; }
.copyright p { width: 80%; max-width: 1080px; margin: 0 auto; padding: 10px 0; font-size: 14px; line-height: 19.2px; }
/* Divi: rij-opvulling 2% tot 1350px, daarboven vast 27px (sectie 4% -> 54px). */
@media (min-width: 1350px) {
    .avbe-sectie { padding-top: 27px; }
    .avbe-kolommen { margin-top: 121px; }
    .stappen { padding-top: 81px; padding-bottom: 28px; }
    .stappen-rij { margin-top: 13px; }
    .stap-stippen { top: 69px; }
    .projectenblok { padding-top: 81px; padding-bottom: 28px; }
    .projectenblok .knop-rij { margin-top: 55px; }
    .reviews { padding-top: 81px; padding-bottom: 112px; }
    .footer-kolommen { padding-bottom: 27px; }
}

/* ---------- popup ---------- */
.popup-achtergrond {
    display: flex; visibility: hidden; opacity: 0;
    transition: opacity .25s ease, visibility 0s .25s;
    position: fixed; inset: 0; background: rgba(0, 0, 0, .8);
    z-index: 100; align-items: center; justify-content: center; padding: 20px;
}
.popup-achtergrond .popup { transform: scale(.96) translateY(8px); transition: transform .25s ease; }
.popup-achtergrond.open { visibility: visible; opacity: 1; transition: opacity .25s ease; }
.popup-achtergrond.open .popup { transform: none; }
.popup {
    background: var(--wit); max-width: 640px; width: 100%; max-height: 90vh; overflow: auto;
    padding: 40px 30px; text-align: center; position: relative;
}
.popup .sluit { position: absolute; right: 10px; top: 4px; border: 0; background: none; font-size: 28px; cursor: pointer; }
.popup .sterren { color: var(--geel); font-size: 22px; letter-spacing: 4px; margin-bottom: 14px; }
.popup h2 { font-size: 22px; margin-bottom: 12px; }
.popup .naam { font-weight: 700; margin-top: 16px; }
.popup .bron { color: #999; margin-top: 6px; }
.popup .bron a { color: inherit; text-decoration: underline; }

.avbe-leesmeer-mobiel { display: none; }

.thumbs-pijl { display: none; }

/* ---------- mobiel ---------- */
@media (max-width: 980px) {
    .site-header { min-height: 0; height: 49px; }
    .home-knop, .taalkeuze { display: none; }
    .menu-knop {
        display: block; width: 66px; height: 49px; border: 0; cursor: pointer;
        background: var(--inkt); position: relative;
    }
    /* Gele slanke balkjes zoals het origineel (20x2, 5px tussenruimte),
       gecentreerd in het zwarte knopvlak; ::after is het kruis dat er bij
       het openen zacht voor in de plaats draait. */
    .menu-knop::before {
        content: ""; position: absolute; left: 23px; top: 18px; width: 20px; height: 13px;
        background:
            linear-gradient(var(--geel), var(--geel)) 0 0 / 20px 2px no-repeat,
            linear-gradient(var(--geel), var(--geel)) 0 5.5px / 20px 2px no-repeat,
            linear-gradient(var(--geel), var(--geel)) 0 11px / 20px 2px no-repeat;
        transition: transform .3s ease, opacity .3s ease;
    }
    .menu-knop::after {
        content: "\2715"; position: absolute; left: 16px; top: 8px;
        color: var(--geel); font-size: 24px; line-height: 33px; font-weight: 400;
        opacity: 0; transform: rotate(-90deg);
        transition: transform .3s ease, opacity .3s ease;
    }
    .taalkeuze-mobiel { display: block; }
    .hoofdmenu { display: none; position: absolute; left: 0; right: 0; top: 49px; width: auto; transform: none; background: var(--wit); box-shadow: 0 4px 10px rgba(0,0,0,.15); }
    .hoofdmenu.open { display: block; }
    .hoofdmenu > ul { flex-direction: column; padding: 10px 0; }
    .hoofdmenu > ul > li > a { padding: 10px 20px; font-size: 14px; }
    .hoofdmenu ul ul { display: block; position: static; box-shadow: none; padding: 0 0 0 20px; }
    /* Kop op telefoon: NL / FR en het logo staan als groep rechts. Bewust
       groter en verticaal gecentreerd dan het origineel (dat zette het logo
       op 80x21 laag in de balk — te klein, aanpassing op verzoek). */
    .site-logo-link {
        width: calc(38vw - 36px);
        right: calc(16px + 2.5vw); top: 50%; bottom: auto; transform: translateY(-50%);
    }
    .taalkeuze-mobiel {
        position: absolute; left: auto;
        right: calc(16px + 2.5vw + 38vw - 36px + 13px + 1.2vw);
        top: 50%; bottom: auto; transform: translateY(-50%);
        font-size: 16px; line-height: 19.2px; white-space: nowrap;
    }
    .taalkeuze-mobiel span { text-decoration: underline; }

    .omlijning { max-width: 312px; }
    .knop { display: block; width: 100%; white-space: normal; text-align: center; }
    .hero { height: 225px; min-height: 0; margin-bottom: 0; }
    .hero-inhoud { float: none; width: 350px; min-height: 0; padding: 0; margin: 0 auto; height: 100%; }
    .hero-inhoud h1 { position: absolute; top: 76px; font-size: 25px; line-height: 25px; max-width: 350px; text-shadow: none; }
    .hero-inhoud .knop { position: static; }
    .hero-knop-mobiel {
        display: block; background: var(--geel); text-align: center;
        font-size: 20px; font-weight: 500; line-height: 34px; text-transform: uppercase;
        padding: 5px 0; margin: 0;
    }
    .hero-knop-mobiel::after { content: "\2794"; margin-left: 8px; }
    .hero .knop { display: none; }
    .hero::after { display: none; }
    .badges { margin: 0; padding: 49px 0 0; background: var(--grijs); transform: none; }
    /* zelfde 3+2-wikkel en maat als .badge-rij op de subpagina's
       (consistente badgeplaatsing, verzoek Lennert) */
    .badges-rij { width: 100%; max-width: 330px; flex-wrap: wrap; justify-content: center; gap: 14px 18px; }
    .badges-rij img { width: 92px; height: 92px; }

    .erkende { margin-top: 0; padding-top: 47px; padding-bottom: 295px; }
    .erkende-kolommen { margin-top: 30px; gap: 30px; }
    .erkende-rechts { margin-top: 0; }
    .gele-kaart { margin-bottom: 0; }
    .teller { line-height: 48px; }
    .citaat { margin-top: 30px; }
    .avbe-links .zwarte-banner { margin-bottom: 30px; }
    .projectenblok { padding-top: 81px; }
    .projectenblok .knop-rij { margin-top: 55px; }
    .reviews { padding-top: 81px; }
    /* rij-opvulling onder de laatste module: 30px van de Divi-rij min de 4px
       negatieve marge van het linkenblok */
    .footer-kolommen { padding-bottom: 26px; }
    .videoslider-thumbs button { flex: 0 0 98px; }
    .reviews { padding-bottom: 110px; }
    .copyright { margin: 15px 0; padding: 5px 0; }
    .erkende-kolommen { flex-direction: column; gap: 30px; }
    .erkende-links, .erkende-rechts, .avbe-links, .avbe-rechts { width: 100%; }
    .sectie h2.sectiekop { font-size: 32px; line-height: 32px; }
    .erkende .inbeeld-kop { margin-top: 100px; }
    .videoslider { margin-top: -278px; }
    .videoslider-thumbs { margin-top: 7px; }
    .videoslider-hoofd { height: 176px; }
    .videoslider-thumbs { height: 55px; gap: 8px; }
    .videoslider-thumbs button { width: 98px; height: 55px; }
    .avbe-kolommen { flex-direction: column; gap: 60px; margin-top: 196px; }
    .avbe-links .zwarte-banner { width: 100%; }
    .avbe-rechts img { width: 100%; height: auto; }
    .stappen { padding-top: 40px; }
    .stappen-rij { flex-direction: column; gap: 99px; margin-top: 132px; }
    .stappen { padding-bottom: 0; }
    .projectenblok { padding-bottom: 0; }
    .projectenblok .knop { padding-bottom: 0; }
    .stap { width: 100%; }
    .stap img { width: 140px; height: 140px; margin-bottom: 30px; }
    .stap-stippen { display: none; }
    .schuifkaart { flex: 0 0 100%; width: 100%; }
    .slider-pijl.links { left: -29px; }
    .slider-pijl.rechts { right: -29px; }
    .reviews-slider { margin-top: 59px; }
    /* Zijpadding weg: de kaart vult het spoor precies, zodat de klonen
       van de loop niet als witte stroken in beeld staan. */
    .reviews-spoor { margin: -30px 0 0; padding: 30px 0; }
    /* Eén kaart spoorbreed: op 252px staken de klonen van de loop als
       witte stroken aan weerszijden in beeld. */
    .reviewkaart { flex: 0 0 100%; width: 100%; margin: 0; }
    .reviews-slider .slider-pijl.links { left: -30px; }
    .reviews-slider .slider-pijl.rechts { right: -30px; }
    .hero-knop-mobiel { margin-top: -44px; position: relative; z-index: 5; }
    .erkende-links h5, .avbe-links h5 { font-size: 18px; line-height: 18px; }
    .erkende-links li { line-height: 26px; padding: 0; }
    .gele-kaart { padding: 25px 15px 33px 33px; }
    .gele-kaart li { font-size: 18px; line-height: 26px; padding-left: 0; text-indent: 0; margin-bottom: 36px; }
    .gele-kaart li:first-child { margin-bottom: 36px; }
    .gele-kaart li:nth-child(2) { margin-bottom: 18px; }
    .citaat { max-width: 266px; }
    .avbe-links h2 { font-size: 27px; line-height: 27px; }
    .avbe-links .zwarte-banner { text-align: left; line-height: 20px; padding: 5px 19px 10px; }
    .avbe-links .avbe-leesmeer { display: none; }
    .avbe-leesmeer-mobiel {
        display: block; width: 100%; background: var(--geel); border: 2px solid var(--geel);
        font-size: 20px; line-height: 34px; font-weight: 700; text-transform: uppercase;
        text-align: left; padding: 6px 40px 6px 39px; margin-top: 30px;
    }
    .avbe-leesmeer-mobiel::after { content: "\2794"; margin-left: 10px; }
    .avbe-sectie { padding-top: 1px; padding-bottom: 0; }
    .stappen .knop { width: 100%; padding: 6px 14px; }
    .stappen .knop, .projectenblok .knop {
        display: block; width: 100vw; margin-left: calc(50% - 50vw);
        text-align: center; white-space: nowrap; padding: 6px 0; font-weight: 700;
    }
    .projectenblok .knop { padding-bottom: 0; }
    .reviews { padding-bottom: 122px; }
    /* De projectkaart vult het spoor net als de reviewkaart: eerder was hij
       252px in een spoor van 312 met alleen links padding, waardoor de slider
       smaller en uit het lood oogde naast de rest van de pagina. */
    .schuifkaart { flex: 0 0 100%; width: 100%; }
    .projectenblok-spoor { padding: 30px 0 0; }
    .schuifkaart img { height: 200px; }
    .schuifkaart-inhoud h3 { font-size: 26px; line-height: 26px; }
    /* ---- voet op telefoon en tablet ---------------------------------
       Eén gecentreerde kolom in de volgorde van het origineel: logo,
       intro, DIENSTEN, CONTACT + WhatsApp, VCA-logo, kleine links.
       Maten gemeten op het live origineel op 390 en 768.               */
    .site-footer { background-image: none; }
    .footer-kolommen { flex-direction: column; gap: 0; padding-top: 40px; text-align: center; }
    .footer-kolom-1 { display: contents; }
    .footer-kolom-1 .footer-logo { order: 0; }
    .footer-kolom-1 p { order: 1; }
    .footer-diensten { order: 2; }
    .footer-contact { order: 3; }
    .footer-kolom-1 .vca-logo { order: 4; }
    .footer-links { order: 5; }
    .footer-kolom-1, .footer-diensten, .footer-contact { width: 100%; }

    /* Het origineel zet het logo op 62,5% van de rijbreedte maar begint het
       op 50%, zodat het rechts uit beeld loopt (390: x196-391 in een venster
       van 390, 768: x385-769). Wij houden dezelfde maat en centreren het. */
    .footer-kolom-1 .footer-logo { display: block; width: 62.5%; margin: 0 auto 29px; }
    .footer-kolom-1 p { max-width: 90%; margin: 0 auto 50px; }
    .footer-kolommen h2 { font-size: 30px; line-height: 30px; padding-bottom: 10px; margin-bottom: 0; }

    /* De dienstenlijst staat in het origineel in een baan van 80% van de rij:
       kop en 'Asbestverwijdering' gecentreerd, de rest links daarbinnen. Alle
       regels staan 35px uit elkaar en tussen 'Eenvoudige handelingen' en
       'Afbraak- en sloopwerken' staat een lege regel. */
    .footer-diensten { margin-top: 0; }
    .footer-diensten .leeg { display: none; }
    .footer-diensten ul { list-style: none; padding: 0; line-height: 19.2px; }
    .footer-diensten > ul { width: 80%; margin: 0 auto; }
    .footer-diensten li { margin: 0 0 16px; text-align: left; }
    .footer-diensten > ul > li:last-child { margin-bottom: 0; }
    .footer-diensten > ul > li:first-child > a { display: block; text-align: center; }
    .footer-diensten ul ul { padding: 0; margin-top: 16px; }
    .footer-diensten ul ul li:last-child { margin-bottom: 51px; }
    /* het origineel zet een pijltje voor de subdiensten */
    .footer-diensten ul ul a::before { content: "\21B3"; }

    .footer-contact { margin-top: 50px; }
    .footer-contact p { line-height: 19.2px; margin-bottom: 16px; padding-bottom: 0; }
    .footer-contact .leeg { display: none; }
    .footer-contact a { font-weight: 600; text-decoration: none; }

    .whatsapp { flex-direction: column; align-items: center; gap: 30px; margin-top: 30px; text-decoration: none; }
    .whatsapp h4 { font-size: 21px; line-height: 21px; padding-bottom: 10px; }

    .footer-kolom-1 .vca-logo { width: 187px; margin: 30px auto; }
    .footer-links { margin-bottom: 0; }
    .footer-links a { font-weight: 300; font-size: 10px; line-height: 19.2px; }
    .copyright p { max-width: 312px; font-size: 14px; text-align: center; }
    /* Pijlen op het midden van de kaartfoto (200px hoog) in plaats van
       halverwege de kaart, waar ze over de titel vielen. */
    .projectenblok .slider-pijl { width: 45px; height: 44px; font-size: 26px; top: 130px; }
    .videoslider-thumbs { position: relative; overflow-x: hidden; }
    /* Met .thumbs-pijl alleen won de bredere selector .videoslider-thumbs button
       (zelfde blok) van position en width: de pijlen stonden dan als twee volle
       thumbnailkolommen in de rij. Daarom hier even specifiek geschreven. */
    .videoslider-thumbs .thumbs-pijl {
        display: block; position: absolute; top: 50%; transform: translateY(-50%);
        width: 26px; height: 55px; border: 0; cursor: pointer;
        background: rgba(0, 0, 0, .45); color: #fff; font-size: 22px; line-height: 1;
        z-index: 3; padding: 0; flex: 0 0 auto;
    }
    .videoslider-thumbs .thumbs-pijl.links { left: 0; }
    .videoslider-thumbs .thumbs-pijl.rechts { right: 0; }
    /* open menu: fullscreen zwart met gele pillen (live ontwerp sept 2026) */
    .menu-knop { z-index: 60; position: relative; }
    html.menu-open .menu-knop { background: #030303; }
    html.menu-open .menu-knop::before { opacity: 0; transform: rotate(45deg); }
    html.menu-open .menu-knop::after { opacity: 1; transform: rotate(0); }
    html.menu-open body { overflow: hidden; }
    /* Fullscreen menu vadet in; de pillen komen licht gestaggerd omhoog. */
    .hoofdmenu {
        display: block; visibility: hidden; opacity: 0;
        transition: opacity .3s ease, visibility 0s .3s;
        position: fixed; inset: 0; top: 0; background: #030303; box-shadow: none; z-index: 55; padding-top: 102px; overflow-y: auto;
    }
    .hoofdmenu.open { visibility: visible; opacity: 1; transition: opacity .3s ease; }
    /* Pillen naar de maten van het origineel: 281x56, 10px uit elkaar,
       gecentreerd (de 11px li-padding van desktop lekt anders door). */
    .hoofdmenu > ul { flex-direction: column; align-items: center; gap: 10px; padding: 0 0 40px; }
    .hoofdmenu > ul > li { width: 281px; padding: 0; position: relative; opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; }
    .hoofdmenu.open > ul > li { opacity: 1; transform: none; }
    .hoofdmenu.open > ul > li:nth-child(1) { transition-delay: .03s; }
    .hoofdmenu.open > ul > li:nth-child(2) { transition-delay: .07s; }
    .hoofdmenu.open > ul > li:nth-child(3) { transition-delay: .11s; }
    .hoofdmenu.open > ul > li:nth-child(4) { transition-delay: .15s; }
    .hoofdmenu.open > ul > li:nth-child(5) { transition-delay: .19s; }
    .hoofdmenu.open > ul > li:nth-child(6) { transition-delay: .23s; }
    .hoofdmenu.open > ul > li:nth-child(7) { transition-delay: .27s; }
    .hoofdmenu > ul > li > a {
        display: block; width: 281px; padding: 15px 25px; height: 56px; line-height: 26px;
        background: #272727; border-radius: 50px; color: var(--geel);
        font-size: 16px; font-weight: 800; text-transform: none; text-align: center;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .hoofdmenu > ul > li.heeft-sub > a { padding-right: 25px; }
    /* Het plusje van het origineel: subtiel schijfje rechts in de pil,
       verticaal gecentreerd — de mask-chevron van desktop volledig weg
       (de dubbele selector wint ook op de subpil met eigen submenu). */
    .hoofdmenu li.heeft-sub > a::after,
    .hoofdmenu ul ul li.heeft-sub > a::after {
        content: "+"; -webkit-mask: none; mask: none;
        position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
        width: 26px; height: 26px; border-radius: 50%;
        background: rgba(230, 230, 230, .08);
        color: rgba(230, 230, 230, .55);
        font-size: 18px; line-height: 26px; font-weight: 400; text-align: center;
        margin: 0; vertical-align: baseline;
    }
    .hoofdmenu li.heeft-sub.sub-open > a::after { content: "\2212"; }
    /* Accordeon: submenu's klappen vloeiend uit (hoogte + fade); dicht is
       ook echt onzichtbaar en onklikbaar (visibility + overflow). */
    .hoofdmenu ul ul {
        display: flex; flex-direction: column; gap: 10px; align-items: center;
        visibility: hidden; opacity: 0; max-height: 0; overflow: hidden; transform: none;
        transition: max-height .35s ease, opacity .35s ease, padding .35s ease, visibility 0s .35s;
        position: static; box-shadow: none; background: none; min-width: 0; padding: 0; margin: 0;
    }
    .hoofdmenu li.sub-open > ul {
        visibility: visible; opacity: 1; max-height: 420px; padding: 8px 0 0;
        transition: max-height .35s ease, opacity .35s ease, padding .35s ease;
    }
    /* Ruimte voor een uitgeklapt niveau 3 binnen een uitgeklapt niveau 2:
       met 420px werd de lijst met methodes onderaan afgekapt. */
    .hoofdmenu > ul > li.sub-open > ul { max-height: 900px; }
    /* Elk niveau smaller en anders gekleurd dan het niveau erboven; zo lees je
       waar je zit. Niveau 1 is 281px/#272727, dus subpillen blijven daarbinnen
       (eerder waren ze 305px: breder dan hun ouder, met afgekapte hoeken). */
    .hoofdmenu ul ul li { width: 257px; }
    .hoofdmenu ul ul a {
        display: block; width: 257px; height: 46px; line-height: 46px; padding: 0 20px;
        background: #6b6b6b; border-radius: 50px; color: var(--geel);
        font-size: 14px; font-weight: 800; text-transform: none; text-align: center;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .hoofdmenu ul ul ul li { width: 225px; }
    .hoofdmenu ul ul ul a {
        width: 225px; height: 40px; line-height: 40px; font-size: 13px; font-weight: 700;
        background: #3d3d3d; color: rgba(247, 230, 28, .85);
    }
}

/* ---------- tablet 768–980 ----------
   Het origineel schakelt hier terug naar gestapelde kolommen in een 80%-rij
   (614px op 768). Overgenomen uit het origineel: rijbreedte, hero-titel van
   40px, badgeformaat, 16:9-hoofdvideo met vier thumbnails van 100px,
   twee projectkaarten (262px) en twee reviews (267px) naast elkaar,
   volle-breedte knoppen en een gecentreerde voet in één kolom.
   Bewust anders dan het origineel (het origineel is daar stuk):
   - de hero-knop staat vrij onder de titel; de badges schuiven eronder
     (origineel: badges liggen over de knop heen),
   - de badges staan gecentreerd (origineel: links uit de rij weggelopen),
   - stap-iconen 160px i.p.v. 276px, met kleinere tussenruimte,
   - het footerlogo staat gecentreerd en blijft binnen de rij; het origineel
     zet het op 50% van de rij en 62,5% breed, dus het loopt uit beeld. */
@media (min-width: 768px) and (max-width: 980px) {
    .omlijning { max-width: none; }

    /* kop: het logo groeit hier trager mee dan onder 768 (gemeten) */
    .site-logo-link { width: calc(18.85vw - 34px); }
    .taalkeuze-mobiel { right: calc(30px + 2.5vw + 18.85vw - 34px + 13px + 1.2vw); }

    /* hero */
    .hero { height: auto; min-height: 0; margin-bottom: calc(-0.4 * min(12.24vw, 110px)); }
    .hero::after { display: block; bottom: calc(-0.5 * min(12.24vw, 110px)); }
    .hero-inhoud {
        float: none; position: relative; width: 100%; height: auto; min-height: 0;
        margin: 0; padding: 72px 20% max(40px, calc(4.9vw + 15px)) 10%;
    }
    .hero-inhoud h1 {
        position: static; max-width: none;
        font-size: 40px; line-height: 40px; padding-bottom: 10px;
        text-shadow: 0 0 .3em rgba(0, 0, 0, .4);
    }
    .hero .knop {
        display: block; width: max-content; margin-top: 20px; padding: 6px 14px;
        font-weight: 500; white-space: nowrap; text-align: left;
    }
    .hero-knop-mobiel { display: none !important; }

    /* badges */
    .badges { padding: 0; background: none; }
    .badges-rij { width: 80%; max-width: none; gap: 2.6%; justify-content: center; }
    .badges-rij img { width: min(12.24vw, 110px); height: auto; }

    /* erkende asbestverwijderaar */
    .erkende { margin-top: 0; padding-top: 112px; padding-bottom: 300px; }
    .citaat { max-width: 85%; }
    .erkende .inbeeld-kop { margin-top: 100px; }

    /* videoslider: 16:9 met vier thumbnails van 100px, zonder bladerpijlen */
    .avbe-sectie { padding-top: 30px; }
    .videoslider { margin-top: -300px; }
    .videoslider-hoofd { height: auto; aspect-ratio: 16 / 9; }
    .videoslider-thumbs { height: 100px; gap: 2%; margin-top: 2%; }
    .videoslider-thumbs button { flex: 0 0 23.5%; width: auto; height: 100px; }
    .thumbs-pijl { display: none; }

    /* Asbestverwijdering.be */
    .avbe-kolommen { margin-top: 124px; gap: 50px; }
    .avbe-links h2 { font-size: 32px; line-height: 32px; }
    .avbe-links .zwarte-banner { width: 87%; margin-bottom: 30px; }
    .avbe-leesmeer-mobiel { padding: 6px 10%; text-align: left; }

    /* 3 stappen */
    .stappen { padding-top: 80px; }
    .stappen-rij { margin-top: 60px; gap: 60px; }
    .stap img { width: min(20vw, 180px); height: auto; margin-bottom: 30px; }
    .stap p { max-width: 640px; margin: 0 auto; }
    .stappen .knop-rij { margin-top: 25px; }

    /* projecten: twee kaarten naast elkaar */
    .projectenblok { padding-top: 80px; }
    .projectenblok-spoor { padding: 30px 30px 0; gap: 30px; }
    .schuifkaart { flex: 0 0 calc((100% - 30px) / 2); width: auto; }
    .projectenblok .slider-pijl.links { left: -47px; }
    .projectenblok .slider-pijl.rechts { right: -47px; }
    .projectenblok .knop-rij { margin-top: 30px; }

    /* reviews: twee kaarten naast elkaar */
    .reviews { padding-top: 80px; padding-bottom: 50px; }
    .teller { line-height: 88px; }
    .reviews-slider { margin-top: 0; }
    .reviews-spoor { margin: 0; padding: 30px 30px 60px; }
    .reviewkaart { flex: 0 0 calc((100% - 20px) / 2); width: auto; margin: 0; }
    .reviews-slider .slider-pijl.links { left: -63px; }
    .reviews-slider .slider-pijl.rechts { right: -63px; }

    /* voet */
    .copyright p { max-width: none; }
    .footer-kolom-1 .vca-logo { width: 184px; }
}

/* ---------- bediening van de kaartsliders op telefoon ----------------
   Op telefoon staat .omlijning op max-width 312 en vult de kaart het spoor
   helemaal (zie het blok hierboven). De pijlen stonden absoluut op
   left/right -29 tot -30 en vielen daardoor ín de kaart: 16px over de
   projectfoto en 5px over de reviewkaart, precies ter hoogte van "Lees
   verder...". Naast de kaart is er ook geen ruimte voor een aanraakdoel van
   44px — de zijmarge is maar 36 tot 50px breed, en een pijl die daar wél in
   past zou onder 412 het scherm uit steken.
   Daarom staan pijlen en stippen hier onder de kaart, in één rij: zwart vlak
   met gele pijl zoals overal, 44x44 als aanraakdoel. Boven 767 verandert er
   niets (tablet en desktop hebben zijmarge genoeg). */
@media (max-width: 767px) {
    .projectenblok-slider,
    .reviews-slider {
        display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
        column-gap: 16px;
    }
    /* projecten: de stippen staan tussen de pijlen, dus 16px volstaat;
       reviews heeft geen stippen en zet de twee pijlen wat verder uiteen */
    .projectenblok-slider { row-gap: 20px; }
    .reviews-slider { row-gap: 0; column-gap: 40px; }
    /* het spoor houdt de volle breedte; de bediening valt op de tweede regel */
    .projectenblok-spoor,
    .reviews-spoor { order: 1; flex: 0 0 100%; width: 100%; }
    .projectenblok-slider .slider-pijl,
    .reviews-slider .slider-pijl {
        position: static; transform: none;
        order: 2; flex: 0 0 auto; width: 44px; height: 44px;
    }
    .projectenblok-slider .slider-pijl.rechts,
    .reviews-slider .slider-pijl.rechts { order: 4; }
    /* stippen tussen de twee pijlen */
    .slider-stippen { order: 3; flex: 0 0 auto; margin-top: 0; line-height: 44px; }
    /* De bolletjes blijven optisch 5 en 8px, maar krijgen via ::after een
       aanraakvlak van 44px hoog; iets meer tussenruimte zodat die vlakken
       elkaar niet overlappen. */
    .slider-stippen button { position: relative; margin: 0 8px; }
    .slider-stippen button::after {
        content: ""; position: absolute; left: 50%; top: 50%;
        width: 21px; height: 44px; transform: translate(-50%, -50%);
    }
}

/* ---------- paginaovergangen & bewegingsvoorkeur ---------- */
/* Zachte cross-fade tussen pagina's (View Transitions, progressive
   enhancement: browsers zonder ondersteuning navigeren gewoon hard).
   De gele kop, de footer en de admin-ribbon zijn op elke pagina
   identiek en krijgen een eigen naam zodat ze stil blijven staan. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: .22s; }
    .site-header { view-transition-name: site-kop; }
    .site-footer { view-transition-name: site-voet; }
    .admin-ribbon { view-transition-name: beheer-ribbon; }
}
/* Wie minder beweging wil, krijgt alles direct (menu's, popups, pillen). */
@media (prefers-reduced-motion: reduce) {
    .hoofdmenu, .hoofdmenu ul ul, .hoofdmenu > ul > li,
    .menu-knop::before, .menu-knop::after,
    .popup-achtergrond, .popup-achtergrond .popup { transition: none !important; }
}