/*
Theme Name: Bouwstock Dewulf
Author: Emiel Dewulf
Author URI: https://emieldewulf.be
Description: Maatwerkthema voor Bouwstock Dewulf.
Version: 1.0
Text Domain: bouwstock-dewulf
Requires at least: 5.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
*/

/* Tekst: 16px (Figma 17, op gsm 15, afgerond naar de reeks) */
body {
    color: var(--dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Het hidden-attribuut wint van display-utilities (bv. flex) op elementen die JS verbergt */
[hidden].flex,
[hidden].grid,
[hidden].block { display: none; }

/* Knoppen en velden nemen het lettertype van de pagina over (browsers gebruiken anders hun systeemletter) */
button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* Display en h1 zijn Regular met iets strakkere spatiëring; h2 t.e.m. h6 Medium (--heading-weight) */
.display, h1, .h1 {
    font-weight: 400;
    letter-spacing: -0.025em;
}

section[id] {
    scroll-margin-top: 120px;
}

/* Knop (ed_knop in inc/componenten.php): bij hover groeit een cirkel in --btn-fill vanaf het punt waar de muis
   binnenkomt, en krimpt bij het verlaten terug naar het punt waar ze buitengaat (main.js zet --btn-x, --btn-y en
   --btn-w; zonder JS vanuit het midden). De tekst wordt --btn-text. Kleuren per variant staan in ed_knop. */
.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1), scale 0.15s ease-out;
}

.btn::before {
    content: "";
    position: absolute;
    top: var(--btn-y, 50%);
    left: var(--btn-x, 50%);
    z-index: -1;
    width: var(--btn-w, 150%);
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--btn-fill);
    translate: -50% -50%;
    scale: 0;
    transition: scale 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

.btn:focus-visible { color: var(--btn-text); }
.btn:focus-visible::before { scale: 1; }
.btn:active { scale: 0.97; }

@media (hover: hover) {
    .btn:hover { color: var(--btn-text); }
    .btn:hover::before { scale: 1; }
}

/* Statusbolletje van de openingsuren (ed_openingsuren_status, kleur via data-status uit openingsuren.js):
   kern met een halo, die bij "open" zacht pulseert */
.status-dot {
    --dot: color-mix(in srgb, currentColor 40%, transparent);
    position: relative;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--dot) 22%, transparent);
}

.status-dot::after {
    content: "";
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background-color: var(--dot);
}

.status-dot--klein { width: 0.375rem; height: 0.375rem; background: none; }
.status-dot--klein::after { inset: 0; }

[data-status="open"] .status-dot { --dot: var(--primary); }
[data-status="pauze"] .status-dot { --dot: #DBB000; }
[data-status="gesloten"] .status-dot { --dot: color-mix(in srgb, currentColor 40%, transparent); }

/* Statuslabel in de openingsuren-popup: groen bij open, geel bij middagpauze, grijs bij gesloten */
.status-pil { background-color: color-mix(in srgb, var(--dark) 6%, transparent); color: var(--muted); }
.status-pil[data-status="open"] { background-color: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.status-pil[data-status="pauze"] { background-color: color-mix(in srgb, var(--secondary) 50%, transparent); color: var(--dark); }
.status-pil[data-status="open"] .status-dot--klein { --dot: var(--primary); }

/* Openingsuren-popup: de rij van vandaag (openingsuren.js) is grijs en vet, met het label "Vandaag" (niet op gsm) */
.openingsuren__vandaag { display: none; }
.openingsuren__dag.is-vandaag { background-color: var(--light); font-weight: 600; }
.openingsuren__dag.is-vandaag .openingsuren__vandaag { display: inline-flex; }

@media (max-width: 767px) {
    .openingsuren__dag.is-vandaag .openingsuren__vandaag { display: none; }
}


[data-status="open"] .status-dot:not(.status-dot--klein)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--dot);
    opacity: 0.5;
    animation: status-puls 2s ease-out infinite;
}

@keyframes status-puls {
    to { scale: 1.8; opacity: 0; }
}

/* Scroll naar boven (zichtbaar na 400px scrollen, zie main.js) */
.scrollToTop {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.scrollToTop.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Link die de hele kaart klikbaar maakt (titel van een kaart) */
.link--cover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.link--cover:focus-visible { outline: none; }
.kaart:has(.link--cover:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Geel gemarkeerd deel van een titel (ed_sectiekop): "Vragen over <mark>ijzerwaren?</mark>" */
.markering {
    padding-inline: 0.15em;
    background-color: var(--secondary);
    color: var(--dark);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Kaarten (inc/componenten/kaarten.php): titel groen, pijl groen gevuld, foto zoomt licht in */
.kaart__foto { transition: scale 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }

@media (hover: hover) {
    .kaart:hover .kaart__titel,
    .kaart:hover .kaart__voet { color: var(--primary); }
    .kaart:hover .kaart__foto { scale: 1.03; }
    .kaart:hover .kaart__pijl-klein { translate: 0.25rem 0; }
}

/* Voorraadstatus op een productkaart: groen bij op voorraad, geel bij op bestelling */
.kaart__status { box-shadow: 0 2px 8px color-mix(in srgb, var(--black) 8%, transparent); }
.kaart__status[data-voorraad="op_voorraad"] .status-dot { --dot: var(--primary); }
.kaart__status[data-voorraad="op_bestelling"] .status-dot { --dot: #DBB000; }

/* Winkel-subcategorie onder de sticky header als je via een #anker binnenkomt, en even oplichten */
.lijst-rij { scroll-margin-top: 10rem; }
.lijst-rij:first-child { border-top-width: 0; }
.lijst-rij:target { animation: rij-oplichten 2s ease-out; }

@keyframes rij-oplichten {
    from { background-color: color-mix(in srgb, var(--secondary) 50%, transparent); }
}

/* FAQ (ed_faq): native <details>, plus/min in een cirkel die geel wordt als de vraag open is */
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq__vraag[open] .faq__icoon { background-color: var(--secondary); border-color: var(--secondary); }
.faq__vraag[open] .faq__plus,
.faq__vraag:not([open]) .faq__min { display: none; }

/* Formuliersectie: een zwevende <legend> is een gewoon onderdeel van de inhoud (niet op de rand van de fieldset) */
.formsectie > legend,
.filter-legend { float: left; width: 100%; padding: 0; }

/* Formulier (inc/componenten/formulier.php). Velden minstens 16px (anders zoomt iOS in). */
.veld input,
.veld textarea,
.veld select {
    width: 100%;
    min-height: 3.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background-color: var(--light);
    color: var(--dark);
    font: inherit;
    font-size: 1rem;
    transition: border-color 0.2s, background-color 0.2s;
    appearance: none;
}

.veld textarea { resize: vertical; }
.veld input::placeholder,
.veld textarea::placeholder { color: var(--muted); }

.veld input:focus,
.veld textarea:focus,
.veld select:focus {
    outline: none;
    border-color: var(--primary);
    background-color: var(--white);
}

.veld:has(.veld__icoon) input { padding-left: 2.75rem; }
.veld:has(select) select,
.veld.is-ok input { padding-right: 2.75rem; }

.veld__ok { display: none; }
.veld.is-ok .veld__ok { display: flex; }
.veld.is-ok :is(input, textarea, select) { border-color: color-mix(in srgb, var(--primary) 50%, transparent); }

.veld.is-fout :is(input, textarea, select) {
    border: 1.5px solid var(--fout);
    background-color: var(--white);
}

.veld.is-fout .veld__uitleg { color: var(--fout); }

.foutoverzicht {
    background-color: color-mix(in srgb, var(--fout) 6%, transparent);
    border-color: color-mix(in srgb, var(--fout) 35%, transparent);
}

.foutoverzicht > svg { color: var(--fout); }

/* Keuzekaart (radio), vinkje en schakelaar: de echte input is verborgen (sr-only), de opmaak volgt :checked */
.keuzekaart:has(input:checked) {
    border: 2px solid var(--primary);
    background-color: color-mix(in srgb, var(--primary) 6%, transparent);
}

.keuzekaart:has(input:checked) .keuzekaart__icoon { background-color: var(--primary); color: var(--white); }
.keuzekaart:has(input:checked) .keuzekaart__radio,
.vinkje:has(input:checked) .vinkje__vak { background-color: var(--primary); border-color: var(--primary); }
.keuzekaart__radio svg,
.vinkje__vak svg { opacity: 0; }
.keuzekaart:has(input:checked) .keuzekaart__radio svg,
.vinkje:has(input:checked) .vinkje__vak svg { opacity: 1; }

.schakelaar__baan::after {
    content: "";
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background-color: var(--white);
    transition: translate 0.2s ease-out;
}

.schakelaar:has(input:checked) .schakelaar__baan { background-color: var(--primary); }
.schakelaar:has(input:checked) .schakelaar__baan::after { translate: 1.5rem 0; }

:is(.keuzekaart, .vinkje, .schakelaar, .upload):has(input:focus-visible),
.upload:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }

.vinkje:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }

/* Filters (subcategorie): chips in het filtervenster, sorteerkeuze */
.filter-chip:has(input:checked) span { background-color: var(--dark); border-color: var(--dark); color: var(--white); }
.filter-chip:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }
.filter-chip:has(input:focus-visible) span { outline: 2px solid var(--primary); outline-offset: 2px; }
.sorteer select { appearance: none; }
.pillen { scrollbar-width: none; }

/* "Over deze categorie": 3 regels tot je op Lees meer klikt (main.js) */
.uitklap:not(.is-open) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.uitklap > * { margin-block: 0 1rem; }
[aria-expanded="true"] > .icon--flip { rotate: 180deg; }

/* Winkelcategorie: kaarten zonder zoom op de foto */
.kaart--winkel:hover .kaart__foto { scale: 1; }

/* Upload-zone: stippellijn; licht groen als er een bestand boven hangt (upload.js zet .is-erboven) */
.upload { border: 1.5px dashed color-mix(in srgb, var(--primary) 50%, transparent); }
.upload.is-erboven,
.upload:hover { background-color: color-mix(in srgb, var(--primary) 10%, transparent); }

/* Foto met punten: matglas paneel */
.glas { box-shadow: 0 16px 40px color-mix(in srgb, var(--black) 12%, transparent); }

@media (max-width: 767px) {
    .glas { inset: 1rem 1rem auto; }
}

/* Venster (<dialog>, venster.js): midden of rechts op desktop, bottom sheet op gsm */
.venster {
    width: min(37.5rem, 100% - 2rem);
    max-height: calc(100dvh - 2rem);
    border-radius: 1rem;
    box-shadow: 0 16px 48px color-mix(in srgb, var(--black) 20%, transparent);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.venster::backdrop {
    background-color: color-mix(in srgb, var(--dark) 40%, transparent);
    backdrop-filter: blur(2px);
}

.venster[open] { animation: venster-in 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.venster[open]::backdrop { animation: vervagen 0.3s ease-out; }
.venster.is-sluiten { animation: venster-uit 0.25s ease-in forwards; }
.venster.is-sluiten::backdrop { animation: vervagen 0.25s ease-in reverse forwards; }

/* Paneel: rechts, volle hoogte (bv. "Toegevoegd aan uw offerte") */
.venster--paneel {
    width: min(26.25rem, 100% - 2rem);
    margin: 1rem 1rem 1rem auto;
}

.venster--paneel[open] { animation-name: paneel-in; }
.venster--paneel.is-sluiten { animation-name: paneel-uit; }

/* Greep bovenaan een bottom sheet */
.venster__greep { display: none; }

@media (max-width: 767px) {
    .venster,
    .venster--paneel {
        width: 100%;
        max-width: 100%;
        max-height: 90dvh;
        margin: auto 0 0;
        border-radius: 1.25rem 1.25rem 0 0;
    }

    .venster__greep {
        display: block;
        align-self: center;
        width: 2.5rem;
        height: 0.25rem;
        border-radius: 0.125rem;
        background-color: color-mix(in srgb, var(--dark) 15%, transparent);
    }

    .venster[open],
    .venster--paneel[open] { animation-name: sheet-in; }
    .venster.is-sluiten,
    .venster--paneel.is-sluiten { animation-name: sheet-uit; }
}

/* Sheet: ook op desktop onderaan */
.venster--sheet {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: 1.25rem 1.25rem 0 0;
}

.venster--sheet .venster__greep { display: block; }
.venster--sheet[open] { animation-name: sheet-in; }
.venster--sheet.is-sluiten { animation-name: sheet-uit; }

/* Zijbalk: links, volle hoogte op desktop (filters); op gsm een bottom sheet */
@media (min-width: 768px) {
    .venster--zijbalk {
        width: min(26.25rem, 100% - 2rem);
        height: 100dvh;
        max-height: 100dvh;
        margin: 0 auto 0 0;
        border-radius: 0 1rem 1rem 0;
    }

    .venster--zijbalk[open] { animation-name: zijbalk-in; }
    .venster--zijbalk.is-sluiten { animation-name: zijbalk-uit; }

    /* Knoppen onderaan vast, de filters scrollen erboven */
    .venster--zijbalk > div { min-height: 100%; }
    .venster--zijbalk > div > :last-child { position: sticky; bottom: 0; margin-top: auto; padding-block: 1rem 2rem; margin-bottom: -2rem; background-color: var(--white); }
}

@media (max-width: 767px) {
    .venster--zijbalk {
        width: 100%;
        max-width: 100%;
        max-height: 90dvh;
        margin: auto 0 0;
        border-radius: 1.25rem 1.25rem 0 0;
    }

    .venster--zijbalk .venster__greep { display: block; }
    .venster--zijbalk[open] { animation-name: sheet-in; }
    .venster--zijbalk.is-sluiten { animation-name: sheet-uit; }
}

@keyframes zijbalk-in { from { translate: -100% 0; } }
@keyframes zijbalk-uit { to { translate: -100% 0; } }
@keyframes venster-in { from { opacity: 0; translate: 0 0.75rem; scale: 0.96; } }
@keyframes venster-uit { to { opacity: 0; translate: 0 0.75rem; scale: 0.96; } }
@keyframes paneel-in { from { translate: 100% 0; } }
@keyframes paneel-uit { to { translate: calc(100% + 1rem) 0; } }
@keyframes sheet-in { from { translate: 0 100%; } }
@keyframes sheet-uit { to { translate: 0 100%; } }
@keyframes vervagen { from { opacity: 0; } }

/* ==========================================================================
   Productpagina (single-product.php, inc/componenten/product.php)
   ========================================================================== */

/* Galerij links (sticky onder de header), configurator rechts: 680 / 544 zoals in Figma */
.product__hero { grid-template-columns: minmax(0, 680fr) minmax(0, 544fr); align-items: start; }

@media (min-width: 1025px) {
    .product__galerij { position: sticky; top: calc(var(--header-onder, 0px) + 2rem); transition: top 0.35s cubic-bezier(0.33, 1, 0.68, 1); }
}

@media (max-width: 1024px) {
    .product__hero { grid-template-columns: minmax(0, 1fr); }
}

/* Galerij: scroll-snap spoor, duimnagels (desktop), bolletjes (gsm) */
.galerij__hoofd {
    aspect-ratio: 17 / 15;
    border: 1px solid color-mix(in srgb, var(--dark) 8%, transparent);
    border-radius: 0.75rem;
}

.galerij__spoor {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.galerij__spoor::-webkit-scrollbar { display: none; }
.galerij__dia { scroll-snap-align: start; }

.galerij__duim {
    aspect-ratio: 158 / 110;
    border: 2px solid transparent;
}

.galerij__duim.is-actief,
.galerij__duim:hover { border-color: var(--primary); }

.galerij__bolletjes { bottom: 0.75rem; }

.galerij__bolletje {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 0.1875rem;
    background-color: color-mix(in srgb, var(--dark) 20%, transparent);
    transition: width 0.3s, background-color 0.3s;
}

.galerij__bolletje.is-actief { width: 1.125rem; background-color: color-mix(in srgb, var(--dark) 80%, transparent); }

@media (max-width: 767px) {
    .galerij__hoofd { aspect-ratio: auto; height: 18.75rem; border: 0; border-radius: 0; }
}

.product__titel { line-height: 1.125; letter-spacing: -0.02em; }
.galerij__groot { max-height: 75vh; }

/* Voorraad onder de titel */
.product__voorraad[data-voorraad="op_voorraad"] .status-dot { --dot: var(--primary); }
.product__voorraad[data-voorraad="op_voorraad"] .product__voorraad-label { color: var(--primary); }
.product__voorraad[data-voorraad="op_bestelling"] .status-dot { --dot: #DBB000; }

/* Configurator: stap-titel als zwevende legend, bolletje wordt groen zodra de stap ingevuld is */
.configurator__titel { float: left; }
.configurator__titel + * { clear: both; }
.configurator__status { background-color: color-mix(in srgb, var(--dark) 15%, transparent); }
.configurator__status svg { opacity: 0; transition: opacity 0.2s; }
.configurator__status.is-klaar { background-color: var(--primary); }
.configurator__status.is-klaar svg { opacity: 1; }
.is-fout .configurator__status { background-color: var(--fout); }

/* Tegel (doorsnede): rand en vinkje volgen de radioknop; tekening van het profiel op schaal */
.tegel { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dark) 12%, transparent); }
.tegel:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dark) 40%, transparent); }
.tegel:has(input:checked) { box-shadow: inset 0 0 0 2px var(--primary); }
.is-fout .tegel { box-shadow: inset 0 0 0 1px var(--fout); }

.tegel__profiel {
    border: 1.2px solid color-mix(in srgb, var(--dark) 35%, transparent);
    border-radius: 2px;
    background-color: color-mix(in srgb, var(--dark) 6%, transparent);
    transition: background-color 0.2s, border-color 0.2s;
}

.tegel:has(input:checked) .tegel__profiel { border-color: var(--primary); background-color: color-mix(in srgb, var(--primary) 18%, transparent); }

.tegel__radio { border: 1.5px solid color-mix(in srgb, var(--dark) 25%, transparent); }
.tegel__radio svg { opacity: 0; }
.tegel:has(input:checked) .tegel__radio { border-color: var(--primary); background-color: var(--primary); }
.tegel:has(input:checked) .tegel__radio svg { opacity: 1; }

/* Keuzepil (lengte): zwart als gekozen, "Op maat" groen */
.keuzepil:hover span { border-color: var(--dark); }
.keuzepil:has(input:checked) span { border-color: var(--dark); background-color: var(--dark); color: var(--white); }
.keuzepil--op-maat:has(input:checked) span { border-color: var(--primary); background-color: var(--primary); }
.is-fout .keuzepil span { border-color: var(--fout); }
.keuzepil:has(input:disabled) { cursor: not-allowed; }
.keuzepil:has(input:disabled) span { opacity: 0.35; text-decoration: line-through; border-color: color-mix(in srgb, var(--dark) 10%, transparent); }

:is(.tegel, .keuzepil):has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

.configurator__fout { color: var(--fout); }
.stapper { gap: 0.25rem; padding: 0.25rem; }

/* Getalvelden zonder pijltjes (stapper, zaaglijst); de focus staat op het vak eromheen */
.stapper__waarde,
.zaaglijst input { appearance: textfield; -moz-appearance: textfield; outline: 0; }
.stapper__waarde::-webkit-inner-spin-button,
.zaaglijst input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.stapper__waarde:focus-visible { box-shadow: inset 0 -2px 0 var(--primary); }

/* Zaaglijst bij "Op maat" */
.zaaglijst:not([hidden]) { animation: zaaglijst-open 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.zaaglijst__veld { transition: background-color 0.2s, box-shadow 0.2s; }
.zaaglijst__veld:focus-within { background-color: var(--white); box-shadow: inset 0 0 0 1.5px var(--primary); }
.zaaglijst__regel.is-nieuw { animation: vervagen 0.3s ease-out; }

@keyframes zaaglijst-open { from { opacity: 0; translate: 0 -0.5rem; } }

/* Sectienavigatie: sticky onder het zichtbare deel van de header (--header-onder, header.js) */
.sectienav { top: var(--header-onder, 0px); transition: top 0.35s cubic-bezier(0.33, 1, 0.68, 1); }
.sectienav ul { scrollbar-width: none; }
.sectienav__link { box-shadow: inset 0 -2px 0 transparent; }
.sectienav__link.is-actief { color: var(--dark); font-weight: 500; box-shadow: inset 0 -2px 0 var(--primary); }
[id="specificaties"], [id="maatgids"], [id="vergelijk"], [id="toepassingen"], [id="vragen"] { scroll-margin-top: calc(var(--header-onder, 0px) + 6rem); }

/* Infosecties: op desktop gewone secties, op gsm uitklapblokken (details.productblok, sectienav.js) */
.productsectie > .wrapper { padding-block: 6rem; }
.productsectie--licht { background-color: var(--light); }
.productsectie--groen { background-color: var(--primary); color: var(--white); }
.productsectie__zacht { color: color-mix(in srgb, currentColor 75%, transparent); }

.productblok__kop { list-style: none; }
.productblok__kop::-webkit-details-marker { display: none; }
.productblok[open] .productblok__chevron { rotate: 180deg; }

@media (min-width: 768px) {
    .productblok__kop { display: none; }
    .productblok::details-content { content-visibility: visible; block-size: auto; }
}

.fiche__rij { grid-template-columns: 10rem minmax(0, 1fr); }
.fiche__rij:last-child { border-bottom: 0; }

.maatgids { border-collapse: collapse; }
.maatgids :is(th, td) { padding: 0.75rem 1.25rem; text-align: left; }
.maatgids th { padding-block: 1rem; }
.maatgids td { border-top: 1px solid color-mix(in srgb, var(--dark) 6%, transparent); }
.maatgids tr.is-gekozen td { background-color: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary); font-weight: 600; }

.vergelijk__punt { border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.vergelijk__punt:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.productsectie--groen .vergelijk__nr { color: var(--secondary); }

@media (max-width: 767px) {
    .productinfo { padding-bottom: 1rem; }
    .productsectie > .wrapper { padding-block: 0; }
    .productsectie--licht,
    .productsectie--groen { background-color: transparent; color: inherit; }
    .productsectie--groen .vergelijk__nr { color: var(--primary); }
    .productblok { border-top: 1px solid color-mix(in srgb, var(--dark) 10%, transparent); }
    .productblok__inhoud { padding-bottom: 1.5rem; }
    .fiche__rij { grid-template-columns: 7.5rem minmax(0, 1fr); }
    .maatgids :is(th, td) { padding-inline: 0.75rem; }
}

/* Actiebalk onderaan op gsm (samenvatting + Toevoegen) */
.actiebalk { display: none; }

@media (max-width: 767px) {
    .actiebalk {
        display: flex;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 16px color-mix(in srgb, var(--black) 10%, transparent);
    }

    body.single-product { padding-bottom: 5.5rem; }
}

/* Zwevende offertebalk op gsm ("3 producten in uw offerte"), mandje.js toont hem */
.offertebalk {
    bottom: calc(1rem + env(safe-area-inset-bottom));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--black) 25%, transparent);
    animation: offertebalk-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes offertebalk-in { from { opacity: 0; translate: 0 1rem; } }

@media (min-width: 768px) {
    .offertebalk { display: none; }
}

/* Teller in de header springt even op bij een nieuw product (mandje.js) */
.mandje-knop__teller.is-bump { animation: teller-bump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes teller-bump { 40% { scale: 1.35; } }

/* ==========================================================================
   Offertemandje en aanvraag (page-offertemandje.php, page-offerte-aanvragen.php, page-verzonden.php)
   ========================================================================== */

@media (min-width: 1025px) {
    .mandje-aside { position: sticky; top: calc(var(--header-onder, 0px) + 1.5rem); }
}

.aanvraag__titel { line-height: 1.1; }
.mandje-chip { padding: 0.25rem 0.5rem; }
.mandje-regel { transition: opacity 0.2s, translate 0.2s; }
.mandje-regel.is-weg { opacity: 0; translate: 1rem 0; }
.mandje-regel__foto img[src=""] { display: none; }
.mandje-regel__status[data-voorraad="op_voorraad"] .status-dot { --dot: var(--primary); }
.mandje-regel__status[data-voorraad="op_bestelling"] .status-dot { --dot: #DBB000; }
.mandje-chip--maat { background-color: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.mandje-chip--maat .text--muted { color: inherit; }

@media (max-width: 767px) {
    .mandje-regel { padding-bottom: 4rem; }
    .mandje-regel__aantal { position: absolute; right: 1rem; bottom: 1rem; }
}

.mandje-ongeldig { background-color: color-mix(in srgb, var(--secondary) 50%, transparent); }

/* "Staat het niet online?" onder de regels */
.vrije-knop { border: 1.5px dashed color-mix(in srgb, var(--primary) 40%, transparent); }
.vrije-knop:hover { background-color: color-mix(in srgb, var(--primary) 6%, transparent); }

/* Upload: bestand dat nog bezig is of mislukte */
.upload__bestand:not([data-token]):not(.is-fout) .upload__status { animation: knipper 1s ease-in-out infinite alternate; }
.upload__bestand.is-fout { background-color: color-mix(in srgb, var(--fout) 8%, transparent); }
.upload__bestand.is-fout .upload__status { color: var(--fout); }

@keyframes knipper { to { opacity: 0.4; } }

/* Stap 2: foutmelding bij het vinkje, melding als versturen mislukt, knop tijdens versturen */
.vinkje.is-fout .vinkje__vak { border-color: var(--fout); }
.veld__fout { color: var(--fout); }

.verzendfout {
    border: 1px solid color-mix(in srgb, var(--fout) 35%, transparent);
    background-color: color-mix(in srgb, var(--fout) 6%, transparent);
}

.verzendfout > svg { color: var(--fout); }

[data-aanvraag-knop]:disabled { opacity: 0.6; cursor: wait; }

@media (max-width: 767px) {
    body:has(.actiebalk:not([hidden])) { padding-bottom: 6rem; }
}

/* Stap 3: de inhoud schuift over de groene hero, tijdlijn met bolletjes */
.verzonden__inhoud { margin-top: -6rem; }

@media (max-width: 767px) {
    .verzonden__inhoud { margin-top: -4rem; }
}

.tijdlijn__bol {
    border: 1.5px solid color-mix(in srgb, var(--dark) 20%, transparent);
    background-color: var(--white);
}

.tijdlijn__stap.is-klaar .tijdlijn__bol { border-color: var(--primary); background-color: var(--primary); color: var(--white); }

.tijdlijn__stap:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    bottom: 0;
    left: 0.6875rem;
    width: 1.5px;
    background-color: color-mix(in srgb, var(--dark) 12%, transparent);
}

/* ==========================================================================
   Tuinhuizen (archive-tuinhuis_stijl.php, single-tuinhuis_stijl.php, inc/componenten/tuinhuis.php)
   ========================================================================== */

/* Staal van de houtsoort (als er geen foto is): kleur volgens de naam */
.tegel__staal { background-color: color-mix(in srgb, var(--dark) 8%, transparent); }
.tegel__staal[data-hout="douglas"] { background-color: #C9A878; }
.tegel__staal[data-hout="thermowood"] { background-color: #8A6141; }

/* Extra opties: pil met + dat een vinkje wordt zodra ze gekozen zijn */
.keuzechip .keuzechip__vink { display: none; }
.keuzechip:hover span { border-color: var(--dark); }
.keuzechip:has(input:checked) span { border-color: var(--primary); background-color: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.keuzechip:has(input:checked) .keuzechip__plus { display: none; }
.keuzechip:has(input:checked) .keuzechip__vink { display: block; }
.keuzechip:has(input:focus-visible) span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Plaatsing: twee knoppen in één balk, de gekozen is zwart */
.keuzepil--segment span { border: 0; background: transparent; }
.keuzepil--segment:hover span { border: 0; background-color: color-mix(in srgb, var(--dark) 6%, transparent); }
.keuzepil--segment:has(input:checked) span { background-color: var(--dark); color: var(--white); }
.is-fout .keuzepil--segment span { box-shadow: inset 0 0 0 1px var(--fout); }

/* Realisaties: op gsm een rij die je wegswipet */
@media (max-width: 767px) {
    .rij-swipe { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .rij-swipe::-webkit-scrollbar { display: none; }
    .rij-swipe > * { flex: 0 0 80%; scroll-snap-align: start; }
}

/* Configurator op gsm: de stappen onder elkaar met een dunne lijn ertussen (Figma 263:1849, 264:1757) */
@media (max-width: 767px) {
    .configurator__stap { padding-block: 1rem; }
    .configurator__stap + .configurator__stap,
    .configurator__stap + div { border-top: 1px solid color-mix(in srgb, var(--dark) 8%, transparent); }
    .configurator > div:first-child { padding-block: 0.25rem 0.5rem; }
}

/* ==========================================================================
   Landingsblokken (inc/blokken.php)
   ========================================================================== */

/* Hero: de brede foto hangt half over de groene sectie */
.hero-foto { background: linear-gradient(to bottom, var(--primary) 50%, transparent 50%); }
.hero__rij { grid-template-columns: 7rem minmax(0, 1fr); }
.icon--flip-x { rotate: 180deg; }

/* Kaartenrij met snappende scroll en pijltjes */
.slider { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0.25rem; }
.slider::-webkit-scrollbar { display: none; }
.slider__kaart { flex: 0 0 calc((100% - 4.5rem) / 4); scroll-snap-align: start; }

@media (max-width: 1024px) { .slider__kaart { flex-basis: calc((100% - 1.5rem) / 2.2); } }
@media (max-width: 767px) { .slider__kaart { flex-basis: 80%; } }

/* Genummerde lijst */
.indexrij:hover .indexrij__titel { color: var(--primary); }

/* ==========================================================================
   Interieur (page-interieur.php en single-ruimte.php)
   ========================================================================== */

.scheiding { flex: none; width: 1px; height: 1.75rem; background-color: color-mix(in srgb, var(--dark) 20%, transparent); }

/* Ruimtes-showcase: één rij is open met een groene voortgangslijn, rechts wisselt het beeld */
.ruimtes { grid-template-columns: 35rem minmax(0, 1fr); }
.ruimtes__stapel { height: 40rem; }
/* Beeld wisselen: het nieuwe veegt van rechts over het vorige; het vorige blijft staan tot de veeg klaar is */
.ruimtes__beeld { opacity: 0; clip-path: inset(0 0 0 100%); z-index: 0; }
.ruimtes__beeld.is-vorige { opacity: 1; clip-path: inset(0); z-index: 1; }
.ruimtes__beeld.is-actief { opacity: 1; clip-path: inset(0); z-index: 2; transition: clip-path 0.8s cubic-bezier(0.65, 0, 0.35, 1); }
.ruimtes__beeld img { transition: scale 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.ruimtes__beeld:not(.is-actief) img { scale: 1.08; }
.ruimtes__thumbs { left: 1.5rem; bottom: 1.5rem; background-color: rgba(255, 255, 255, 0.72); backdrop-filter: blur(10px); }
.ruimtes__thumbs img { width: 5.5rem; height: 4rem; border-radius: 6px; }

.ruimte { position: relative; }
.ruimte__nr { width: 1rem; color: var(--muted, #666); }
.ruimte__pijl { width: 2.25rem; height: 2.25rem; }
.ruimte__titel { font-size: 1.5rem; line-height: 1.875rem; color: color-mix(in srgb, var(--dark) 55%, transparent); transition: color 0.3s; }
.ruimte__pijl { border: 1px solid color-mix(in srgb, var(--dark) 20%, transparent); }
.ruimte__voortgang { position: absolute; top: -1px; left: 0; height: 2px; width: 12.5rem; background-color: var(--primary); transform: scaleX(0); transform-origin: left center; }
/* Uitleg klapt vloeiend open en dicht (hoogte via paginas.js); geen display: none meer, dus geen sprong */
.ruimte__detail.flex { overflow: hidden; height: 0; padding-left: 2.75rem; padding-bottom: 0; }
.ruimte__detail > :last-child { margin-bottom: 1.5rem; }
.ruimte__foto { display: none; }
.ruimte.is-actief .ruimte__nr { color: var(--primary); }
.ruimte.is-actief .ruimte__titel { color: var(--dark); }
.ruimte.is-actief .ruimte__pijl { background-color: var(--primary); border-color: var(--primary); color: var(--white); }
.ruimte.is-actief .ruimte__voortgang { transform: scaleX(1); transition: transform 6s linear; }
.ruimtes.is-gepauzeerd .ruimte__voortgang { transition: none; }
.ruimte:not(.is-actief):hover .ruimte__titel { color: var(--dark); }

@media (max-width: 1024px) {
    .ruimtes { grid-template-columns: minmax(0, 1fr); }
    .ruimte__detail.flex { padding-left: 0; }
    .ruimte.is-actief .ruimte__foto { display: block; aspect-ratio: 4 / 3; }
}

/* Niveaus: vier kaarten op groen, de laatste is wit */
.niveau { padding-block: 3.5rem; background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); }
.niveau__nr { color: var(--secondary); }
.niveau__label, .niveau__sub { color: rgba(255, 255, 255, 0.8); }
.niveau__label { color: rgba(255, 255, 255, 0.6); }
.niveau__wie { border-color: rgba(255, 255, 255, 0.2); }
.niveau__balk { gap: 0.375rem; }
.niveau__seg { width: 1.5rem; height: 2px; border-radius: 1px; background-color: rgba(255, 255, 255, 0.25); }
.niveau__seg.is-aan { background-color: var(--secondary); }
.niveau__vink { background-color: rgba(255, 255, 255, 0.2); color: var(--secondary); }
.niveau__vink svg { width: 0.75rem; height: 0.75rem; }
.niveau ul { gap: 0.75rem; }
.niveau li { gap: 0.75rem; }
.niveau--licht { background-color: var(--white); border-color: var(--white); color: var(--dark); }
.niveau--licht .niveau__nr { color: var(--primary); }
.niveau--licht .niveau__label { color: var(--muted, #666); }
.niveau--licht .niveau__sub { color: var(--muted, #666); }
.niveau--licht .niveau__wie { border-color: color-mix(in srgb, var(--dark) 10%, transparent); }
.niveau--licht .niveau__seg { background-color: color-mix(in srgb, var(--dark) 12%, transparent); }
.niveau--licht .niveau__seg.is-aan { background-color: var(--primary); }
.niveau--licht .niveau__vink { background-color: var(--primary); color: var(--white); }

/* Onze aanpak: een lijn met bolletjes boven de vier stappen */
.aanpak__stap { position: relative; padding-top: 2.75rem; }
.aanpak__stap::before { content: ""; position: absolute; top: 0.3125rem; left: 0; right: -2rem; height: 1px; background-color: color-mix(in srgb, var(--dark) 18%, transparent); }
.aanpak__stap:last-child::before { right: 0; }
.aanpak__stap::after { content: ""; position: absolute; top: 0; left: 0; width: 0.75rem; height: 0.75rem; border-radius: 50%; background-color: var(--white); border: 1px solid color-mix(in srgb, var(--dark) 30%, transparent); box-sizing: border-box; }
.aanpak__nr { color: color-mix(in srgb, var(--dark) 35%, transparent); }
.aanpak__stap.is-klaar::after { background-color: var(--primary); border-color: var(--primary); }
.aanpak__stap.is-klaar::before { background-color: var(--primary); }
.aanpak__stap.is-klaar .aanpak__nr { color: var(--primary); }
@media (max-width: 1024px) { .aanpak__stap::before, .aanpak__stap:last-child::before { right: 0; } }

/* Kaartenrij met bredere kaarten (extra's, realisaties) en pager */
.slider__kaart--breed { flex: 0 0 25rem; }
.slider__kaart--ruim { flex: 0 0 calc((100% - 4.5rem) / 3.1); scroll-snap-align: start; }
@media (max-width: 767px) { .slider__kaart--breed, .slider__kaart--ruim { flex-basis: 80%; } }
.extra__foto { height: 20rem; }
.kaart__nr { height: 1.75rem; }
.kaart:hover .kaart__nr { background-color: var(--secondary); }
.kaart:hover .kaart__titel { text-decoration: underline; }
.kaart__foto { transition: scale 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.kaart:hover .kaart__foto { scale: 1.04; }
.pager__seg { display: block; width: 1.5rem; height: 2px; border-radius: 1px; background-color: color-mix(in srgb, var(--dark) 18%, transparent); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s; cursor: pointer; border: 0; padding: 0; }
@media (max-width: 767px) { [data-pager-segmenten] { display: none; } }
.pager__seg.is-zichtbaar { width: 2.5rem; background-color: var(--primary); }
.slider__pijlen button:disabled { opacity: 0.45; cursor: default; }

/* Merken waar we op bouwen */
.partners__kolom + .partners__kolom { border-left: 1px solid color-mix(in srgb, var(--dark) 10%, transparent); }
.partners li { padding-block: 0.625rem; }
@media (max-width: 1024px) { .partners__kolom:nth-child(3) { border-left: 0; } .partners__kolom:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--dark) 10%, transparent); } }
@media (max-width: 767px) { .partners__kolom + .partners__kolom { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--dark) 10%, transparent); } }

/* Toonzaal */
.toonzaal__foto { aspect-ratio: 8 / 7; }
.toonzaal__rij { grid-template-columns: 7rem minmax(0, 1fr); }

/* Mogelijkheden van een ruimte: de rij onder de muis wordt groen */
.mogelijkheid:hover .mogelijkheid__nr, .mogelijkheid:hover .mogelijkheid__titel { color: var(--primary); }
.mogelijkheid:hover .mogelijkheid__chip { background-color: var(--light); border-color: color-mix(in srgb, var(--dark) 10%, transparent); }
.mogelijkheid:hover .mogelijkheid__pijl { background-color: var(--primary); color: var(--white); }
.merk-voeren > li:first-child { border-top: 0; }

/* ==========================================================================
   Realisaties (archive-realisatie.php en single-realisatie.php)
   ========================================================================== */

/* Uitgelichte realisatie hangt half over de groene hero, op een grijze ondergrond */
.hero-foto--licht { background: linear-gradient(to bottom, var(--primary) 50%, var(--light) 50%); }
.uitgelicht { isolation: isolate; box-shadow: 0 24px 48px color-mix(in srgb, var(--dark) 8%, transparent); }
.uitgelicht__foto { min-height: 36rem; overflow: hidden; }
@media (max-width: 1024px) { .uitgelicht__foto { min-height: 0; aspect-ratio: 4 / 3; } }

/* Keuzelijst als pil (soort, gemeente, volgorde) */
.keuzelijst__veld { appearance: none; -webkit-appearance: none; font-family: inherit; }
.keuzelijst__veld:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Raster: de eerste kaart is breed (2 kolommen) met een hogere foto */
@media (min-width: 1025px) {
    .realisaties__item.is-breed { grid-column: span 2; }
    .realisaties__item .aspect--4-3 { aspect-ratio: auto; height: 22.5rem; }
    .realisaties__item.is-breed .aspect--4-3,
    .realisaties__item.is-breed + .realisaties__item .aspect--4-3 { height: 32.5rem; }
}
.realisaties__oproep .oproep__tweede { margin-left: -0.75rem; }
.realisaties__oproep .btn { justify-content: space-between; }

/* Voortgang van "Toon meer" */
.meer-balk { display: block; width: 15rem; height: 2px; background-color: color-mix(in srgb, var(--dark) 12%, transparent); }
.meer-balk span { display: block; height: 100%; width: 0; background-color: var(--primary); transition: width 0.4s; }

/* Realisatie: eerste alinea groot, galerij in drie rijen (breed + smal, dan drie keer drie) */
.realisatie__tekst p { margin: 0; }
.realisatie__tekst p:first-child { font-size: 1.75rem; line-height: 2.625rem; color: var(--dark); }
@media (max-width: 767px) { .realisatie__tekst p:first-child { font-size: 1.25rem; line-height: 1.875rem; } }
.realisatie__zij { position: sticky; top: 8rem; }
.galerij-raster__item { grid-column: span 2; }
.galerij-raster__item:nth-child(1) { grid-column: span 4; }
.galerij-raster__foto { height: 35rem; }
.galerij-raster__item:nth-child(n+3) .galerij-raster__foto { height: 35rem; }
.galerij-raster__item:nth-child(n+6) .galerij-raster__foto { height: 20rem; }
.galerij-raster__foto:hover img { scale: 1.04; }
@media (max-width: 1024px) {
    .galerij-raster__item, .galerij-raster__item:nth-child(1) { grid-column: auto; }
    .galerij-raster__foto, .galerij-raster__item:nth-child(n+3) .galerij-raster__foto, .galerij-raster__item:nth-child(n+6) .galerij-raster__foto { height: auto; aspect-ratio: 4 / 3; }
}
.buur:hover .font--500 { text-decoration: underline; }

/* ==========================================================================
   Blog (home.php, single.php)
   ========================================================================== */

.aspect--16-10 { aspect-ratio: 16 / 10; }
.aspect--21-10 { aspect-ratio: 21 / 10; }
.artikelkaart:hover .kaart__titel { text-decoration: underline; }
.artikelkaart:hover .artikelkaart__voet { color: var(--primary); }
.artikelkaart:hover .artikelkaart__pijl { background-color: var(--primary); color: var(--white); }
.oproep__tweede { margin-left: -0.75rem; }
.oproep__knoppen .btn { justify-content: space-between; border-radius: 0.75rem; }

/* Leesvoortgang bovenaan het scherm */
.leesbalk { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; pointer-events: none; }
.leesbalk span { display: block; height: 100%; width: 0; background-color: var(--secondary); }

/* Drie kolommen: inhoudstafel, tekst, delen */
.artikel__raster { grid-template-columns: 17.5rem minmax(0, 45rem) 3rem; justify-content: space-between; gap: 5rem; }
.artikel__toc, .artikel__delen { position: sticky; top: 8rem; }
.toc { border-left: 1px solid color-mix(in srgb, var(--dark) 12%, transparent); }
.toc__link { margin-left: -1px; border-left: 2px solid transparent; }
.toc__link:hover { color: var(--dark); }
.toc__link.is-actief { border-left-color: var(--primary); color: var(--dark); font-weight: 500; }
.toc__link.is-actief span:first-child { color: var(--primary); }
@media (max-width: 1024px) { .artikel__raster { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* De tekst van het artikel */
.artikel { font-size: 1.125rem; line-height: 1.75; color: color-mix(in srgb, var(--dark) 85%, transparent); }
.artikel > * { margin: 0 0 1.5rem; }
.artikel > p:first-child { font-size: 1.5rem; line-height: 1.55; color: var(--dark); margin-bottom: 3rem; }
.artikel h2 { margin: 3rem 0 1.5rem; font-size: 2rem; line-height: 1.25; color: var(--dark); scroll-margin-top: 8rem; }
.artikel h3 { margin: 2rem 0 1rem; color: var(--dark); }
.artikel a { color: var(--primary); }
.artikel .wp-block-table { margin: 2rem 0; }
.artikel .wp-block-table table { width: 100%; border-collapse: collapse; }
.artikel .wp-block-table td { padding: 1.25rem 0; border-top: 1px solid color-mix(in srgb, var(--dark) 10%, transparent); vertical-align: top; }
.artikel .wp-block-table tr:last-child td { border-bottom: 1px solid color-mix(in srgb, var(--dark) 10%, transparent); }
.artikel .wp-block-table td:first-child { width: 37%; padding-left: 2.875rem; position: relative; font-weight: 600; color: var(--dark); }
.artikel .wp-block-table td:first-child::before { content: ""; position: absolute; left: 0; top: 1.6rem; width: 1.5rem; height: 0.875rem; background: url("assets/img/icons/streepjes.svg") no-repeat center / contain; }
.artikel blockquote { margin: 2.5rem 0; padding: 0.25rem 0 0.25rem 2rem; border-left: 4px solid var(--secondary); }
.artikel blockquote p { margin: 0; font-size: 1.75rem; line-height: 1.3; font-weight: 500; color: var(--dark); }
@media (max-width: 767px) {
    .artikel > p:first-child { font-size: 1.25rem; }
    .artikel h2 { font-size: 1.5rem; }
    .artikel .wp-block-table td { display: block; width: auto; border: 0; padding: 0.25rem 0; }
    .artikel .wp-block-table td:first-child { padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--dark) 10%, transparent); }
}
[data-kopieer].is-gekopieerd { background-color: var(--primary); color: var(--white); border-color: var(--primary); }

/* ==========================================================================
   Jobs (archive-job.php, single-job.php)
   ========================================================================== */

.job__feit + .job__feit { padding-left: 2rem; border-left: 1px solid rgba(255, 255, 255, 0.2); }
@media (max-width: 1024px) { .job__feit:nth-child(3) { padding-left: 0; border-left: 0; } }
.job__kaart { position: sticky; top: 8rem; box-shadow: 0 24px 48px color-mix(in srgb, var(--dark) 6%, transparent); }
@media (max-width: 1024px) { .job__kaart { position: static; } }
.vink { background-color: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.vink svg { width: 0.75rem; height: 0.75rem; }
.vink--groot { background-color: var(--primary); color: var(--white); }
.vink--groot svg { width: 1.25rem; height: 1.25rem; }
.last--border--0:last-child { border-bottom: 0; }
.formstap { display: block; }
.formstap__kop { float: left; width: 100%; margin-bottom: 1.5rem; }
.formstap__kop + * { clear: both; }
.formstap > * + * { margin-top: 1.5rem; }
.formstap > .formstap__kop + * { margin-top: 0; }
.formstap__nr { display: flex; flex: none; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background-color: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; }

.akkoord-veld.is-fout .vinkje__vak { border-color: var(--fout); }
.akkoord-veld.is-fout .veld__uitleg { color: var(--fout); }

/* ==========================================================================
   Over ons (page-over-ons.php)
   ========================================================================== */

/* Geschiedenis (tijdlijn): met .is-vast (desktop) is de sectie hoger dan het scherm en blijft de inhoud staan tijdens het scrollen */
.geschiedenis.is-vast { height: calc(100vh + var(--stappen) * 45vh); }
.geschiedenis.is-vast .geschiedenis__plak { position: sticky; top: 4rem; height: calc(100vh - 4rem); overflow: hidden; justify-content: center; }
.geschiedenis.is-vast .geschiedenis__plak > div:first-child { padding-block: clamp(1.5rem, 7vh, 7rem) clamp(2.5rem, 10vh, 7rem); }
.geschiedenis.is-vast .geschiedenis__plak > div:last-child { padding-block: clamp(1.25rem, 4vh, 4.5rem) clamp(1.5rem, 7vh, 7rem); }
.geschiedenis.is-vast .geschiedenis__jaar { font-size: clamp(3rem, 7vh, 6rem); }
@media (max-height: 820px) { .geschiedenis.is-vast .geschiedenis__stap .geschiedenis__foto { height: 17vh; } }
.geschiedenis__rij { gap: 3rem; will-change: transform; }
.geschiedenis:not(.is-vast) .geschiedenis__venster { padding-left: 0; }
.geschiedenis:not(.is-vast) .geschiedenis__rij { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: 1rem; }
.geschiedenis:not(.is-vast) .geschiedenis__rij::-webkit-scrollbar { display: none; }
.geschiedenis__stap { flex: 0 0 25rem; scroll-snap-align: start; }
@media (max-width: 767px) { .geschiedenis__stap { flex-basis: 80%; } }
.geschiedenis__jaar { color: rgba(255, 255, 255, 0.92); transition: color 0.3s; }
.geschiedenis__stap.is-actief .geschiedenis__jaar { color: var(--secondary); }
.geschiedenis.is-vast .geschiedenis__foto { aspect-ratio: auto; height: min(18.75rem, 22vh); }
.geschiedenis__archief { background-color: #C9B99A; color: color-mix(in srgb, var(--dark) 60%, transparent); }
.geschiedenis__as { grid-template-columns: repeat(var(--stappen), minmax(0, 1fr)); position: relative; }
.geschiedenis__as::before { content: ""; position: absolute; top: 0.5rem; left: 0; right: 0; height: 1px; background-color: rgba(255, 255, 255, 0.3); }
.geschiedenis__punt { position: relative; color: rgba(255, 255, 255, 0.6); }
.geschiedenis__punt::before { content: ""; position: absolute; top: 0.5rem; left: 0; right: 0; height: 1px; background-color: var(--secondary); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; }
.geschiedenis__punt.is-gedaan:not(.is-actief)::before { transform: scaleX(1); }
.geschiedenis__bol { position: relative; width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.6); background-color: var(--primary); transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; }
.geschiedenis__punt.is-gedaan { color: var(--white); }
.geschiedenis__punt.is-gedaan .geschiedenis__bol { background-color: var(--secondary); border-color: var(--secondary); }
.geschiedenis__punt.is-actief .geschiedenis__bol { box-shadow: 0 0 0 6px rgba(245, 233, 107, 0.3); }
.geschiedenis__balk { height: 1px; background-color: rgba(255, 255, 255, 0.3); }
.geschiedenis__balk span { display: block; height: 2px; margin-top: -0.5px; background-color: var(--secondary); width: 4%; }

/* Vier redenen: foto links, tekst rechts */
.reden { grid-template-columns: 37% minmax(0, 1fr); min-height: 22.5rem; }
@media (max-width: 767px) { .reden { grid-template-columns: minmax(0, 1fr); } .reden__foto { aspect-ratio: 4 / 3; } }
.citaat__teken { font-family: Georgia, serif; height: 3rem; }

/* Team: portret 4:5, Louis toont zijn e-mailadres */
.team-rij > :not(.home-slider) { margin-right: var(--section-x); }
.team-rij .teamlid { flex: 0 0 25rem; }
@media (max-width: 767px) { .team-rij .teamlid { flex-basis: 75%; } }
.teamlid__foto { aspect-ratio: 4 / 5; background-color: #E2E2DD; }
.teamlid__letter { font-weight: 300; }
.teamlid__mail { left: 1rem; right: 1rem; bottom: 1rem; height: 2.5rem; }
.teamlid:hover .teamlid__naam { color: var(--primary); }
.w--88 { width: 5.5rem; }
.h--88 { height: 5.5rem; }

.over__intro { line-height: 1.5; }
.citaat__tekst { line-height: 1.15; }

/* ==========================================================================
   Contact (page-contact.php)
   ========================================================================== */

.contact__omlaag { rotate: 90deg; }
.contact__kaarten { box-shadow: 0 24px 48px color-mix(in srgb, var(--dark) 6%, transparent); }
.contact__kaart + .contact__kaart { border-left: 1px solid color-mix(in srgb, var(--dark) 10%, transparent); }
@media (max-width: 1024px) { .contact__kaart + .contact__kaart { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--dark) 10%, transparent); } }
.contact__tip { background-color: color-mix(in srgb, var(--secondary) 35%, var(--white)); }
.contact__zij { position: sticky; top: 8rem; }
@media (max-width: 1024px) { .contact__zij { position: static; } }
.contact__vandaag { background-color: color-mix(in srgb, var(--primary) 8%, transparent); border-bottom-color: transparent; }
.contact__kaartbeeld { aspect-ratio: 1296 / 560; }
@media (max-width: 767px) { .contact__kaartbeeld { aspect-ratio: 4 / 5; } }
.contact__pin { left: 50%; top: 50%; translate: -50% -70%; pointer-events: none; }
.contact__puls { width: 3.5rem; height: 3.5rem; background-color: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--primary); box-shadow: 0 0 0 1.5rem color-mix(in srgb, var(--primary) 12%, transparent); }
.contact__info { box-shadow: 0 12px 32px color-mix(in srgb, var(--dark) 12%, transparent); }
.contact__winkel { width: 8.25rem; height: 6rem; }
.contact__puls svg { width: 1.75rem; height: 1.75rem; }
[data-api-formulier] > [hidden] { display: none !important; }
.indexrij:first-child { border-top: 0; }


/* ==========================================================================
   Homepage (front-page.php) — maten uit Figma 03 · Homepage V3.1 (22:7)
   Lettergroottes schalen vloeiend van gsm (390) naar desktop (1440).
   ========================================================================== */

.home-label { font-size: 0.75rem; line-height: 1rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.home-klein { font-size: 0.875rem; line-height: 1.375rem; }
.home-tekst { font-size: 1rem; line-height: 1.625rem; }
.home-tekst-groot { font-size: 1.0625rem; line-height: 1.75rem; }
.home-link { gap: 0.625rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.home-h2 { font-size: clamp(1.75rem, 1.39rem + 1.6vw, 2.75rem); line-height: 1.14; font-weight: 500; letter-spacing: -0.01em; }
.home-h2 .markering { padding-inline: 0.18em; }
.home-h2__aantal { display: inline-block; vertical-align: top; margin-left: 0.8125rem; padding-top: 0.375rem; font-size: 1rem; line-height: 1.25rem; letter-spacing: 0.1em; color: var(--primary); }

/* Hero */
.home-hero { padding-block: 0 6rem; border-top: 1px solid var(--white); padding-top: 7rem; }
.home-hero__titel { display: flex; flex-direction: column; margin: 1.25rem 0 0; font-size: clamp(2.5rem, 1.6625rem + 3.429vw, 4.75rem); line-height: 1.079; font-weight: 400; letter-spacing: -0.025em; color: var(--white); }
.home-hero__regel { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.263em; }
.home-hero__foto { position: relative; flex: none; width: 1.97em; height: 0.92em; border-radius: 999px; overflow: hidden; }
.home-hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s; }
.home-hero__foto img.is-actief { opacity: 1; }
.home-hero__onder { gap: 8rem; margin-top: 3.5rem; }
.home-hero__links { gap: 0.875rem; }
.home-hero__reviews { gap: 0.75rem; font-size: 0.875rem; line-height: 1.375rem; }
.home-hero__sterren { gap: 3px; }
.ster { position: relative; display: flex; color: color-mix(in srgb, var(--white) 30%, transparent); }
.ster--vol { color: var(--secondary); }
.ster__vol { position: absolute; inset: 0; display: flex; color: var(--secondary); clip-path: inset(0 50% 0 0); }
a.home-hero__reviews:hover span:last-child { text-decoration: underline; }
.home-hero__intro { font-size: 1rem; line-height: 1.5rem; }
.home-hero__knoppen .btn { height: 4rem; }
@media (max-width: 1024px) { .home-hero { padding-top: 4rem; } .home-hero__onder { gap: 2rem; margin-top: 2.5rem; } }
@media (max-width: 767px) { .home-hero { padding-top: 3rem; padding-bottom: 3rem; } .home-hero__intro { font-size: 1.0625rem; line-height: 1.75rem; } .home-hero__knoppen .btn { flex: none; } }

/* Beeld: groen tot 40 %, daarna grijs; de foto loopt tot de rechterrand */
.home-beeld { background: linear-gradient(to bottom, var(--primary) 40%, var(--light) 40%); padding-left: max(var(--section-x), calc((100% - var(--wrapper-max)) / 2)); }
.home-beeld__foto { height: clamp(15rem, 44.44vw, 40rem); border-radius: 8px 0 0 8px; overflow: hidden; }
.home-beeld__foto { position: relative; }
.home-beeld__foto img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; display: block; }

/* Kaartenrijen die tot de rechterrand doorlopen (categorieën, nieuws & realisaties) */
.home-rij-sectie { padding-right: 0; }
.home-rij { gap: 3rem; }
.home-kop, .home-rechts { padding-right: var(--section-x); gap: 1.5rem; }
.home-kop__titel { gap: 1.25rem; }
.home-controls { gap: 1.75rem; }
.home-slider { gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: var(--section-x); }
.home-slider::-webkit-scrollbar { display: none; }
.home-slider > * { scroll-snap-align: start; }
.home-pijl { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; padding: 0; border-radius: 999px; cursor: pointer; transition: scale 0.2s, opacity 0.2s; }
.home-pijl--vorige { border: 1px solid rgba(0, 0, 0, 0.2); background: transparent; color: var(--dark); }
.home-pijl--volgende { border: 0; background-color: var(--dark); color: var(--white); }
.home-pijl:disabled { opacity: 0.45; cursor: default; }
.home-pager { gap: 1.25rem; }
.home-pager [data-pager-segmenten] { gap: 0.375rem; }
.home-pager__teller { gap: 0.375rem; font-size: 0.875rem; line-height: 1rem; font-weight: 500; letter-spacing: 0.1em; }
@media (max-width: 767px) { .home-pijlen { display: none; } .home-pager [data-pager-segmenten] { display: none; } }

/* 01 — Categorieën */
.home-cat { flex: 0 0 25rem; height: 32.4375rem; border-radius: 4px; }
.home-cat__foto { flex: none; height: 17.5rem; }
.home-cat__body { padding: 1.75rem; }
.home-cat__titel { font-size: 1.375rem; line-height: 1.75rem; font-weight: 500; letter-spacing: -0.003em; }
.home-cta { padding-top: 1.125rem; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.home-cta__pijl { width: 2.25rem; height: 2.25rem; background-color: var(--light); color: var(--dark); transition: background-color 0.3s, color 0.3s; }
.home .kaart:hover .kaart__foto { scale: 1.06; }
.home .kaart__foto { transition: scale 0.8s cubic-bezier(0.33, 1, 0.68, 1); }
@media (max-width: 767px) { .home-cat { flex-basis: 80%; height: auto; } }

/* 02 — Doe-het-zelf & houthandel */
.home-tweeluik { gap: 2.5rem; }
.home-duo { min-height: 39.6875rem; border-radius: 8px; }
.home-duo__foto { flex: none; height: 17.5rem; }
.home-duo__body { gap: 1.5rem; padding: 1.75rem 2.25rem; }
.home-duo__titel { font-size: clamp(1.375rem, 1.26rem + 0.48vw, 1.75rem); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.home-duo__titel .markering { padding-inline: 0.235em; }
.home-chip { gap: 0.5rem; padding: 0.5rem 0.875rem 0.5rem 0.625rem; font-size: 0.8125rem; line-height: 1.125rem; }
.home-chip svg { width: 0.875rem; height: 0.875rem; }
.home-cta--groot { padding-top: 1.25rem; }
.home-cta--groot .home-cta__pijl { width: 2.5rem; height: 2.5rem; background-color: var(--white); color: var(--primary); }
@media (max-width: 767px) { .home-duo { min-height: 0; } .home-duo__foto { height: 13rem; } .home-duo__body { padding: 1.5rem; } }

/* 03 — Over Bouwstock Dewulf */
.home-over { gap: 5rem; }
.home-over__label { flex: none; width: 19.125rem; }
.home-over__tekst { gap: 2.5rem; }
.home-statement { font-size: clamp(1.5rem, 1.129rem + 1.524vw, 2.5rem); line-height: 1.3; letter-spacing: -0.008em; }
.home-statement .woord { transition: opacity 0.2s; }
.home-waarde { gap: 1rem; padding-top: 2rem; }
.home-waarde__lijn { top: 0; left: 0; right: 0; height: 1px; background-color: rgba(0, 0, 0, 0.18); transform-origin: left center; }
.home-waarde__icoon { width: 3rem; height: 3rem; margin-bottom: 0.25rem; border-radius: 4px; background-color: var(--dark); color: var(--secondary); }
.home-waarde__icoon svg { width: 1.25rem; height: 1.25rem; }
@media (max-width: 1024px) { .home-over { gap: 3rem; } .home-over__label { width: auto; } }

/* 04 — Afdelingen: vier gelijke kaarten; bij hover of focus groeit er één (± 600 px) */
.home-afd { gap: 4rem; }
.home-afd__intro { max-width: 26.25rem; }
.afdelingen { gap: 1rem; height: 35rem; }
.afdeling { flex: 1 1 0; min-width: 0; border-radius: 8px; transition: flex-grow 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
.afdeling img { transition: scale 0.6s cubic-bezier(0.33, 1, 0.68, 1); }
.afdeling.is-actief { flex-grow: 2.78; }
.afdeling img { scale: 1.06; }
.afdeling.is-actief img { scale: 1; }
.afdeling__verloop { background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.85) 100%); }
.afdeling.is-actief .afdeling__verloop { background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.9) 100%); }
.afdeling__nr { top: 1.75rem; left: 1.75rem; color: rgba(255, 255, 255, 0.8); }
.afdeling__knop { top: 1.25rem; right: 1.75rem; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.16); color: var(--white); transition: background-color 0.3s, border-color 0.3s, color 0.3s; }
.afdeling__pijl { display: none; }
.afdeling.is-actief .afdeling__knop { background-color: var(--secondary); border-color: var(--secondary); color: var(--dark); }
.afdeling.is-actief .afdeling__plus { display: none; }
.afdeling.is-actief .afdeling__pijl { display: block; }
.afdeling__dicht { left: 1.75rem; right: 1.75rem; bottom: 1.75rem; transition: opacity 0.2s; }
.afdeling__naam { font-size: 1.375rem; line-height: 1.75rem; font-weight: 500; }
.afdeling__ontdek { color: rgba(255, 255, 255, 0.7); }
.afdeling__open { left: 1.75rem; bottom: 1.75rem; width: min(34rem, calc(100% - 3.5rem)); gap: 1rem; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s, transform 0.4s, visibility 0s 0.3s; }
.afdeling.is-actief .afdeling__dicht { opacity: 0; }
.afdeling.is-actief .afdeling__open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.4s 0.15s, transform 0.5s 0.15s, visibility 0s; }
.afdeling__titel { font-size: 2.5rem; line-height: 2.875rem; font-weight: 500; }
.afdeling__tekst { max-width: 28.75rem; font-size: 1rem; line-height: 1.625rem; color: rgba(255, 255, 255, 0.9); }
.afdeling__chip { padding: 0.5rem 0.875rem; border: 1px solid rgba(255, 255, 255, 0.25); background-color: rgba(255, 255, 255, 0.14); font-size: 0.8125rem; line-height: 1.125rem; }
.afdeling__cta { align-self: flex-start; gap: 0.875rem; height: 3.25rem; margin-top: 0.5rem; padding: 0 0.5rem 0 1.375rem; background-color: var(--secondary); color: var(--dark); }
.afdeling__cta > span:last-child { width: 2.25rem; height: 2.25rem; background-color: var(--dark); color: var(--white); }
.afdeling__cta svg { width: 0.875rem; height: 0.875rem; }
@media (max-width: 767px) {
    .home-afd { gap: 2rem; }
    .afdelingen { flex-direction: column; height: auto; }
    .afdeling { flex: none; height: 7.5rem; transition: height 0.5s cubic-bezier(0.65, 0, 0.35, 1); }
    .afdeling.is-actief { height: 26.25rem; }
    .afdeling__titel { font-size: 1.75rem; line-height: 2.125rem; }
    .afdeling__nr { top: 1rem; left: 1.25rem; }
    .afdeling__knop { top: 50%; right: 1.25rem; translate: 0 -50%; }
    .afdeling.is-actief .afdeling__knop { top: 1rem; translate: none; }
    .afdeling__dicht { left: 1.25rem; bottom: 1rem; }
    .afdeling__open { left: 1.25rem; bottom: 1.25rem; width: calc(100% - 2.5rem); }
}

/* 05 — Virtuele rondleiding: groen tot 43 %, de kaart hangt erover */
.home-rond-sectie { background: linear-gradient(to bottom, var(--primary) 43.2%, var(--white) 43.2%); }
.home-rond { gap: 1.75rem; padding-top: 1rem; }
.home-rond > p:first-child { padding-bottom: 0.75rem; }
.home-rond__kaart { height: clamp(28rem, 50vw, 45rem); border-radius: 8px; }
.home-rond__verloop { background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 50%), linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.05) 28%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.82) 100%), rgba(0, 0, 0, 0.12); }
.home-rond__chip { top: 2rem; padding: 0.5rem 0.875rem 0.5rem 0.75rem; border-radius: 999px; background-color: rgba(0, 0, 0, 0.35); color: var(--white); }
.home-rond__chip--links { left: 2rem; }
.home-rond__chip--rechts { right: 2rem; color: rgba(255, 255, 255, 0.85); }
.home-rond__start { left: 50%; top: 40%; translate: -50% -50%; gap: 1rem; padding: 0.625rem 1.75rem 0.625rem 0.625rem; border-radius: 999px; background-color: var(--white); box-shadow: 0 0 0 0.625rem rgba(255, 255, 255, 0.18); transition: scale 0.3s; }
.home-rond__start:hover { scale: 1.04; }
.home-rond__360 { width: 3.5rem; height: 3.5rem; background-color: var(--secondary); color: var(--dark); font-size: 0.9375rem; font-weight: 600; }
.home-rond__start-titel { font-size: 1.125rem; line-height: 1.5rem; font-weight: 500; color: var(--dark); }
.home-rond__start-sub { font-size: 0.75rem; line-height: 1rem; color: var(--muted); }
.home-rond__onder { left: 2rem; right: 2rem; bottom: 2rem; }
.home-rond__tekst { max-width: 28.75rem; gap: 0.75rem; }
.home-rond__titel { font-size: clamp(1.875rem, 1.457rem + 1.714vw, 3rem); line-height: 1.125; font-weight: 500; letter-spacing: -0.01em; color: var(--white); }
.home-rond__sub { color: rgba(255, 255, 255, 0.85); }
.home-rond__stops { gap: 0.75rem; }
.home-stop { gap: 0.625rem; width: 8rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.home-stop img { width: 8rem; height: 5rem; object-fit: cover; border-radius: 6px; border: 2px solid transparent; transition: border-color 0.3s; }
.home-stop > span { gap: 0.375rem; }
.home-stop__nr { letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); transition: color 0.3s; }
.home-stop:hover img, .home-stop.is-actief img { border-color: var(--secondary); }
.home-stop:hover .home-stop__nr, .home-stop.is-actief .home-stop__nr { color: var(--secondary); }
.home-rond__adres { gap: 1rem; }
@media (max-width: 767px) {
    .home-rond__chip { top: 1rem; }
    .home-rond__chip--links { left: 1rem; }
    .home-rond__kaart { height: 32rem; }
    .home-rond__start { top: 30%; padding-right: 1.25rem; }
    .home-rond__onder { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; }
}

/* 06 — Nieuws & realisaties */
.home-nieuws { padding-top: 0; gap: 3.5rem; }
.home-paneel { gap: 3.5rem; }
.home-tabs { gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background-color: var(--light); }
.home-tab { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.125rem 0.75rem 1.25rem; border: 0; border-radius: 999px; background: transparent; color: var(--dark); font: inherit; font-size: 0.75rem; line-height: 1rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.home-tab span { color: var(--muted); }
.home-tab.is-actief { background-color: var(--dark); color: var(--white); }
.home-tab.is-actief span { color: var(--secondary); }
.home-item { flex: 0 0 26.25rem; gap: 1.25rem; }
.home-item__foto { height: 18.75rem; border-radius: 8px; }
.home-item__pil { top: 1rem; left: 1rem; padding: 0.4375rem 0.75rem; border-radius: 999px; background-color: var(--white); color: var(--dark); }
.home-item__pijl { right: 1rem; bottom: 1rem; width: 2.75rem; height: 2.75rem; background-color: var(--secondary); color: var(--dark); scale: 0; translate: -8px 0; transition: scale 0.35s, translate 0.35s; }
.home-item:hover .home-item__pijl { scale: 1; translate: 0 0; }
.home-item__body { gap: 0.625rem; }
.home-meta { gap: 0.375rem; font-size: 0.8125rem; line-height: 1.125rem; }
.home-meta svg { width: 0.875rem; height: 0.875rem; }
.home-item__titel { font-size: 1.25rem; line-height: 1.625rem; font-weight: 500; letter-spacing: -0.003em; }
.home-item__titel--blog { font-size: 1.1875rem; }
.home-item__titel a { background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px; transition: background-size 0.35s cubic-bezier(0.33, 1, 0.68, 1); }
.home-item:hover .home-item__titel a { background-size: 100% 1px; }
.home-item__chips { padding-top: 0.375rem; }
.home-materiaal { padding: 0.3125rem 0.625rem; border: 1px solid rgba(0, 0, 0, 0.15); font-size: 0.75rem; line-height: 1rem; }
.home-item__lees { padding-top: 0.375rem; }
@media (max-width: 767px) { .home-item { flex-basis: 80%; } .home-item__foto { height: 14rem; } }


/* ==========================================================================
   Homepage — beweging (assets/js/ed-animation.js, Figma Motion 48:148)
   ========================================================================== */

/* Hero-intro: wat animeert blijft verborgen tot GSAP de beginstand heeft gezet (html.anim → .hero-gezet, zie header.php
   en ed-animation.js); na 4 s altijd zichtbaar. De introtekst staat er meteen (snelle LCP op gsm). */
.anim:not(.anim-klaar):not(.hero-gezet) .home-hero > :not(.home-hero__onder),
.anim:not(.anim-klaar):not(.hero-gezet) .home-hero__reviews,
.anim:not(.anim-klaar):not(.hero-gezet) .home-hero__knoppen,
.anim:not(.anim-klaar):not(.hero-gezet) .home-beeld__foto { visibility: hidden; }
.home-hero__masker { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.home-hero__lijn:not(.home-hero__regel) { display: block; }

/* Kopregels uit een masker (SplitText) en de gele markering die van links invegt */
.home-masker { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
/* Masker van SplitText rond elke regel van een sectiekop: ruimte voor de staart van g, j, p */
.home-regel-mask { padding-bottom: 0.18em; margin-bottom: -0.18em; }
.home .markering, .landing .markering { background: linear-gradient(var(--secondary), var(--secondary)) no-repeat left center / 100% 100%; }

/* Tabs: één zwarte pil die naar de gekozen tab schuift */
.home-tab { position: relative; z-index: 1; }
.home-tabs.heeft-pil .home-tab.is-actief { background-color: transparent; }
.home-tabs__pil { top: 0.25rem; left: 0; height: calc(100% - 0.5rem); width: 0; border-radius: 999px; background-color: var(--dark); }
.home-tabs:not(.heeft-pil) .home-tabs__pil { display: none; }

/* Afdelingen: inhoud van de open kaart verschijnt na 0,15 s, label → tekst → kenmerken → knop */
.afdeling__open > * { opacity: 0; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s; }
.afdeling.is-actief .afdeling__open > * { opacity: 1; transform: none; transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.afdeling.is-actief .afdeling__open > :nth-child(1) { transition-delay: 0.15s; }
.afdeling.is-actief .afdeling__open > :nth-child(2) { transition-delay: 0.2s; }
.afdeling.is-actief .afdeling__open > :nth-child(3) { transition-delay: 0.25s; }
.afdeling.is-actief .afdeling__open > :nth-child(4) { transition-delay: 0.3s; }
.afdeling.is-actief .afdeling__open > :nth-child(5) { transition-delay: 0.35s; }
.afdeling__open { transform: none; }

/* Pijlen: bij hover schuift de pijl door */
.home-link svg { transition: translate 0.25s; }
.home-link:hover svg { translate: 4px 0; }
.home-pager__teller [data-pager-nu] { display: inline-block; overflow: hidden; }

/* Rondleiding: de startknop pulseert één keer bij hover */
.home-rond__start::after { content: ""; position: absolute; inset: -0.625rem; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.6); opacity: 0; pointer-events: none; }
.home-rond__start:hover::after { animation: home-halo 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1; }
@keyframes home-halo { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.25); } }

/* Rondleiding in een venster: opent als cirkel vanuit de knop, Matterport laadt pas dan */
.rondleiding-venster { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background-color: var(--dark); }
.rondleiding-venster::backdrop { background: transparent; }
.rondleiding-venster iframe { display: block; width: 100%; height: 100%; border: 0; }
.rondleiding-venster__sluit { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 3rem; height: 3rem; border: 0; background-color: var(--white); color: var(--dark); cursor: pointer; }
.is-slepen > * { pointer-events: none; }

/* ---------- Zoeken (Figma 01 · 33:88, 33:298, 35:106) ---------- */
html.zoek-open { overflow: hidden; }
.zoek { position: fixed; inset: 0; z-index: 200; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.zoek__achtergrond { position: fixed; inset: 0; background: rgba(10, 40, 26, 0.6); opacity: 0; transition: opacity .2s; }
.zoek__vak { position: relative; display: flex; justify-content: center; padding: 0 var(--section-x); background: var(--white, #fff); border-radius: 0 0 16px 16px; transform: translateY(-16px); opacity: 0; transition: transform .25s cubic-bezier(.16,1,.3,1), opacity .2s; }
.zoek.is-open .zoek__achtergrond { opacity: 1; }
.zoek.is-open .zoek__vak { transform: none; opacity: 1; }
.zoek__binnen { width: 100%; max-width: var(--wrapper-max); padding: 24px 0 48px; }
.zoek__balk { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid color-mix(in srgb, var(--dark) 10%, transparent); transition: border-color .2s; }
.zoek.is-zoekend .zoek__balk, .zoek__balk:focus-within { border-color: var(--primary); }
.zoek__icoon { width: 22px; height: 22px; flex: none; color: var(--dark); }
.zoek__balk:focus-within .zoek__icoon { color: var(--primary); }
.zoek__invoer { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 2rem; line-height: 1.2; color: var(--dark); outline: none; caret-color: var(--primary); }
.zoek__invoer::placeholder { color: color-mix(in srgb, var(--dark) 35%, transparent); }
.zoek__invoer::-webkit-search-cancel-button { display: none; }
.zoek__esc { padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--dark) 20%, transparent); border-radius: 4px; font: 500 0.625rem/1.4 inherit; font-family: inherit; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.zoek__sluit { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--light); color: var(--dark); cursor: pointer; }
.zoek__sluit svg { width: 14px; height: 14px; }
.zoek__inhoud { padding-top: 32px; }
.zoek__raster { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; }
.zoek__raster--resultaten { grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); }
.zoek__raster[hidden] { display: none; }
.zoek__label { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 0.6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--dark); }
.zoek__label svg { width: 14px; height: 14px; }
* + .zoek__label { margin-top: 28px; }
.zoek__pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.zoek__pil { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--light); font: inherit; font-size: 0.875rem; color: var(--dark); text-decoration: none; cursor: pointer; transition: background-color .15s; }
.zoek__pil:hover, .zoek__pil.is-actief { background: color-mix(in srgb, var(--dark) 12%, transparent); }
.zoek__lijst, .zoek__producten, .zoek__suggesties, .zoek__tips, .zoekpagina__lijst { list-style: none; margin: 0; padding: 0; }
.zoek__rij { display: flex; align-items: center; gap: 14px; padding: 6px; border-radius: 8px; color: var(--dark); text-decoration: none; transition: background-color .15s; }
.zoek__rij:hover, .zoek__rij.is-actief { background: var(--light); }
.zoek__rij:hover .zoek__pijl, .zoek__rij.is-actief .zoek__pijl { color: var(--primary); transform: translateX(3px); }
.zoek__foto { width: 44px; height: 44px; flex: none; border-radius: 6px; object-fit: cover; background: var(--light); }
.zoek__naam { flex: 1; }
.zoek__pijl { width: 16px; height: 16px; flex: none; transition: transform .2s, color .2s; }
.zoek__kaart { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 8px; background: var(--light); font-size: 0.875rem; line-height: 1.5; align-self: start; }
.zoek__kaart p { margin: 0; }
.zoek__kaart--groen { background: var(--primary); color: var(--white, #fff); }
.zoek__kaart--groen .zoek__label { color: inherit; }
.zoek__kaarttitel { font-size: 1.375rem !important; font-weight: 500; }
.zoek__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 0.75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: inherit; text-decoration: none; }
.zoek__link svg { width: 14px; height: 14px; color: var(--secondary); }
.zoek__kaart:not(.zoek__kaart--groen) .zoek__link, .zoek__alles { color: var(--primary); }
.zoek__alles svg, .zoek__kaart:not(.zoek__kaart--groen) .zoek__link svg { color: inherit; }
.zoek__alles { margin: 14px 0 0 12px; }
.zoek__suggestie { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 6px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 1rem; color: var(--dark); text-align: left; cursor: pointer; }
.zoek__suggestie svg { width: 14px; height: 14px; flex: none; }
.zoek__suggestie:hover, .zoek__suggestie.is-actief { background: var(--light); }
.zoek__kop { display: flex; justify-content: space-between; gap: 16px; }
.zoek__hint { margin: 0; font-size: 0.8125rem; color: var(--muted); }
.zoek__product { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 8px; color: var(--dark); text-decoration: none; transition: background-color .15s; }
.zoek__product:hover, .zoek__product.is-actief { background: var(--light); }
.zoek__product .zoek__foto { width: 64px; height: 64px; }
.zoek__producten--klein .zoek__foto { width: 44px; height: 44px; }
.zoek__tekst { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.zoek__titel { font-size: 1rem; font-weight: 500; }
.zoek__titel b, .zoek__suggestie b { font-weight: 600; }
.zoek__sub { font-size: 0.875rem; color: var(--muted); }
.zoek__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.zoek__chips span { padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--dark) 15%, transparent); border-radius: 4px; font-size: 0.75rem; }
.zoek__actie { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 99px; font-size: 0.6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.zoek__actie svg { width: 14px; height: 14px; }
.zoek__actie--groen { background: var(--primary); color: var(--white, #fff); }
.zoek__actie--geel { background: var(--secondary); color: var(--dark); }
.zoek__product:not(:hover):not(.is-actief) .zoek__actie--groen { background: var(--white, #fff); color: var(--dark); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dark) 20%, transparent); }
.zoek__tips li { position: relative; padding-left: 14px; margin-bottom: 8px; font-size: 0.875rem; }
.zoek__tips li::before { content: ""; position: absolute; left: 0; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: var(--primary); }
.zoek__geen-icoon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--light); }
.zoek__geen-icoon svg { width: 18px; height: 18px; }
.zoek__geen-titel { margin: 20px 0 12px; font-size: 1.75rem; font-weight: 500; line-height: 1.25; }
.zoek__geen-tekst { margin: 0 0 24px; max-width: 560px; color: var(--muted); }
.zoek__kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.zoek__kaarten .zoek__kaart { align-self: stretch; }
.zoek__kaarten .zoek__kaart > :last-child { margin-top: auto; align-self: flex-start; }
.zoek__knop { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: 99px; background: var(--secondary); color: var(--dark); font: inherit; font-size: 0.6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.zoek__knop svg { width: 12px; height: 12px; }
.zoekpagina__lijst { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zoekpagina__lijst .zoek__product { background: var(--white, #fff); }

@media (max-width: 1023px) {
    .zoek__raster, .zoek__raster--resultaten { grid-template-columns: 1fr; gap: 32px; }
    .zoek__raster--resultaten > :first-child { order: 2; }
    .zoek__kaarten { grid-template-columns: 1fr; }
    .zoekpagina__lijst { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .zoek__vak { min-height: 100dvh; border-radius: 0; }
    .zoek__binnen { padding: 12px 0 32px; }
    .zoek__invoer { font-size: 1.375rem; }
    .zoek__balk { gap: 12px; padding-bottom: 14px; }
    .zoek__actie { width: 36px; padding: 0; justify-content: center; font-size: 0; }
    .zoek__actie--geel::before { content: "+"; font-size: 1rem; }
    .zoek__product { align-items: flex-start; padding: 10px 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .zoek__vak, .zoek__achtergrond { transition: none; }
}
.zoek__kaart a:not(.zoek__link) { color: inherit; }
.zoek__pil--wit { height: 48px; padding: 0 20px; background: var(--white, #fff); } .zoek__pil--wit svg { width: 16px; height: 16px; }

/* Lenis 1.3.11 (was een aparte stylesheet van unpkg, die het tonen van de pagina vertraagde) */
html.lenis,html.lenis body{height:auto}.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}.lenis.lenis-smooth iframe{pointer-events:none}.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}
[data-filter-zone="lijst"] { transition: opacity 0.2s; } [data-filter-zone="lijst"].is-laden { opacity: 0.5; pointer-events: none; }

/* Ronde pijlknoppen (alle .rounded--full met een pijl of chevron, en de sliderpijlen van de homepage): zelfde hover
   als de knoppen, een cirkel die vanuit het midden opvult (0,7 s) en een witte pijl. Hoort de pijl bij een
   klikbare kaart of rij, dan start de hover op die kaart of rij. Licht → donker, donker/groen → groen/donker. */
.pijl-rond,
.rounded--full:not(.home-item__pijl):has(> svg:is([data-icoon="arrow"], [data-icoon="chevron-left"], [data-icoon="chevron-right"])),
.home-pijl {
    --pijl-fill: var(--dark);
    isolation: isolate;
    overflow: hidden;
    transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1), border-color 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}
.rounded--full:not(.absolute):not(.home-item__pijl):not(.link--cover):has(> svg:is([data-icoon="arrow"], [data-icoon="chevron-left"], [data-icoon="chevron-right"])),
.home-pijl { position: relative; }
:is(.bg--dark, .home-pijl--volgende).rounded--full:has(> svg:is([data-icoon="arrow"], [data-icoon="chevron-left"], [data-icoon="chevron-right"])),
.home-pijl--volgende { --pijl-fill: var(--primary); }
.bg--primary.rounded--full:has(> svg:is([data-icoon="arrow"], [data-icoon="chevron-left"], [data-icoon="chevron-right"])) { --pijl-fill: var(--dark); }

.rounded--full:not(.home-item__pijl):not(.link--cover):has(> svg:is([data-icoon="arrow"], [data-icoon="chevron-left"], [data-icoon="chevron-right"]))::before,
.home-pijl::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--pijl-fill);
    scale: 0;
    transition: scale 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (hover: hover) {
    :is(a, button).rounded--full:not(:disabled):has(> svg:is([data-icoon="arrow"], [data-icoon="chevron-left"], [data-icoon="chevron-right"])):hover,
    :is(.kaart, .home-duo, .indexrij, .ruimte, article, li):hover .rounded--full:not(.home-item__pijl):has(> svg:is([data-icoon="arrow"], [data-icoon="chevron-left"], [data-icoon="chevron-right"])),
    .home-pijl:not(:disabled):hover { color: var(--white); border-color: var(--pijl-fill); }

    :is(a, button).rounded--full:not(:disabled):has(> svg:is([data-icoon="arrow"], [data-icoon="chevron-left"], [data-icoon="chevron-right"])):hover::before,
    :is(.kaart, .home-duo, .indexrij, .ruimte, article, li):hover .rounded--full:not(.home-item__pijl):has(> svg:is([data-icoon="arrow"], [data-icoon="chevron-left"], [data-icoon="chevron-right"]))::before,
    .home-pijl:not(:disabled):hover::before { scale: 1; }
}
:is(a, button).rounded--full:has(> svg:is([data-icoon="arrow"], [data-icoon="chevron-left"], [data-icoon="chevron-right"])):focus-visible::before,
.home-pijl:focus-visible::before { scale: 1; }
:is(a, button).rounded--full:has(> svg:is([data-icoon="arrow"], [data-icoon="chevron-left"], [data-icoon="chevron-right"])):focus-visible,
.home-pijl:focus-visible { color: var(--white); }

/* Het pijltje schuift er rechts uit en komt links terug binnen (bij "vorige" omgekeerd) */
@keyframes pijl-door { 0% { translate: 0 0; } 45% { translate: 180% 0; } 46% { translate: -180% 0; } 100% { translate: 0 0; } }
@keyframes pijl-terug { 0% { translate: 0 0; } 45% { translate: -180% 0; } 46% { translate: 180% 0; } 100% { translate: 0 0; } }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    :is(a, button).rounded--full:not(:disabled):has(> svg:is([data-icoon="arrow"], [data-icoon="chevron-left"], [data-icoon="chevron-right"])):hover > svg,
    :is(.kaart, .home-duo, .indexrij, .ruimte, article, li):hover .rounded--full:not(.home-item__pijl):has(> svg:is([data-icoon="arrow"], [data-icoon="chevron-left"], [data-icoon="chevron-right"])) > svg,
    .home-pijl:not(:disabled):hover > svg { animation: pijl-door 0.6s cubic-bezier(0.625, 0.05, 0, 1); }

    :is(a, button).rounded--full:not(:disabled):hover > svg:is(.icon--flip-x, [data-icoon="chevron-left"]),
    .home-pijl--vorige:not(:disabled):hover > svg { animation-name: pijl-terug; }
}
.home-item__samenvatting { font-size: 0.9375rem; line-height: 1.5rem; }

/* Headerknoppen (zoeken, mandje, openingsuren): bij hover iets donkerder dan hun eigen kleur */
#main-header [data-zoeken], .mandje-knop, #main-header button[data-openingsuren-status] { transition: background-color 0.2s ease-out; }
@media (hover: hover) {
    #main-header [data-zoeken]:hover,
    .mandje-knop:not(.is-gevuld):hover,
    #main-header button[data-openingsuren-status]:hover { background-color: color-mix(in srgb, var(--dark) 8%, var(--light)); }
    .mandje-knop.is-gevuld:hover { background-color: color-mix(in srgb, var(--dark) 85%, var(--white)); }
}
.footer-maker { color: color-mix(in srgb, var(--white) 80%, transparent); transition: color 0.25s ease; }
.footer-maker:hover, .footer-maker:focus-visible { color: var(--white); }
.footer-maker svg { display: block; width: 1.375rem; height: 1.3rem; }
/* Tooltip boven het ED-icoon */
.footer-maker::after {
    content: attr(data-tip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.625rem);
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    background-color: var(--dark);
    color: var(--white);
    font-size: 0.75rem;
    line-height: 1rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    translate: 0 0.25rem;
    transition: opacity 0.2s, translate 0.2s;
}
.footer-maker:hover::after, .footer-maker:focus-visible::after { opacity: 1; translate: 0 0; }
@media (max-width: 767px) { .footer-maker::after { right: auto; left: 0; } }
@media (min-width: 768px) { .filters-actief--onder { display: none; } }
/* Lijntje tussen "Filters" en de actieve filters: links en rechts 20 px (8 px gap van de werkbalk + 12 px) */
.filters-actief--balk { margin-left: 0.75rem; padding-left: 1.25rem; }
.filter-chip-actief { padding-right: 0.75rem; }
.filter-chip-actief:hover { background-color: color-mix(in srgb, var(--dark) 8%, var(--white)); }

/* Pijlcirkel die zelf de link over de hele rij is (.link--cover): geen eigen positionering (anders dekt de link
   enkel de cirkel), dus een kleurovergang i.p.v. de groeiende vulling */
.rounded--full.link--cover:has(> svg[data-icoon="arrow"]) { transition: background-color 0.3s, color 0.3s; }
@media (hover: hover) {
    :is(.kaart, .indexrij, .ruimte, article, li, .mogelijkheid):hover .rounded--full.link--cover:has(> svg[data-icoon="arrow"]) { background-color: var(--dark); color: var(--white); }
}

/* Lengtes (of formaten) in de configurator: lopen door naar een volgende regel, elk minstens 6,5rem breed */
.lengtes > .keuzepil { flex: 1 1 6.5rem; }

/* Melding (verlof) in de footer, onder de openingsuren */
.footer-melding__dot { --dot: var(--secondary); margin-top: 0.5rem; }
/* Op een groene achtergrond (footer): lichter groen zodat het open-bolletje zichtbaar blijft */
[data-status="open"] .status-dot--licht { --dot: color-mix(in srgb, var(--primary) 45%, var(--white)); }

/* Realisatie: grotere koppen voor fotogalerij en "Ook interessant", zachte zoom op de galerijfoto's */
.realisatie-sectie h2 { font-size: clamp(1.75rem, 1.39rem + 1.6vw, 2.5rem); line-height: 1.15; }
.galerij-raster__foto img { transition: scale 0.8s cubic-bezier(0.33, 1, 0.68, 1); }

/* Glazen kaart op een foto: verticaal gecentreerd */
.glas--midden { top: 50%; translate: 0 -50%; }
@media (max-width: 767px) { :has(> ul.glas--midden) { aspect-ratio: auto; } ul.glas.glas--midden { position: relative; top: auto; left: auto; right: auto; translate: none; margin: 1rem; } }

/* Twee secties met dezelfde achtergrond na elkaar: geen dubbele witruimte */
.section.bg--light + .section.bg--light > .wrapper,
.section.bg--primary + .section.bg--primary > .wrapper { padding-top: 0; }

/* Landingspagina's: hero en grote foto verborgen tot de beginstand van de animatie gezet is (ed-animation.js) */
.anim:not(.anim-klaar) .landing > section:first-of-type .wrapper,
.anim:not(.anim-klaar) .landing > .hero-foto .wrapper { visibility: hidden; }
/* Landingspagina's: twee witte secties na elkaar krijgen samen één sectie-witruimte (niet 2 × 128 px) */
.landing > .section:not(.hero-foto):not([class*="bg--"]):not(:first-child) + .section:not([class*="bg--"]) > .wrapper,
.landing > .section.bg--white + .section:not([class*="bg--"]) > .wrapper,
.landing > .section:not(.hero-foto):not([class*="bg--"]):not(:first-child) + .section.bg--white > .wrapper,
.landing > .section.bg--white + .section.bg--white > .wrapper { padding-top: 0; }

/* Aantal achter een sectietitel, bv. "Vind wat u zoekt (05)" */
.h2-aantal { display: inline-block; vertical-align: top; margin-left: 0.5em; padding-top: 0.2em; font-size: 1rem; line-height: 1.25rem; font-weight: 500; letter-spacing: 0.1em; color: var(--primary); }

.chip-link { position: relative; z-index: 1; }
.chip-link:hover { background-color: var(--secondary); }

/* Merktegel op een witte sectie: grijze achtergrond zodat de kaart zichtbaar is */
main:not(.bg--light) > .section:not([class*="bg--"]) .merktegel, .section.bg--white .merktegel { background-color: var(--light); }

/* Kaartenrij tot aan de rechter schermrand (interieur: realisaties en extra's), zoals op de homepage */
.rij-sectie { padding-right: 0; }
.rij-tot-rand > :not(.slider) { margin-right: var(--section-x); }
.rij-tot-rand > .slider { padding-right: var(--section-x); }

/* Grijze pagina (main.bg--light): secties zonder eigen achtergrond na elkaar krijgen geen dubbele witruimte */
main.bg--light > .section:not([class*="bg--"]) + .section:not([class*="bg--"]) > .wrapper { padding-top: 0; }