/* Asbestverwijdering.be — gedeelde onderdelen voor de subpagina's.
   Aanvulling op /site/site.css (kop, voet, .knop, kleuren). Alle maten zijn
   gemeten op het live origineel op 390 / 768 / 1000 / 1366 / 1920 px.
   Documentatie + copy-paste-markup: scripts/herbouw/ONDERDELEN.md          */

/* =========================================================================
   1. Raamwerk: baan (Divi-rij-breedte), rij-opvulling, sectie-opvulling
   ========================================================================= */

/* Divi-rij: width 80%, max 1080px, gecentreerd — op elke breedte. */
.baan { width: 80%; max-width: 1080px; margin: 0 auto; }

/* Divi-rij-opvulling: 2% van het venster, vanaf 1350px vast 27px; tablet en
   telefoon 30px. */
.rij { padding: min(2vw, 27px) 0; }

/* Divi-sectie-opvulling: 4% → vanaf 1350px vast 54px; tablet/telefoon 50px. */
.sectie { padding: 0; }
.sectie.boven { padding-top: min(4vw, 54px); }
.sectie.onder { padding-bottom: min(4vw, 54px); }
.sectie.wit { background: var(--wit); }

@media (max-width: 980px) {
    .rij { padding: 30px 0; }
    .sectie.boven { padding-top: 50px; }
    .sectie.onder { padding-bottom: 50px; }
}

/* =========================================================================
   2. Paginakop: fotobanner met witte h1 + kruimelpad + pfa-handtekening
   ========================================================================= */

.paginakop {
    position: relative;
    min-height: 290px;
    /* het origineel geeft de bannersectie 2px onderopvulling; dat telt mee
       zodra de inhoud hoger is dan de minimumhoogte (telefoon) */
    padding-bottom: 2px;
    background-color: var(--grijs);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* De pfa-handtekeninglijn hangt onder de banner uit (net als op de home). */
.paginakop::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -85px;
    transform: translateX(-50%);
    width: 100%;
    height: 150px;
    z-index: 10;
    pointer-events: none;
    background: url(/wp-content/uploads/2026/05/2pfalline.png) center / 100% auto no-repeat;
}

.paginakop h1 {
    margin: 50px 0 -1px;
    padding-bottom: 10px;
    font-size: 35px;
    line-height: 35px;
    font-weight: 700;
    color: var(--wit);
    text-shadow: 0 .1em .1em rgba(0, 0, 0, .4);
}

/* Kop zonder foto (bv. juridische pagina's): zwarte titel op grijs. */
.paginakop.kaal { min-height: 0; background: none; }
.paginakop.kaal::after { display: none; }
.paginakop.kaal h1 { color: var(--inkt); text-shadow: none; margin-top: 0; }

@media (max-width: 980px) {
    .paginakop { min-height: 310px; }
    .paginakop::after { height: 85px; bottom: -45px; }
}
@media (max-width: 767px) {
    .paginakop { min-height: 205px; }
    .paginakop::after { display: none; }
}

/* Het kruimelpad is sitebreed (chip-stijl) en staat in /site/site.css. */

/* =========================================================================
   3. Badge-rij onder de paginakop (5 certificaten)
   ========================================================================= */

/* Het blok schuift met zijn onderrand over de volgende sectie heen; het
   origineel doet dit met transform:translateY(-40%) op een sectie met 59px
   onderopvulling — precies overgenomen zodat elke breedte gelijk blijft. */
.badgebalk {
    position: relative;
    z-index: 10;
    margin: 23px 0 -116px;
    padding-bottom: 59px;
    transform: translateY(-40%);
}
.badge-rij { width: 50%; max-width: 1080px; margin: 0 auto; display: flex; gap: 30px; }
.badge-rij a, .badge-rij > img { flex: 1 1 0; display: block; min-width: 0; }
.badge-rij img { width: 100%; height: auto; display: block; }

@media (max-width: 980px) {
    .badgebalk { margin: 0 0 -135px; }
    /* Op 768-980 hangt de pfa-handtekening van .paginakop::after over de
       rechter kwart van het venster (lijnbeeld van 2560px op 100% geschaald,
       de handtekening zelf beslaat x1919-2559). Centreren legt de laatste
       badge daar bovenop (77px overlap op 768, 98px op 980), dus houden we de
       rij — net als het origineel — links. Op >=981 eindigt de rij vanzelf
       precies waar de handtekening begint. */
    .badge-rij { width: 70%; margin-left: 0; margin-right: auto; }
}
@media (max-width: 767px) {
    /* op telefoon is de handtekening verborgen, dus centreren mag weer;
       vijf badges op één smalle rij werden postzegels — ze wikkelen nu
       gecentreerd naar 3 + 2 op een leesbare maat */
    .badgebalk { margin: 75px 0 -90px; }
    .badge-rij {
        width: 100%; max-width: 330px; margin-left: auto; margin-right: auto;
        flex-wrap: wrap; justify-content: center; gap: 14px 18px;
    }
    .badge-rij a, .badge-rij > img { flex: 0 0 92px; }
}

/* Marges per pagina: /diensten/ en /certificering/ gebruiken de waarden
   hierboven, /over-ons/ die van zijn eigen (kortere) kopsectie. */
.badgebalk.over-ons { margin: 0 0 -67px; padding-bottom: 0; }
@media (max-width: 980px) { .badgebalk.over-ons { margin: 0 0 -35px; } }
@media (max-width: 767px) {
    .badgebalk.over-ons { margin: 75px 0 -23px; }
}

/* =========================================================================
   4. Tekstblok (Divi-tekstmodule)
   ========================================================================= */

.tekstblok { line-height: 19.2px; }
.tekstblok p { margin: 0; padding-bottom: 16px; }
.tekstblok p:last-child { padding-bottom: 0; }
/* het origineel zet sommige tekstmodules op font-weight 400 i.p.v. 300 */
.tekstblok.normaal p, .tekstblok.normaal li { font-weight: 400; }
.tekstblok h2 { font-size: 32px; line-height: 32px; font-weight: 700; padding-bottom: 10px; margin: 0; }
.tekstblok h3 { font-size: 20px; line-height: 20px; font-weight: 700; padding-bottom: 10px; margin: 0; }
.tekstblok h4 { font-size: 21px; line-height: 21px; font-weight: 700; padding-bottom: 10px; margin: 0; }
.tekstblok h5 { font-size: 18px; line-height: 18px; font-weight: 700; padding-bottom: 10px; margin: 0; }
/* het origineel toont wél opsommingstekens; de marker staat buiten de 16px
   linkeropvulling, net als daar */
.tekstblok ul, .tekstblok ol { margin: 0; padding: 0 0 16px 16px; line-height: 26px; }
.tekstblok ul { list-style: disc; }
.tekstblok ol { list-style: decimal; }
.tekstblok li { line-height: 26px; }
.tekstblok a { font-weight: 600; color: var(--inkt); text-decoration: underline; text-decoration-color: var(--geel); }
.tekstblok img { display: block; height: auto; }

/* =========================================================================
   5. Knoppen
   ========================================================================= */

/* Gele knop met pijl rechts in de opvulling (Divi promo/CTA-knop). */
.knop-pijl {
    position: relative;
    display: inline-block;
    background: var(--geel);
    color: var(--inkt);
    border: 2px solid transparent;
    border-radius: 3px;
    font-size: 20px;
    line-height: 34px;
    font-weight: 500;
    padding: 6px 40px 6px 14px;
    text-align: center;
}
.knop-pijl::after {
    content: "";
    position: absolute;
    right: 16.5px;
    top: calc(50% - 10px);
    width: 17.5px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M313.9 216H12c-6.6 0-12 5.4-12 12v56c0 6.6 5.4 12 12 12h301.9v46.1c0 21.4 25.9 32.1 41 17l86-86.1c9.4-9.4 9.4-24.6 0-34l-86-86c-15.1-15.1-41-4.4-41 17V216z'/%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 448 512'%3E%3Cpath d='M313.9 216H12c-6.6 0-12 5.4-12 12v56c0 6.6 5.4 12 12 12h301.9v46.1c0 21.4 25.9 32.1 41 17l86-86.1c9.4-9.4 9.4-24.6 0-34l-86-86c-15.1-15.1-41-4.4-41 17V216z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* hover zoals het origineel: donkergrijze knop met gele tekst en pijl */
.knop-pijl:hover { background: #353535; color: var(--geel); }
/* zichtbare toetsenbordfocus; in het zwarte vragenblok een witte ring */
.knop-pijl:focus-visible { outline: 3px solid var(--inkt); outline-offset: 3px; }
.vragenblok .knop-pijl:focus-visible { outline-color: var(--wit); }

/* Breekt de knoptekst op mobiel over twee regels, dan hoort de pijl gewoon
   achter het laatste woord mee te lopen. Alleen right: auto liet de basis-top
   (50%) staan, waardoor de pijl los tussen de regels zweefde — in de flow
   zetten lost beide assen op. */
@media (max-width: 767px) {
    .knop-pijl::after {
        position: static; display: inline-block; right: auto; top: auto;
        vertical-align: -4px; margin-left: 8px;
    }
}

/* Gele knop over de volle rijbreedte ("Terug naar …"), met een variant die een
   pijl naar links achter de tekst zet. Staat op alle losse dienstpagina's. */
.knop-balk {
    display: block;
    width: 100%;
    background: var(--geel);
    color: var(--inkt);
    border: 2px solid transparent;
    border-radius: 8px; /* kaartenronde: zelfde hoekmaat als de knoppen */
    font-size: 20px;
    line-height: 34px;
    font-weight: 500;
    padding: 6px 20px;
    text-align: center;
    transition: background-color .3s ease, color .3s ease;
}
.knop-balk:hover { background: var(--inkt); color: var(--geel); }
.knop-balk:focus-visible { outline: 3px solid var(--inkt); outline-offset: 2px; }

.knop-balk.terug { padding: 6px 40px 6px 14px; }
.knop-balk.terug::after {
    content: "";
    display: inline-block;
    width: 17.5px;
    height: 20px;
    margin-left: .3em;
    vertical-align: -2px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M134.1 296H436c6.6 0 12-5.4 12-12v-56c0-6.6-5.4-12-12-12H134.1v-46.1c0-21.4-25.9-32.1-41-17L7 239c-9.4 9.4-9.4 24.6 0 34l86.1 86c15.1 15.1 41 4.4 41-17V296z'/%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 448 512'%3E%3Cpath d='M134.1 296H436c6.6 0 12-5.4 12-12v-56c0-6.6-5.4-12-12-12H134.1v-46.1c0-21.4-25.9-32.1-41-17L7 239c-9.4 9.4-9.4 24.6 0 34l86.1 86c15.1 15.1 41 4.4 41-17V296z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Volle gele knop zonder pijl (kaartknop). */
.knop-vol {
    display: block;
    background: var(--geel);
    color: var(--inkt);
    border: 2px solid transparent;
    border-radius: 1px;
    font-size: 20px;
    line-height: 34px;
    font-weight: 500;
    padding: 6px 20px;
    text-align: center;
    transition: width .3s ease, max-width .3s ease;
}

/* =========================================================================
   6. Vragenblok — zwarte call-to-action "Zit je met vragen?"
   ========================================================================= */

.vragenblok { background: var(--inkt); color: var(--wit); padding: 40px 60px; text-align: center; }
.vragenblok h2 {
    margin: 0 0 20px;
    padding-bottom: 10px;
    font-size: 30px; line-height: 30px; font-weight: 700;
    color: var(--geel);
}
@media (max-width: 767px) {
    .vragenblok { padding: 40px; }
    .vragenblok .knop-pijl { display: block; }
}

/* Drie smaken die het origineel per plek gebruikt:
   .strak  — /diensten/afbraak-en-sloopwerken/ en /diensten/chroom-6/: de
             zwarte balk sluit strak om titel en knop (90px hoog op elke breedte)
   .smal   — het blok in een 2/5-kolom (/over-ons/): Divi verkleint de h2 daar
             van 32 naar 23px en gebruikt rondom 40px
   .offerte — de offerte-CTA in de zijkolom van /contact/: witte titel en een
             knop zonder verticale opvulling                                  */
.vragenblok.strak { padding: 0; }
.vragenblok.strak h2 { margin-bottom: 0; }

.vragenblok.smal { padding: 40px; }
.vragenblok.smal h2 { font-size: 23px; line-height: 23px; }

.vragenblok.offerte { padding: 30px 40px; }
.vragenblok.offerte h2 { color: var(--wit); }
.vragenblok.offerte .knop-pijl { padding: 0 40px 0 14px; }

@media (max-width: 767px) {
    .vragenblok.offerte { padding: 30px 40px; }
    .vragenblok.strak .knop-pijl,
    .vragenblok.offerte .knop-pijl { display: inline-block; }
}

/* =========================================================================
   7. Dienstkaarten (raster van 2, foto 2:1 + zwarte balk + gele knop)
   ========================================================================= */

.dienstgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 43px 0 18px;
}
/* Eén samenhangende kaart (opknapronde t.o.v. het origineel): de foto zit
   ín de kaart — de 10px-overhang van het origineel is losgelaten — met
   ronde hoeken, zachte schaduw en een subtiele lift + fotozoom bij hover. */
.dienstkaart {
    position: relative;
    background: var(--inkt);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(3, 3, 3, .12);
    transition: transform .25s ease, box-shadow .25s ease;
}
.dienstkaart-beeld {
    position: relative;
    padding-bottom: 50%;
    overflow: hidden;
}
.dienstkaart-beeld img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .45s ease;
}
.dienstkaart-titel {
    margin: 0; padding: 18px 16px 0;
    font-size: 20px; line-height: 1.2; font-weight: 700;
    color: var(--geel); text-align: center;
}
.dienstkaart .knop-vol {
    width: fit-content; margin: 14px auto 18px; padding: 8px 30px;
    font-size: 17px; line-height: 1.4; border-radius: 8px;
    transition: background-color .2s ease;
}
@media (hover: hover) {
    .dienstkaart:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(3, 3, 3, .22); }
    .dienstkaart:hover .dienstkaart-beeld img { transform: scale(1.05); }
    .dienstkaart .knop-vol:hover { background: var(--wit); }
}

@media (max-width: 767px) {
    /* op telefoon staat er in het origineel 20px extra onder het raster */
    .dienstgrid { grid-template-columns: 1fr; margin-bottom: 38px; }
}

/* =========================================================================
   8. Projectkaarten + filterbalk (/projecten/ en /projecten/categorie/*)
   ========================================================================= */

/* Filterpillen: losse zwarte pillen op de paginagrond (het zwarte
   balkblok van het origineel is losgelaten); de actieve pil is geel. */
.filterbalk { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; line-height: 1.35; font-weight: 700; }
.filterbalk a, .filterbalk button {
    display: block; padding: 8px 20px; margin: 0; border: 0; border-radius: 999px;
    background: var(--inkt); color: var(--geel);
    font: inherit; cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.filterbalk .actief { background: var(--geel); color: var(--inkt); }

/* Kier van 20px; projecten.js gebruikt dezelfde maat (TUSSEN) voor de
   rijoverspanning van het metselwerk — samen houden. */
.projectgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
/* flexkolom zodat titel en knop netjes stapelen; verder dezelfde
   kaarttaal als de dienstkaarten (ronde hoeken, schaduw, lift) */
.projectkaart {
    background: var(--inkt); display: flex; flex-direction: column;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(3, 3, 3, .12);
    transition: transform .25s ease, box-shadow .25s ease;
}
.projectkaart img { width: 100%; height: auto; display: block; }
.projectkaart[hidden] { display: none; }
.projectkaart h2, .projectkaart h3, .projectkaart .projectkaart-titel {
    margin: 14px 16px 0; padding: 0;
    font-size: 18px; line-height: 1.25; font-weight: 700; color: var(--wit);
}
.projectkaart .knop-vol {
    width: fit-content; margin: 12px 16px 16px; padding: 8px 26px;
    font-size: 17px; line-height: 1.4; border-radius: 8px;
    transition: background-color .2s ease;
}
@media (hover: hover) {
    .projectkaart:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(3, 3, 3, .22); }
    .projectkaart .knop-vol:hover { background: var(--wit); }
}

@media (max-width: 980px) { .projectgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .projectgrid { grid-template-columns: 1fr; } }

/* Wie minder beweging wil: kaarten en pillen zonder overgangen. */
@media (prefers-reduced-motion: reduce) {
    .dienstkaart, .dienstkaart-beeld img, .dienstkaart .knop-vol,
    .projectkaart, .projectkaart .knop-vol,
    .filterbalk a, .filterbalk button { transition: none !important; }
}

/* =========================================================================
   9. Zijbalk "Bedrijfsgegevens" met sociale iconen
   ========================================================================= */

/* Divi-kolommen 3/5 + 2/5 met 5,5% tussenruimte. */
.kolommen { display: flex; gap: 5.5%; }
.kolommen > .hoofdkolom { width: 57.8%; }
.kolommen > .zijkolom { width: 36.7%; }
@media (max-width: 980px) {
    .kolommen { flex-direction: column; gap: 30px; }
    .kolommen > .hoofdkolom, .kolommen > .zijkolom { width: 100%; }
}

.zijbalk-bedrijf h2, .zijbalk-bedrijf h3 {
    margin: 0; padding-bottom: 10px;
    font-size: 20px; line-height: 20px; font-weight: 700;
}
.zijbalk-bedrijf p { margin: 0; padding-bottom: 16px; line-height: 19.2px; }
.zijbalk-bedrijf p:last-of-type { padding-bottom: 0; }
.zijbalk-bedrijf strong { font-weight: 700; }
.sociale-iconen { list-style: none; margin: 30px 0 0; padding: 0; display: flex; gap: 14px; }
.sociale-iconen a {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--inkt); color: var(--wit);
}
.sociale-iconen svg { width: 16px; height: 16px; fill: currentColor; display: block; }

/* =========================================================================
   10. Formulier (Gravity-Forms-uiterlijk)
   ========================================================================= */

.formulier { color: #112337; }
.formulier .formulier-titel {
    margin: 0; padding-bottom: 10px;
    font-size: 30px; line-height: 30px; font-weight: 700; color: var(--inkt);
}
.formulier-velden {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 40px;
    margin: 0; padding: 0; border: 0;
}
.formulier-veld { min-width: 0; }
.formulier-veld.breed { grid-column: 1 / -1; }
.formulier label, .formulier legend {
    display: block; margin-bottom: 8px;
    font-size: 14px; line-height: 20.02px; font-weight: 500; color: #112337;
}
.formulier .vereist { color: #c02b0a; font-size: 12px; line-height: 17.16px; font-weight: 500; }
.formulier .hulptekst, .formulier .subveld > label {
    margin-bottom: 8px;
    font-size: 13px; line-height: 18.59px; font-weight: 400; color: #585e6a;
}
.formulier input[type=text], .formulier input[type=email], .formulier input[type=tel],
.formulier input[type=url], .formulier input[type=number], .formulier select, .formulier textarea {
    display: block; width: 100%;
    background: var(--wit); color: #112337;
    border: 1px solid #686e77; border-radius: 3px;
    font-family: inherit; font-size: 14px; font-weight: 400;
}
.formulier input, .formulier select { height: 38px; line-height: 38px; padding: 0 12px; }
.formulier textarea { min-height: 192px; line-height: 21px; padding: 12px; resize: vertical; }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { outline: 2px solid var(--geel); outline-offset: 0; }
.formulier .subvelden { display: flex; gap: 12px; }
.formulier .subveld { flex: 1 1 0; min-width: 0; }
.formulier .keuzes { display: block; }
.formulier .keuze { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.formulier .keuze input { width: auto; height: auto; line-height: normal; padding: 0; margin-top: 3px; }
.formulier .keuze label { margin: 0; font-weight: 400; }
/* Foutweergave — de klassenamen zijn het contract met
   App\Services\SchoonFormulierRenderer (scripts/herbouw/FORMULIEREN.md §2):
   .veldfout krijgt de tekst, .heeft-fout komt op de omhullende veld-div en
   .formulier-melding draagt de samenvatting of de bevestiging. */
.veldfout {
    margin: 6px 0 0;
    font-size: 13px; line-height: 18.59px; font-weight: 400; color: #c02b0a;
}
.veldfout:empty, .formulier-melding:empty { display: none; }

.formulier-melding {
    margin-bottom: 24px; padding: 12px 16px; border-radius: 3px;
    font-size: 14px; line-height: 20.02px; font-weight: 500;
}
.formulier-melding.is-fout { background: #fdecea; border: 1px solid #c02b0a; color: #8c1f07; }
.formulier-melding.is-bevestiging {
    margin: 0; padding: 30px 40px; border-radius: 0;
    background: var(--inkt); color: var(--geel);
    font-size: 20px; line-height: 30px; font-weight: 500;
}
.formulier-melding.is-bevestiging:focus-visible { outline: 3px solid var(--geel); outline-offset: 3px; }

.heeft-fout input, .heeft-fout textarea, .heeft-fout select,
.heeft-fout .upload-vak { border-color: #c02b0a; }
.formulier-voet { margin-top: 24px; }
.formulier-voet button, .formulier-voet input[type=submit] {
    display: inline-flex; align-items: center;
    height: 38px; padding: 0 16px;
    background: var(--geel); color: #000;
    border: 1px solid transparent; border-radius: 3px;
    font-family: inherit; font-size: 14px; line-height: 14px; font-weight: 500;
    cursor: pointer;
}
.formulier-voet button:hover { background: #353535; color: var(--geel); }
.formulier .honeypot { position: absolute; left: -9999px; }

@media (max-width: 767px) {
    .formulier-velden { grid-template-columns: 1fr; }
    .formulier .subvelden { flex-direction: column; gap: 0; }
    .formulier .subveld + .subveld { margin-top: 12px; }
}

/* =========================================================================
   11. Achtergronden van de paginakoppen (per pagina)
   ========================================================================= */

.kop-certificering  { background-image: url(/wp-content/uploads/2024/07/verboden-toegang-asbest-sanering-scaled-1.jpg); }
.kop-contact,
.kop-offerte        { background-image: url(/wp-content/uploads/2024/07/20240723_135104.jpg); background-position: center top 48%; }
.kop-diensten,
.kop-onze-werking   { background-image: url(/wp-content/uploads/2024/07/asbestverwijderen-scaled-1.jpg); background-position: center bottom 42%; }
.kop-chroom-6       { background-image: url(/wp-content/uploads/2024/07/asbestverwijderen-scaled-1.jpg); }
.kop-afbraak        { background-image: url(/wp-content/uploads/2024/08/Afbeelding-van-WhatsApp-op-2024-07-31-om-08.39.25_777731b5.jpg); background-position: center top 50%; }
.kop-asbestverwijdering { background-image: url(/wp-content/uploads/2024/07/asbestverwijderen-2-1.jpg); background-position: center top 38%; }
.kop-couveusezak    { background-image: url(/wp-content/uploads/2024/07/unnamed-file-scaled.webp); background-position: center top 38%; }
.kop-eenvoudige-handelingen { background-image: url(/wp-content/uploads/2024/08/asbest-verwijdering.jpg); background-position: center bottom 38%; }
.kop-hermetische-zone { background-image: url(/wp-content/uploads/2024/07/dta-asbest.jpg); background-position: center top 38%; }
.kop-bodemsaneringen { background-image: url(/wp-content/uploads/2024/08/DJI_0056.00_01_14_19.Still001-scaled.jpg); background-position: center top 34%; }
.kop-project        { background-image: url(/wp-content/uploads/2024/07/dta-asbest-3e0143e1.webp); background-position: center top 46%; }

@media (max-width: 980px) {
    .kop-contact, .kop-offerte { background-position: center bottom 80%; }
    .kop-diensten, .kop-onze-werking { background-position: center bottom 35%; }
    .kop-afbraak { background-position: center top 35%; }
    .kop-asbestverwijdering, .kop-couveusezak, .kop-hermetische-zone, .kop-bodemsaneringen { background-position: center top 35%; }
    .kop-eenvoudige-handelingen { background-position: center bottom 35%; }
    .kop-diensten { min-height: 360px; }
    .kop-afbraak { min-height: 335px; }
}
@media (max-width: 767px) {
    .kop-contact, .kop-offerte { background-position: center top -15%; }
    .kop-diensten { min-height: 282px; }
    .kop-afbraak { min-height: 350px; }
}

/* =========================================================================
   12. Veelgestelde vragen — accordeon onderaan de dienst-/methodepagina's
   ========================================================================= */

/* Bewust <details>/<summary>: openklappen werkt dan zonder JavaScript, de
   schermlezer kent het patroon al en we hoeven geen eigen scriptje te
   onderhouden. De sectie staat op de grijze paginagrond, dus de vragen
   zijn witte kaarten; een open vraag krijgt de zwarte balk met het gele
   teken — dezelfde zwart/geel/wit-taal als de rest van de site.
   De markup staat in resources/views/site/deel-faq.blade.php.            */

.vragenlijst-kop {
    margin: 0 0 22px;
    font-size: 32px; line-height: 32px; font-weight: 700;
    color: var(--inkt);
}
/* gele streep onder de kop: dezelfde accentkleur als de knoppen */
.vragenlijst-kop::after {
    content: "";
    display: block;
    width: 56px; height: 4px;
    margin-top: 12px;
    border-radius: 2px;
    background: var(--geel);
}

.vragenlijst-items { display: flex; flex-direction: column; gap: 12px; }

.vraag {
    background: var(--wit);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(3, 3, 3, .10);
    transition: box-shadow .25s ease;
}
.vraag[open] { box-shadow: 0 8px 22px rgba(3, 3, 3, .16); }

.vraag > summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    font-size: 18px; line-height: 1.35; font-weight: 700;
    color: var(--inkt);
    cursor: pointer;
    /* het standaard driehoekje weg: display:flex volstaat niet overal */
    list-style: none;
    /* klikken op de balk klapt open, het selecteert geen tekst */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, color .2s ease;
}
.vraag > summary::-webkit-details-marker { display: none; }

/* Gele schijf met een plus die bij het openklappen een min wordt: het
   plusteken zijn twee balkjes in de achtergrond, de verticale krimpt weg. */
.vraag > summary::after {
    content: "";
    flex: 0 0 26px;
    width: 26px; height: 26px;
    margin-left: auto;
    border-radius: 50%;
    background-color: var(--geel);
    background-image:
        linear-gradient(var(--inkt), var(--inkt)),
        linear-gradient(var(--inkt), var(--inkt));
    background-repeat: no-repeat;
    background-position: center, center;
    background-size: 12px 2px, 2px 12px;
    transition: background-size .2s ease;
}
.vraag[open] > summary::after { background-size: 12px 2px, 2px 0; }

.vraag[open] > summary { background: var(--inkt); color: var(--wit); }
/* Hover blijft lichter dan de grijze paginagrond: de kaart mag er niet in
   oplossen zodra de muis erover gaat. */
@media (hover: hover) {
    .vraag > summary:hover { background: #f4f4f4; }
    .vraag[open] > summary:hover { background: #1c1c1c; }
}
/* zichtbare toetsenbordfocus; op de zwarte balk in het geel */
.vraag > summary:focus-visible { outline: 3px solid var(--inkt); outline-offset: -3px; }
.vraag[open] > summary:focus-visible { outline-color: var(--geel); }

.vraag-antwoord { padding: 16px 20px 20px; }
.vraag-antwoord p {
    margin: 0;
    font-size: 16px; line-height: 1.5; font-weight: 300;
    /* het antwoord is platte tekst uit het beheer: regeleindes die de
       redacteur daar typte blijven staan, extra spaties worden gedrukt */
    white-space: pre-line;
}

/* Telefoon (incl. 412px): kleinere kop, krappere opvulling — de vraag mag
   over meerdere regels lopen, het plus/min-teken blijft rechts staan. */
@media (max-width: 767px) {
    .vragenlijst-kop { margin-bottom: 18px; font-size: 26px; line-height: 30px; }
    .vragenlijst-kop::after { margin-top: 10px; }
    .vraag > summary { gap: 12px; padding: 14px 16px; font-size: 16px; }
    .vraag-antwoord { padding: 14px 16px 18px; }
    .vraag-antwoord p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .vraag, .vraag > summary, .vraag > summary::after { transition: none !important; }
}