/* Bouwdam — aanvullingen op basis.css (het ontwerp, ongewijzigd).

   1. WordPress-koppeling: beheerbalk, bewerk-ankers, overslaan-link.
   2. Wat de WordPress-markup anders doet dan React (uitspraak-dia's, FAQ-paneel).
   3. Afwerking bovenop het ontwerp: overgangen, hovers en focus waar ze ontbraken,
      en de tussenmaten (701–1000px) waar beelden in het ontwerp te groot werden.
   Zonder deze regels ziet alles er op desktop precies zo uit als het ontwerp. */

@layer components {

  /* ---------------------------------------------------------------------
     1. WordPress-koppeling
     --------------------------------------------------------------------- */

  /* Ingelogd: de vaste kop direct onder de beheerbalk, in elke stand.
     --bdm-beheerbalk = hoogte van de beheerbalk (32px, onder 783px 46px) en 0 als
     die er niet is of met de knop "Admin bar verbergen" is weggezet (dan haalt de
     basis ook de marge van html weg). Onder 601px laat WordPress de balk
     meescrollen; daar zetten we hem ook vast, anders valt er een gat of schuift
     de balk over de kop. */
  [data-bdm] { --bdm-beheerbalk: 0px; }
  html:not(.qz-adminbar-hidden) .admin-bar[data-bdm] { --bdm-beheerbalk: 32px; }
  @media (width <= 782px) {
    html:not(.qz-adminbar-hidden) .admin-bar[data-bdm] { --bdm-beheerbalk: 46px; }
  }
  [data-bdm] .bdm-balk { top: var(--bdm-beheerbalk); }
  [data-bdm] .bdm-mobielmenu { top: calc(102px + var(--bdm-beheerbalk)); }

  /* De body-regel uit de bundel van het ontwerp (valt buiten [data-bdm]). */
  body[data-bdm] {
    color: #0b0b0f;
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* Algemene regel uit de bundel die ook op Bouwdam werkt (niet [data-bdm], dus niet
     in basis.css): de kruimelpad-links hebben 3px boven en onder. */
  [data-bdm] nav[aria-label="Kruimelpad"] a { padding-block: 3px; }

  /* Verborgen bewerk-ankers tellen niet mee voor de ruimte tussen de lagen. */
  /* Alleen de ruimte TUSSEN lagen (.bdm-pagina > * + *) terugzetten; de paginakop houdt zijn
     eigen bovenruimte, anders schuift hij ingelogd onder de navbar. */
  [data-bdm] .bdm-pagina > .qz-laag-anker:first-child + :not(.bdm-paginakop) { padding-top: 0; }

  /* Overslaan-link: pas zichtbaar met het toetsenbord. */
  [data-bdm] .bdm-overslaan {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    padding: 12px 20px;
    border-radius: var(--bdm-radius-knop);
    background-color: var(--bdm-kop);
    color: var(--bdm-wit);
    font-family: var(--bdm-font);
    font-weight: 500;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform .2s;
  }
  [data-bdm] .bdm-overslaan:focus-visible { transform: none; }

  /* De hero-afbeelding als er geen film is: zelfde plek als de video. */
  [data-bdm] img.bdm-hero__beeld { max-width: none; }

  /* ---------------------------------------------------------------------
     2. Markup van WordPress
     --------------------------------------------------------------------- */

  /* Uitspraken: elke uitspraak is een eigen dia, de kaart houdt zijn opmaak. */
  [data-bdm] .bdm-uitspraak__dia { display: contents; }
  [data-bdm] .bdm-uitspraak__dia.is--komt > * { animation: bdm-dia-in .45s cubic-bezier(.4, 0, .2, 1) both; }
  [data-bdm] .bdm-uitspraak__dia.is--komt > * + * { animation-delay: .06s; }

  /* Lange uitspraken (reviews): acht regels, "Lees de hele review" klapt uit. */
  [data-bdm] .bdm-uitspraak__citaat.is--ingekort:not(.is--open) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    overflow: hidden;
  }
  [data-bdm] .bdm-uitspraak__meer {
    align-self: flex-start;
    margin-top: calc(-1 * var(--bdm-8));
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--bdm-font);
    color: var(--bdm-oranje);
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color .2s;
  }
  @media (hover: hover) {
    [data-bdm] .bdm-uitspraak__meer:hover { text-decoration-color: currentColor; }
  }

  /* Ankers (inhoudsopgave): zonder JS landt het doel niet onder de vaste kop. */
  [data-bdm] [id] { scroll-margin-top: calc(var(--bdm-nav2-hoogte) + var(--bdm-beheerbalk) + 24px); }

  /* FAQ: het antwoord zit in een paneel dat soepel open- en dichtschuift. */
  [data-bdm] .bdm-vragen__paneel { overflow: hidden; }
  [data-bdm] .bdm-vragen__rij.is--sluit .bdm-vragen__vraag svg { transform: none; }

  /* Hamburger: open- en sluiticoon in één svg. */
  [data-bdm] .bdm-balk__hamburger .bdm-hamburger__dicht,
  [data-bdm] .bdm-balk__hamburger[aria-expanded="true"] .bdm-hamburger__open { display: none; }
  [data-bdm] .bdm-balk__hamburger[aria-expanded="true"] .bdm-hamburger__dicht { display: inline; }

  /* Logo's van opdrachtgevers: eenkleurig, optische hoogte zit in het bestand → allemaal 40px. */
  [data-bdm] .bdm-namen__logo {
    width: auto;
    max-width: 240px;
    height: 40px;
    object-fit: contain;
  }
  [data-bdm] .bdm-namen__rij a { color: inherit; text-decoration: none; }
  /* Zelfde hoogte als de logovakken in het ontwerp (40px), ook met alleen namen. */
  [data-bdm] .bdm-namen__rij li { min-height: 40px; }

  /* ---------------------------------------------------------------------
     3. Afwerking
     --------------------------------------------------------------------- */

  /* Focus: het ontwerp gaf overal een witte rand, onzichtbaar op licht vlak. */
  [data-bdm] a:focus-visible,
  [data-bdm] button:focus-visible,
  [data-bdm] summary:focus-visible {
    outline: 2px solid var(--bdm-kop);
    outline-offset: 3px;
    border-radius: 4px;
  }
  [data-bdm] .bdm-hero a:focus-visible,
  [data-bdm] .bdm-voet a:focus-visible { outline-color: var(--bdm-wit); }
  [data-bdm] summary:focus-visible { outline-offset: -2px; }

  /* Uitklapper (Divisies) en mobiel menu: ook bij sluiten een overgang. */
  [data-bdm] .bdm-uitklap.is--weg { animation: bdm-uitklap-uit .16s ease-in both; }
  [data-bdm] .bdm-mobielmenu.is--weg { animation: bdm-menu-uit .18s ease-in both; }

  /* Tekstlink in de hero: onderstreping vloeit in. */
  [data-bdm] .bdm-tekstlink {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color .2s;
  }
  [data-bdm] .bdm-tekstlink:hover { text-decoration-color: currentColor; }

  /* Knoppen onder de schuifrijen en in de kaarten: dezelfde zachte hover. */
  [data-bdm] .bdm-schuif__alle,
  [data-bdm] .bdm-knop { transition: background-color .2s, color .2s, box-shadow .2s; }
  @media (hover: hover) {
    [data-bdm] .bdm-schuif__alle:hover { box-shadow: var(--bdm-kaart-schaduw); }
  }

  /* Projectkaart: de hele kaart is klikbaar (hij tilde al op bij hover). */
  [data-bdm] .bdm-project { position: relative; }
  [data-bdm] .bdm-project__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--bdm-tegel-radius);
  }
  [data-bdm] .bdm-project__link:focus-visible { outline: 0; }
  [data-bdm] .bdm-project:has(.bdm-project__link:focus-visible) {
    outline: 2px solid var(--bdm-kop);
    outline-offset: 3px;
    border-radius: var(--bdm-tegel-radius);
  }
  @media (hover: hover) {
    [data-bdm] .bdm-project:hover .bdm-project__link svg { transform: translate(4px); }
  }

  /* Beelden in kaarten zoomen heel licht mee met de hover. */
  [data-bdm] .bdm-bericht__beeld,
  [data-bdm] .bdm-tegel__beeld { transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
  @media (hover: hover) {
    [data-bdm] .bdm-bericht__link:hover .bdm-bericht__beeld,
    [data-bdm] .bdm-tegel:hover .bdm-tegel__beeld { transform: scale(1.03); }
  }
  [data-bdm] .bdm-project__beeld { transition: filter .3s; }

  /* FAQ: vraag licht op, pijltje draait al (ontwerp). */
  [data-bdm] summary.bdm-vragen__vraag { transition: color .2s; }
  @media (hover: hover) {
    [data-bdm] summary.bdm-vragen__vraag:hover { color: var(--bdm-oranje); }
  }

  /* Footer: socials, telefoon en e-mail zijn links met dezelfde hover als de lijst. */
  [data-bdm] .bdm-voet__rond {
    text-decoration: none;
    transition: background-color .2s, color .2s;
  }
  [data-bdm] .bdm-voet__contactlink {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
  }
  @media (hover: hover) {
    [data-bdm] a.bdm-voet__rond:hover { background-color: #ffffff29; color: var(--bdm-wit); }
    [data-bdm] .bdm-voet__contactlink:hover { color: var(--bdm-wit); }
  }

  /* Uitspraak-knoppen: bij één uitspraak zijn ze uit (grijs, ontwerp). Kun je terug,
     dan is de terugknop zwart zodat je ziet dat hij werkt. */
  [data-bdm] .bdm-uitspraak__knop.is--vorige:not(:disabled) {
    color: var(--bdm-tekst);
    border-color: var(--bdm-tekst);
  }

  /* ---------------------------------------------------------------------
     Subpagina's: wat het ontwerp als demo niet had (fouten, lightbox, laden)
     --------------------------------------------------------------------- */

  /* Formulieren: honeypot weg, keuzelijst zoals de invoervelden, fouten per veld. */
  [data-bdm] .bdm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  [data-bdm] .bdm-formulier__veld select {
    width: 100%;
    padding: 13px var(--bdm-16);
    border: 1px solid rgb(var(--bdm-donker) / 0.15);
    border-radius: var(--bdm-radius-knop);
    background-color: var(--bdm-wit);
    font-family: var(--bdm-font);
    color: var(--bdm-tekst);
    font-size: 16px;
    line-height: 26px;
    transition: border-color .2s, box-shadow .2s;
  }
  [data-bdm] .bdm-formulier__veld select:focus-visible {
    border-color: var(--bdm-oranje);
    box-shadow: 0 0 0 1px var(--bdm-oranje);
    outline: none;
  }
  [data-bdm] .bdm-formulier__veld [aria-invalid="true"] {
    border-color: #b3261e;
    box-shadow: 0 0 0 1px #b3261e;
  }
  [data-bdm] .bdm-formulier__fout {
    margin: 0;
    font-family: var(--bdm-font);
    color: #b3261e;
    font-size: 14px;
    line-height: 21px;
  }
  [data-bdm] .bdm-formulier__samenvatting {
    padding: var(--bdm-16) var(--bdm-24);
    border-radius: var(--bdm-radius-knop);
    background-color: #fbe7e5;
    font-family: var(--bdm-font);
    color: #8c1d18;
    font-size: 15px;
    line-height: 1.5;
  }
  [data-bdm] .bdm-formulier__samenvatting p { margin: 0 0 var(--bdm-8); font-weight: 600; }
  [data-bdm] .bdm-formulier__samenvatting ul { margin: 0; padding-left: 1.2em; list-style: disc; }
  [data-bdm] .bdm-formulier__samenvatting a { color: inherit; text-decoration: underline; }
  [data-bdm] .bdm-formulier__kaart.is--bezig .bdm-formulier__knop { opacity: .6; cursor: progress; }
  [data-bdm] .bdm-formulier__kaart.is--verstuurd .bdm-formulier__melding { color: var(--bdm-groen); font-weight: 600; }
  /* Vinkje (toestemming), als Gravity Forms er een heeft. */
  [data-bdm] .bdm-formulier__veld.is--vink { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  [data-bdm] .bdm-formulier__veld.is--vink input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--bdm-oranje); padding: 0; }
  [data-bdm] .bdm-formulier__veld.is--vink label { flex: 1; font-weight: 400; }
  [data-bdm] .bdm-formulier__veld.is--vink .bdm-formulier__fout { flex-basis: 100%; }

  /* Bestand (cv): eigen knop in de stijl van het ontwerp (::file-selector-button), met de
     bestandsnaam ernaast; het echte veld blijft bruikbaar voor toetsenbord en schermlezer. */
  [data-bdm] .bdm-bestand {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--bdm-16);
    min-height: 54px;
    padding: 6px var(--bdm-16) 6px 6px;
    border: 1px solid rgb(var(--bdm-donker) / 0.15);
    border-radius: var(--bdm-radius-knop);
    background-color: var(--bdm-wit);
    transition: border-color .2s, box-shadow .2s;
  }
  [data-bdm] .bdm-bestand .bdm-formulier__bestand {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    padding: 0;
    border: 0;
  }
  [data-bdm] .bdm-bestand__knop {
    flex: none;
    padding: 8px var(--bdm-16);
    border: 1px solid rgb(var(--bdm-donker) / 0.15);
    border-radius: 12px;
    font-family: var(--bdm-font);
    color: var(--bdm-kop);
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    transition: border-color .2s, background-color .2s;
    pointer-events: none;
  }
  [data-bdm] .bdm-bestand__naam {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--bdm-font);
    color: var(--bdm-kop-stil);
    font-size: 15px;
  }
  @media (hover: hover) {
    [data-bdm] .bdm-bestand:hover .bdm-bestand__knop { border-color: var(--bdm-kop); }
  }
  [data-bdm] .bdm-bestand:focus-within {
    border-color: var(--bdm-oranje);
    box-shadow: 0 0 0 1px var(--bdm-oranje);
  }
  [data-bdm] .bdm-bestand:has([aria-invalid="true"]) {
    border-color: #b3261e;
    box-shadow: 0 0 0 1px #b3261e;
  }

  /* Vacaturekaart: lange titels (Calculator/Werkvoorbereider) breken af in de kaart. */
  [data-bdm] .bdm-vacature__blad { min-width: 0; }

  /* Fotovergroting: boven de vaste kop, met in- en uitvloeien. */
  [data-bdm] .bdm-galerij__over { z-index: 200; animation: bdm-over-in .2s ease-out; }
  [data-bdm] .bdm-galerij__over.is--weg { animation: bdm-over-uit .18s ease-in both; }
  /* Vorige/volgende in de vergroting (het ontwerp had alleen toetsen): links en rechts,
     op telefoon onderaan naast elkaar. */
  [data-bdm] .bdm-galerij__nav { position: absolute; top: 50%; transform: translateY(-50%); }
  [data-bdm] .bdm-galerij__nav.is--links { left: var(--bdm-24); }
  [data-bdm] .bdm-galerij__nav.is--rechts { right: var(--bdm-24); }
  @media (width <= 700px) {
    [data-bdm] .bdm-galerij__nav { top: auto; bottom: var(--bdm-24); transform: none; }
    [data-bdm] .bdm-galerij__nav.is--links { left: calc(50% - 56px); }
    [data-bdm] .bdm-galerij__nav.is--rechts { right: calc(50% - 56px); }
  }

  /* Artikel: de lege kop (titel staat al in de paginakop) gaf 48px extra lucht boven
     de tekst; zonder die kop is de afstand gelijk aan die tussen andere lagen. */
  [data-bdm] .bdm-artikel__kop.is--kaal:empty { display: none; }

  /* Fotoraster: het zesde vak toont hoeveel foto's er nog meer zijn. */
  [data-bdm] .bdm-galerij__vak.is--meer { position: relative; }
  [data-bdm] .bdm-galerij__meer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background-color: rgb(var(--bdm-donker) / 0.55);
    font-family: var(--bdm-font);
    color: var(--bdm-wit);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.4px;
    transition: background-color .25s;
  }
  @media (hover: hover) {
    [data-bdm] .bdm-galerij__vak.is--meer:hover .bdm-galerij__meer { background-color: rgb(var(--bdm-donker) / 0.4); }
  }

  /* Kaarten die bij filteren of "meer laden" verschijnen vloeien zacht in. */
  [data-bdm] .bdm-filterraster__raster > li.is--komt { animation: bdm-dia-in .4s cubic-bezier(.4, 0, .2, 1) both; }


  /* ---------------------------------------------------------------------
     Tussenmaten
     --------------------------------------------------------------------- */

  /* Cijferstrook: het ontwerp (minmax 180px) brak op 700–1000px als 2 + 1 met een
     verweesd cijfer. Kleinere minimumbreedte = drie naast elkaar tot ~560px; daaronder
     onder elkaar. Op desktop verandert er niets (drie gelijke kolommen). */
  [data-bdm] .bdm-cijfers__strook { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
  @media (width <= 560px) {
    [data-bdm] .bdm-cijfers__strook { grid-template-columns: minmax(0, 1fr); }
  }

  /* Voet onder de schuifrijen op kleine schermen: passen knop en pijltjes niet
     naast elkaar (onder ~390px bij "Bekijk alle projecten"), dan gaan de pijltjes
     naar een eigen regel, rechts. Anders blijft het zoals het ontwerp. */
  @media (width <= 1000px) {
    [data-bdm] .bdm-schuif__voet {
      flex-wrap: wrap;
      row-gap: var(--bdm-16);
    }
    [data-bdm] .bdm-schuif__knoppen { margin-left: auto; }
  }
  /* Op telefoons 8px tussen knop en pijltjes: op 390px paste "Bekijk alle projecten"
     er met 16px net niet naast (1px tekort; het ontwerp liet dat stil uitsteken). */
  @media (width <= 700px) {
    [data-bdm] .bdm-schuif__voet { column-gap: var(--bdm-8); }
  }

  /* 701–1000px: in het ontwerp werden de divisietegels hier drie keer een volle
     breedte (660 × 420 per stuk), en tussen 1000 en ~1150px werden het drie smalle
     torens (240 × 588) waarin "Transformeren" niet meer paste. Van 701 tot 1200px (exclusief):
     twee naast elkaar, de derde liggend over de volle breedte eronder. */
  @media (701px <= width < 1200px) {
    [data-bdm] .bdm-divisies__raster {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    [data-bdm] .bdm-divisies__raster > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    [data-bdm] .bdm-tegel {
      gap: var(--bdm-48);
      height: auto;
      min-height: 480px;
    }
    /* Smalste stuk (701–~950): kop en binnenmarge schalen mee, anders past
       "Transformeren" niet in een tegel van 245px. Vanaf ~950 weer 32px zoals ontwerp. */
    [data-bdm] .bdm-tegel__naam { font-size: clamp(26px, 3.4vw, 32px); }
    [data-bdm] .bdm-tegel { padding: clamp(24px, 3.4vw, 32px); }
    [data-bdm] .bdm-divisies__raster > li:last-child:nth-child(odd) .bdm-tegel { min-height: 380px; }
    [data-bdm] .bdm-divisies__raster > li:last-child:nth-child(odd) .bdm-tegel__onder { max-width: 520px; align-self: flex-start; }
  }

  /* 901–1200px: tekst + "In het kort"/gegevens naast elkaar. Het ontwerp (1fr + 380px,
     gap 64) liet de tekst op 1024px maar 306px breed; nu ~450px. */
  @media (901px <= width <= 1200px) {
    [data-bdm] .bdm-projectdetail__rij {
      grid-template-columns: minmax(0, 1fr) minmax(260px, 32%);
      gap: var(--bdm-40);
    }
  }

  @media (701px <= width <= 1000px) {
    /* Voet onder de schuifrijen: in het ontwerp staan de pijltjes in het midden;
       onder ~780px schoven ze tegen "Bekijk alle projecten" aan. Hier dezelfde
       indeling als op mobiel (ontwerp ≤700): knop links, pijltjes rechts. */
    [data-bdm] .bdm-schuif__voet {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--bdm-16);
    }
    [data-bdm] .bdm-schuif__alle { white-space: nowrap; }

    /* Project- en nieuwskaarten waren 82vw breed (beeld tot 560px hoog). */
    [data-bdm] .bdm-project,
    [data-bdm] .bdm-bericht { width: min(532px, 62vw); }
  }

  /* 701–900px: het contactbeeld werd over de volle breedte ruim 400px hoog. */
  @media (701px <= width <= 900px) {
    [data-bdm] .bdm-contact__beeld {
      height: auto;
      min-height: 0;
      aspect-ratio: 16 / 9;
    }
  }
}

/* Buiten de laag: de CSS van de beheerbalk zelf staat ook niet in een laag en zou
   anders altijd winnen. Onder 601px de balk vast, net als de kop eronder. */
@media (width <= 600px) {
  html:not(.qz-adminbar-hidden) body.admin-bar #wpadminbar { position: fixed; }
}

@keyframes bdm-dia-in {
  0% { opacity: 0; transform: translateY(8px); }
}
@keyframes bdm-over-in {
  0% { opacity: 0; }
}
@keyframes bdm-over-uit {
  to { opacity: 0; }
}
@keyframes bdm-uitklap-uit {
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes bdm-menu-uit {
  to { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-bdm] .bdm-uitspraak__dia.is--komt > *,
  [data-bdm] .bdm-uitklap.is--weg,
  [data-bdm] .bdm-mobielmenu.is--weg { animation: none; }
  [data-bdm] .bdm-bericht__beeld,
  [data-bdm] .bdm-tegel__beeld { transition: none; }
}

/* Inhoudsopgave op landingspagina's: ook ingelogd onder de beheerbalk. */
@layer components {
  [data-bdm] .bdm-ankers { top: calc(var(--bdm-nav2-hoogte) + var(--bdm-beheerbalk) + var(--bdm-24)); }
}

/* Subpagina's: overgangen waar het ontwerp de hover hard liet omspringen, en een hover
   voor de deelknoppen (had er geen). Alleen hover-apparaten; kleuren uit het ontwerp. */
@layer components {
  [data-bdm] .bdm-expertises__link { transition: color .2s; }
  [data-bdm] .bdm-expertises__link svg { transition: transform .25s, opacity .2s; }
  [data-bdm] .bdm-filterraster__filter { transition: border-color .2s, background-color .2s, color .2s; }
  [data-bdm] .bdm-filterraster__meerknop { transition: border-color .2s, box-shadow .25s; }
  [data-bdm] .bdm-contactkaart__knop,
  [data-bdm] .bdm-paginakop__knop { transition: background-color .25s, border-color .25s; }
  [data-bdm] .bdm-galerij__vak img { transition: transform .5s cubic-bezier(.4, 0, .2, 1); }

  /* Onderstrepingen vloeien in in plaats van hard te verschijnen. */
  [data-bdm] .bdm-populair__titel,
  [data-bdm] .bdm-persoon__contact a,
  [data-bdm] .bdm-vestiging__contact a,
  [data-bdm] .bdm-kruimels__link,
  [data-bdm] .bdm-artikel__deellink {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color .2s, color .2s;
  }
  @media (hover: hover) {
    [data-bdm] .bdm-populair__rij:hover .bdm-populair__titel,
    [data-bdm] .bdm-persoon__contact a:hover,
    [data-bdm] .bdm-vestiging__contact a:hover,
    [data-bdm] .bdm-kruimels__link:hover,
    [data-bdm] .bdm-artikel__deellink:hover { text-decoration-color: currentColor; }
  }

  /* Deelknoppen onder een artikel: zelfde hover als het ronde pijlknopje op de nieuwskaarten. */
  [data-bdm] .bdm-artikel__deelknop { text-decoration: none; transition: background-color .25s, color .25s; }
  @media (hover: hover) {
    [data-bdm] .bdm-artikel__deelknop:hover { background-color: var(--bdm-tekst); color: var(--bdm-wit); }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-bdm] .bdm-galerij__vak img { transition: none; }
  }
}

/* Lange woorden in koppen (bv. oude projecttitels als "Pythagorasstraat") breken af in
   plaats van buiten beeld te lopen. Doet niets zolang een woord past. */
@layer components {
  [data-bdm] :is(h1, h2, h3, .bdm-project__naam, .bdm-bericht__titel, .bdm-populair__titel) { overflow-wrap: break-word; }
}

/* Project zonder gegevens: contactkaart onder de tekst in de tekstkolom (i.p.v. los in een leeg vlak) */
@layer components {
  [data-bdm] .bdm-projectdetail__persoon-los { margin-top: var(--bdm-48, 48px); }
  [data-bdm] .bdm-projectdetail__verhaal > .bdm-projectdetail__persoon-los:first-child { margin-top: 0; }
}

/* Projectraster: rijen zo hoog als hun eigen kaarten (ontwerp: 1fr = elke rij zo hoog als de hoogste
   kaart van het hele raster → lege vlakken bij oude projecten zonder gegevens). Kort = eigen tekst. */
@layer components {
  [data-bdm] .bdm-filterraster__raster { grid-auto-rows: auto; }
  [data-bdm] .bdm-project__kort {
    margin: 0; margin-top: auto; padding-top: 19px; border-top: 1px solid rgb(var(--bdm-donker) / .1);
    font-family: var(--bdm-font); color: var(--bdm-kop-stil); font-size: 14px; line-height: 21px; letter-spacing: -.2px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
}

/* Koppen mogen in flex/grid-vakken niet breder worden dan hun kolom (lange samenstellingen). */
@layer components {
  [data-bdm] .bdm-paginakop__kop, [data-bdm] .bdm-paginakop__tekst { min-width: 0; max-width: 100%; }
}

/* ≤900 (ontwerpfout, ook op Vercel): het tekstvak van een brede tekstblok-rij hield flex-basis 525px;
   onder elkaar werd dat 525px HOOGTE → leeg gat tussen tekst en foto. Logoblok: dubbele zijmarge
   (breedte in breedte) → 48px i.p.v. 24px. */
@layer components {
  @media (width <= 900px) {
    [data-bdm] .bdm-tekstblok__breed .bdm-tekstblok__binnen { flex: none; max-width: none; }
    [data-bdm] .bdm-breedte .bdm-logos > .bdm-breedte { width: 100%; }
  }
}

/* Zijmarge 701–900: ontwerp sprong van 24px (≤700) naar 13,4vw (=94px op 701, 100px op 750).
   Nu glijdend 24 → 120px, sluit op 700 en 900 naadloos aan. Keurmerken 2×2 i.p.v. 3+1 verweesd. */
@layer components {
  @media (701px <= width <= 900px) {
    [data-bdm] .bdm-breedte, [data-bdm] .bdm-schuif__baan { --bdm-marge: clamp(24px, 24px + (100vw - 700px) * .48, 13.4vw); }
  }
  @media (width <= 900px) {
    [data-bdm] .bdm-logos__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

/* Grote tekstblok-foto ≤900: ontwerp gaf vast 320px hoog → op 750 (654 breed) viel het dak eraf.
   Nu de verhouding van desktop (601×518), minimaal 320px; op 390 blijft hij 320. */
@layer components {
  @media (width <= 900px) {
    [data-bdm] .bdm-tekstblok__beeld.is--groot { height: auto; aspect-ratio: 601 / 518; min-height: 320px; }
  }
}

/* Zoekresultaten (search.php; geen ontwerp — in de stijl van de nieuwslijst/tekstkolom) */
@layer components {
  [data-bdm] .bdm-zoek { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgb(var(--bdm-donker) / .1); }
  [data-bdm] .bdm-zoek__item { padding: var(--bdm-24) 0; border-bottom: 1px solid rgb(var(--bdm-donker) / .1); display: flex; flex-direction: column; gap: 6px; }
  [data-bdm] .bdm-zoek__link { font-family: var(--bdm-font); color: var(--bdm-tekst); font-size: 19.4px; font-weight: 600; line-height: 25px; letter-spacing: -.389px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .2s, color .2s; }
  [data-bdm] .bdm-zoek__link:hover { color: var(--bdm-oranje); text-decoration-color: currentColor; }
  [data-bdm] .bdm-zoek__tekst { margin: 0; font-family: var(--bdm-font); color: var(--bdm-kop-stil); font-size: 15px; line-height: 1.5; }
  [data-bdm] .bdm-projectdetail__verhaal .navigation.pagination { margin-top: var(--bdm-32, 32px); }
  [data-bdm] .bdm-projectdetail__verhaal .nav-links { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--bdm-font); }
  [data-bdm] .bdm-projectdetail__verhaal .nav-links .page-numbers { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--bdm-tekst); background: var(--bdm-wit); text-decoration: none; transition: background-color .2s, color .2s; }
  [data-bdm] .bdm-projectdetail__verhaal .nav-links .page-numbers.current,
  [data-bdm] .bdm-projectdetail__verhaal .nav-links a.page-numbers:hover { background: var(--bdm-tekst); color: var(--bdm-wit); }
}

/* WP-standaard: alleen voor schermlezers (paginering, formulieren) */
@layer base {
  [data-bdm] .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* ── Mobiel menu: uiterlijk (feedback 24-09) ─────────────────────────────────
   Zachte grond i.p.v. wit, grotere hoofditems die kort na elkaar inschuiven, pijl in een
   rond knopje, huidige pagina oranje, divisies als fototegels, onderaan bellen/mailen/socials. */
@layer components {
  [data-bdm] .bdm-mobielmenu { background-color: var(--bdm-grond); }
  [data-bdm] .bdm-mobielmenu__veld { min-height: 100%; padding-top: var(--bdm-16); }

  /* rijen */
  [data-bdm] .bdm-mobielmenu__veld > a, [data-bdm] .bdm-mobielmenu__dieper {
    transition: color .2s, opacity .2s; -webkit-tap-highlight-color: transparent;
  }
  [data-bdm] [data-veld="hoofd"] > a, [data-bdm] [data-veld="hoofd"] > .bdm-mobielmenu__dieper {
    min-height: 4.25rem; font-size: 1.625rem; letter-spacing: -.04em;
  }
  [data-bdm] .bdm-mobielmenu__veld > a[aria-current="page"] { color: var(--bdm-oranje); }
  [data-bdm] .bdm-mobielmenu__veld > a:active, [data-bdm] .bdm-mobielmenu__dieper:active { opacity: .6; }
  @media (hover: hover) {
    [data-bdm] .bdm-mobielmenu__veld > a:not(.bdm-mobielmenu__contact):hover,
    [data-bdm] .bdm-mobielmenu__dieper:hover { color: var(--bdm-oranje); }
  }

  /* pijl in rond knopje */
  [data-bdm] .bdm-mobielmenu__pijl {
    flex: none; width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--bdm-wit); color: var(--bdm-kop); transition: background-color .25s, color .25s, transform .25s cubic-bezier(.4,0,.2,1);
  }
  [data-bdm] .bdm-mobielmenu__pijl svg { color: inherit; }
  [data-bdm] .bdm-mobielmenu__dieper:hover .bdm-mobielmenu__pijl,
  [data-bdm] .bdm-mobielmenu__dieper:focus-visible .bdm-mobielmenu__pijl { background: var(--bdm-oranje); color: var(--bdm-wit); transform: translateX(3px); }

  /* terug als pilletje, titel groter */
  [data-bdm] .bdm-mobielmenu__terug {
    margin-left: 0; padding: 0 16px 0 10px; min-height: 2.5rem; border-radius: 999px; background: var(--bdm-wit);
    color: var(--bdm-kop); font-size: .9375rem; transition: background-color .2s, color .2s;
  }
  [data-bdm] .bdm-mobielmenu__terug:hover { background: var(--bdm-kop); color: var(--bdm-wit); }
  [data-bdm] .bdm-mobielmenu__titel { margin: var(--bdm-24) 0 var(--bdm-16); font-size: 2.25rem; letter-spacing: -.05em; }

  /* divisies als fototegels */
  [data-bdm] .bdm-mobielmenu__dieper.is--divisie {
    justify-content: flex-start; gap: var(--bdm-16); margin-bottom: var(--bdm-12); padding: 10px 14px 10px 10px;
    border: 0; border-radius: 20px; background: var(--bdm-wit); min-height: 0; transition: box-shadow .25s, transform .25s cubic-bezier(.4,0,.2,1);
  }
  [data-bdm] .bdm-mobielmenu__dieper.is--divisie:hover { box-shadow: var(--bdm-kaart-schaduw); color: inherit; }
  [data-bdm] .bdm-mobielmenu__dieper.is--divisie:active { transform: scale(.98); opacity: 1; }
  [data-bdm] .bdm-mobielmenu__beeld { flex: none; width: 88px; height: 88px; border-radius: 14px; object-fit: cover; }
  [data-bdm] .bdm-mobielmenu__wat { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  [data-bdm] .bdm-mobielmenu__naam { font-size: 1.25rem; font-weight: 600; letter-spacing: -.03em; color: var(--bdm-kop); line-height: 1.3; }
  [data-bdm] .bdm-mobielmenu__uitleg {
    font-size: .875rem; font-weight: 400; letter-spacing: -.01em; line-height: 1.4; color: var(--bdm-kop-stil);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  [data-bdm] .bdm-mobielmenu__dieper.is--divisie .bdm-mobielmenu__pijl { background: var(--bdm-grond); }
  [data-bdm] [data-veld="divisies"] > a { margin-top: var(--bdm-8); border-top: 0; }

  /* contactknop: kleine lift */
  [data-bdm] .bdm-mobielmenu__contact.bdm-mobielmenu__contact { margin-top: var(--bdm-32, 32px); min-height: 3.5rem; font-weight: 600; transition: background-color .2s, transform .25s cubic-bezier(.4,0,.2,1); }
  [data-bdm] .bdm-mobielmenu__contact.bdm-mobielmenu__contact:hover { background-color: #dd6a14; }
  [data-bdm] .bdm-mobielmenu__contact svg { transition: transform .25s; }
  [data-bdm] .bdm-mobielmenu__contact:hover svg { transform: translateX(4px); }

  /* voet: bellen, mailen, socials */
  [data-bdm] .bdm-mobielmenu__voet {
    margin-top: auto; padding-top: var(--bdm-40); display: flex; flex-direction: column; gap: var(--bdm-12);
  }
  [data-bdm] .bdm-mobielmenu__direct {
    display: inline-flex; align-items: center; gap: var(--bdm-12); align-self: flex-start;
    font-family: var(--bdm-font); font-size: 1rem; font-weight: 500; letter-spacing: -.02em; color: var(--bdm-kop); text-decoration: none; transition: color .2s;
  }
  [data-bdm] .bdm-mobielmenu__icoon {
    width: 40px; height: 40px; border-radius: 999px; background: var(--bdm-wit); color: var(--bdm-oranje);
    display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s, color .2s;
  }
  [data-bdm] .bdm-mobielmenu__direct:hover { color: var(--bdm-oranje); }
  [data-bdm] .bdm-mobielmenu__direct:hover .bdm-mobielmenu__icoon { background: var(--bdm-oranje); color: var(--bdm-wit); }
  [data-bdm] .bdm-mobielmenu__sociaal { display: flex; gap: var(--bdm-8); margin: var(--bdm-8) 0 0; padding: var(--bdm-16) 0 0; list-style: none; border-top: 1px solid var(--bdm-lijn); }
  [data-bdm] .bdm-mobielmenu__sociaal a {
    width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--bdm-lijn); color: var(--bdm-kop);
    display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s, color .2s, border-color .2s;
  }
  [data-bdm] .bdm-mobielmenu__sociaal a:hover { background: var(--bdm-kop); border-color: var(--bdm-kop); color: var(--bdm-wit); }
  [data-bdm] .bdm-mobielmenu__sociaal svg { width: 16px; height: 16px; }

  /* items schuiven kort na elkaar in bij openen en bij elk nieuw veld */
  @media (prefers-reduced-motion: no-preference) {
    [data-bdm] .bdm-mobielmenu__veld:not([hidden]) > * { animation: bdm-mm-in .5s cubic-bezier(.22,1,.36,1) both; }
    [data-bdm] .bdm-mobielmenu__veld > :nth-child(2) { animation-delay: .035s; }
    [data-bdm] .bdm-mobielmenu__veld > :nth-child(3) { animation-delay: .07s; }
    [data-bdm] .bdm-mobielmenu__veld > :nth-child(4) { animation-delay: .105s; }
    [data-bdm] .bdm-mobielmenu__veld > :nth-child(5) { animation-delay: .14s; }
    [data-bdm] .bdm-mobielmenu__veld > :nth-child(6) { animation-delay: .175s; }
    [data-bdm] .bdm-mobielmenu__veld > :nth-child(7) { animation-delay: .21s; }
    [data-bdm] .bdm-mobielmenu__veld > :nth-child(n+8) { animation-delay: .245s; }
    [data-bdm] .bdm-mobielmenu.is--weg .bdm-mobielmenu__veld > * { animation: none; }
  }
}
@keyframes bdm-mm-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@layer components {
  [data-bdm] [data-veld="divisies"] > a { min-height: 3rem; border-bottom: 0; font-size: 1.0625rem; font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color .2s, text-decoration-color .2s; }
  [data-bdm] [data-veld="divisies"] > a:hover { text-decoration-color: currentColor; }
}

/* Uitspraken op telefoon (feedback 24-09): de kaart werd 793px (langste Klantenvertellen-review)
   → kop en quote pasten niet samen in beeld. Compacter: minder binnenruimte, kop 22px max 4 regels,
   quote 6 regels (+ "Lees de hele review"). Doel: hele kaart < ~600px op 390×844. */
@layer components {
  @media (width <= 700px) {
    [data-bdm] .bdm-uitspraak__kaart { padding: var(--bdm-24); gap: var(--bdm-24); }
    [data-bdm] .bdm-uitspraak__links { gap: var(--bdm-16); }
    [data-bdm] .bdm-uitspraak__links > svg { width: 22px; height: auto; }
    [data-bdm] .bdm-uitspraak__kop {
      font-size: clamp(1.25rem, 5.6vw, 1.625rem); letter-spacing: -.035em; line-height: 1.25;
      display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    }
    [data-bdm] .bdm-uitspraak__kader { padding: var(--bdm-16) var(--bdm-16) var(--bdm-16) var(--bdm-16); gap: var(--bdm-12); border-radius: 18px; }
    [data-bdm] .bdm-uitspraak__citaat { font-size: 15px; line-height: 1.5; }
    [data-bdm] .bdm-uitspraak__citaat.is--ingekort:not(.is--open) { -webkit-line-clamp: 6; line-clamp: 6; }
  }
}

/* Opsommingen in lopende tekst: het ontwerp kleurde li::marker oranje en sprong 24px in, maar de
   Tailwind-reset (list-style:none) verborg de tekens → ook op Vercel onzichtbaar. Nu zichtbaar. */
@layer components {
  [data-bdm] .bdm-lopend ul { list-style: disc; }
  [data-bdm] .bdm-lopend ol { list-style: decimal; padding-left: var(--bdm-24); }
  [data-bdm] .bdm-lopend li { padding-left: 4px; }
  [data-bdm] .bdm-lopend ol li::marker { font-weight: 600; }
}

/* Nieuwsbericht (feedback 08-10): opsommingen met oranje bolletjes zoals de lopende tekst, ruimte
   onder de lijst (ontwerp had alleen p+p) en tussenkopjes (h3) in de stijl van .bdm-lopend h3. */
@layer components {
  [data-bdm] .bdm-artikel__tekst ul { list-style: disc; }
  [data-bdm] .bdm-artikel__tekst li { padding-left: 4px; }
  [data-bdm] .bdm-artikel__tekst ul + p { margin-top: var(--bdm-24); }
  [data-bdm] .bdm-artikel__tekst h3 { margin: var(--bdm-40) 0 var(--bdm-12); font-family: var(--bdm-font); letter-spacing: -.3px; color: var(--bdm-kop); font-size: 18px; font-weight: 600; line-height: 1.35; }
  [data-bdm] .bdm-artikel__tekst h2 + h3 { margin-top: 0; }
}

/* Klantenvertellen klikbaar: score-pil in de hero + bronlink bij elke review */
@layer components {
  [data-bdm] a.bdm-score { text-decoration: none; transition: background-color .25s, transform .25s cubic-bezier(.4,0,.2,1); }
  [data-bdm] a.bdm-score:hover { background-color: #1a1a1a8c; transform: translateY(-1px); }
  [data-bdm] a.bdm-score .bdm-score__cijfer { transition: background-color .25s, color .25s; }
  [data-bdm] a.bdm-score:hover .bdm-score__cijfer { background-color: var(--bdm-oranje); color: var(--bdm-wit); }
  [data-bdm] .bdm-uitspraak__wie { display: flex; flex-direction: column; }
  [data-bdm] .bdm-uitspraak__bron {
    display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 6px;
    font-family: var(--bdm-font); font-size: 13px; line-height: 20px; color: var(--bdm-plaats);
    text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s;
  }
  [data-bdm] .bdm-uitspraak__bron svg { width: 13px; height: 13px; }
  [data-bdm] .bdm-uitspraak__bron:hover { color: var(--bdm-oranje); text-decoration-color: currentColor; }
}

/* Projecten-schuifrij op divisie-/expertisepagina's (>3 projecten): kop even ver van de kaarten als
   bij het raster (40px) i.p.v. de 80/48px van de gecentreerde homepage-kop. */
@layer components {
  [data-bdm] .bdm-projecten.is--rij { gap: var(--bdm-40, 40px); }
}

/* Fotoreeks bovenin een project: klikbaar naar de lightbox */
@layer components {
  [data-bdm] .bdm-beeldslider__vergroot { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--bdm-tegel-radius); }
  [data-bdm] .bdm-beeldslider__vergroot img { transition: filter .3s; }
  [data-bdm] .bdm-beeldslider__vergroot:hover img { filter: brightness(.94); }
  [data-bdm] .bdm-beeldslider__baan.is--slepen .bdm-beeldslider__vergroot { cursor: grabbing; }
  [data-bdm] .bdm-beeldslider__vergroot:focus-visible { outline: 2px solid var(--bdm-oranje); outline-offset: 3px; }
}

/* Divisie-/expertiselabels op projecten als link naar de betreffende pagina */
@layer components {
  [data-bdm] a.bdm-merk.is--link { display: inline-block; text-decoration: none; transition: background-color .2s, color .2s; }
  [data-bdm] a.bdm-merk.is--link:hover { background-color: #ebdccb; color: var(--bdm-kop); }
  [data-bdm] a.bdm-merk.is--link:focus-visible { outline: 2px solid var(--bdm-oranje); outline-offset: 2px; }
  [data-bdm] .bdm-feiten__link { color: inherit; text-decoration: underline; text-decoration-color: rgb(var(--bdm-donker) / .25); text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
  [data-bdm] .bdm-feiten__link:hover { color: var(--bdm-oranje); text-decoration-color: currentColor; }
}

/* Logoband (feedback 29-09): meer lucht tussen de logo's (80 → 120px) en sneller (was ±33 px/s,
   nu ±65 px/s: de baan schuift 50% = 2 rijen van ±1100px per ronde). */
@layer components {
  [data-bdm] .bdm-namen__rij { gap: 120px; padding-right: 120px; }
  [data-bdm] .bdm-namen__baan { animation-duration: 34s; }
  @media (width <= 700px) {
    [data-bdm] .bdm-namen__rij { gap: 72px; padding-right: 72px; }
    [data-bdm] .bdm-namen__baan { animation-duration: 26s; }
  }
}

/* Textarea's niet versleepbaar (feedback 29-09): vaste hoogte zoals het ontwerp. */
@layer components {
  [data-bdm] main textarea, [data-bdm] .bdm-formulier__veld textarea { resize: none; }
}

/* Mobiel/tablet (≤1100): balk krimpt na scrollen (102 → 68px, logo 70 → 48px). Feedback 29-09. */
@layer components {
  @media (width <= 1100px) {
    [data-bdm] .bdm-balk__binnen { transition: min-height .3s cubic-bezier(.4,0,.2,1), padding .3s cubic-bezier(.4,0,.2,1); }
    [data-bdm] .bdm-balk__logo img { transition: width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1); }
    [data-bdm] .bdm-balk.is--klein .bdm-balk__binnen { min-height: 68px; padding-top: 10px; padding-bottom: 10px; }
    [data-bdm] .bdm-balk.is--klein .bdm-balk__logo img { width: 71.5px; height: 48px; }
    [data-bdm] .bdm-balk.is--klein .bdm-mobielmenu { top: calc(68px + var(--bdm-beheerbalk)); }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-bdm] .bdm-balk__binnen, [data-bdm] .bdm-balk__logo img { transition: none; }
  }
}

/* Voortgangsbalk bij het automatisch doorschuiven van de uitspraken (10s). Alleen als autoplay aan
   staat (.is--auto; niet bij 'beweging verminderen'). De knoppenrij loopt dan over de volle breedte. */
@layer components {
  [data-bdm] .bdm-uitspraak__voortgang { display: none; }
  [data-bdm] .bdm-uitspraak.is--auto .bdm-uitspraak__knoppen { align-self: stretch; }
  [data-bdm] .bdm-uitspraak.is--auto .bdm-uitspraak__voortgang {
    display: block; flex: 1; height: 2px; margin-right: var(--bdm-16); border-radius: 2px;
    background: rgb(var(--bdm-donker) / .1); overflow: hidden;
  }
  [data-bdm] .bdm-uitspraak__voortgang > span { display: block; height: 100%; background: var(--bdm-oranje); transform: scaleX(0); transform-origin: left; }
  [data-bdm] .bdm-uitspraak__voortgang.is--loopt > span { animation: bdm-voortgang 10s linear forwards; }
  [data-bdm] .bdm-uitspraak__voortgang.is--pauze > span { animation-play-state: paused; }
}
@keyframes bdm-voortgang { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Projectdetail "Andere projecten": schuifrij ≤1000px, daarboven een rij van drie zoals het raster. */
@layer components {
  @media (width > 1000px) {
    [data-bdm] .bdm-projecten.is--andere .bdm-schuif__baan {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bdm-24);
      width: min(100% - 2 * var(--bdm-marge), var(--bdm-inhoud)); margin-inline: auto; padding: 40px 0 0; margin-top: -40px; overflow: visible;
    }
    [data-bdm] .bdm-projecten.is--andere .bdm-project { width: auto; }
    [data-bdm] .bdm-projecten.is--andere .bdm-project__beeld { height: auto; aspect-ratio: 532 / 404; }
    [data-bdm] .bdm-projecten.is--andere .bdm-schuif__voet { display: none; }
  }
}

/* Paginakop op telefoon compacter (feedback 29-09): huidige pagina uit het kruimelpad (staat er
   direct onder als kop; blijft voor schermlezers), kleinere rijen en tussenruimte. */
@layer components {
  @media (width <= 700px) {
    [data-bdm] .bdm-kruimels__pad li { min-height: 32px; font-size: 13px; }
    [data-bdm] .bdm-kruimels__pad li:has(.bdm-kruimels__hier) {
      position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    [data-bdm] .bdm-kruimels__pad li:nth-last-child(2) > svg { display: none; }
    [data-bdm] .bdm-paginakop .bdm-kruimels { margin-bottom: var(--bdm-16); }
    [data-bdm] .bdm-paginakop__terugrij { margin-bottom: 0; }
  }
}

/* Vacature, mobiel: meebewegende knop "Solliciteren?" naar het formulier (feedback 29-09).
   Zelfde vorm als de contactknop in het mobiele menu: brede oranje knop, tekst links, pijl rechts. */
@layer components {
  [data-bdm] .bdm-solliciteer { display: none; }
  @media (width <= 700px) {
    [data-bdm] .bdm-solliciteer {
      position: fixed; z-index: 80; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      display: flex; align-items: center; justify-content: space-between; gap: var(--bdm-8);
      min-height: 56px; margin: 0; padding: 0 20px 0 24px; border-radius: var(--bdm-radius-knop);
      background: var(--bdm-oranje); color: var(--bdm-wit); font-family: var(--bdm-font); font-size: 16px; font-weight: 600;
      line-height: 24px; letter-spacing: -.3px; text-decoration: none;
      box-shadow: 0 10px 30px rgb(15 20 18 / .18), 0 2px 6px rgb(15 20 18 / .10);
      transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none;
      transition: opacity .3s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1), background-color .2s;
    }
    [data-bdm] .bdm-solliciteer.is--zichtbaar { transform: none; opacity: 1; pointer-events: auto; }
    [data-bdm] .bdm-solliciteer:active { background: #dd6a14; }
    [data-bdm] .bdm-solliciteer svg { flex: none; width: 20px; height: 20px; }
    html.bdm-menu-open [data-bdm] .bdm-solliciteer { opacity: 0; pointer-events: none; }
  }
  @media (prefers-reduced-motion: reduce) { [data-bdm] .bdm-solliciteer { transition: none; } }
}

/* Paginakop op telefoon compacter (feedback 29-09, nieuwsdetail):
   - bovenruimte naar de echte balkhoogte (102px) + 24 i.p.v. de desktop-maat 146 + 24;
   - terug-link kleiner; nieuws (is--gecentreerd) links uitgelijnd met kleinere kop;
   - metaregel: schrijver op regel 1, "datum · leestijd" op regel 2 (geen los puntje). */
@layer components {
  @media (width <= 700px) {
    [data-bdm] .bdm-paginakop { padding-top: calc(102px + var(--bdm-24)); }
    [data-bdm] .bdm-terug { min-height: 32px; font-size: 14px; gap: 6px; }
    [data-bdm] .bdm-terug svg { width: 16px; height: 16px; }
    [data-bdm] .bdm-paginakop.is--gecentreerd .bdm-paginakop__tekstvak { text-align: left; align-items: flex-start; margin-inline: 0; }
    [data-bdm] .bdm-paginakop.is--gecentreerd .bdm-paginakop__kop { font-size: 1.75rem; letter-spacing: -.04em; line-height: 1.2; }
    [data-bdm] .bdm-paginakop__meta { justify-content: flex-start; gap: 4px 10px; font-size: 13px; }
    [data-bdm] .bdm-paginakop__schrijver { flex-basis: 100%; }
    [data-bdm] .bdm-paginakop__schrijver + .bdm-paginakop__stip { display: none; }
  }
}

/* Meeting 10-10:
   - footer-kolom "Erkend": keurmerk-logo's op witte tegels (zonder logo: de naam);
   - contactpagina zonder formulier: adres en zakelijke gegevens naast elkaar;
   - algemeen contactpersoon: oranje beeldmerk in het rondje. */
@layer components {
  [data-bdm] .bdm-voet__keurmerken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; max-width: 260px; }
  [data-bdm] .bdm-voet__keurmerk { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: 10px; border-radius: 8px; background: var(--bdm-wit); }
  [data-bdm] .bdm-voet__keurmerk a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
  [data-bdm] .bdm-voet__keurmerk img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
  [data-bdm] .bdm-voet__keurmerk span { font-family: var(--bdm-font); color: var(--bdm-tekst); font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center; }

  [data-bdm] .bdm-contactpagina__rij.is--zonderformulier { grid-template-columns: minmax(0, 1fr); }
  [data-bdm] .bdm-contactpagina__rij.is--zonderformulier .bdm-contactpagina__zij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  [data-bdm] .bdm-contactpagina__rij.is--zonderformulier .bdm-feiten__kop { font-size: 28px; font-weight: 500; letter-spacing: -1.2px; line-height: 1.25; }
  @media (width <= 700px) {
    [data-bdm] .bdm-contactpagina__rij.is--zonderformulier .bdm-contactpagina__zij { grid-template-columns: minmax(0, 1fr); }
  }

  [data-bdm] .bdm-persoon__portret.is--merk { color: var(--bdm-oranje); }
  [data-bdm] .bdm-persoon__portret.is--merk svg { width: 40px; height: 52px; }
}

/* Ontstaan: 3D-animatie (js/bouwdam/ontstaan.js), regels 1-op-1 uit het ontwerp. */
@layer components {
  [data-bdm] .bdm-ontstaan { padding-top: 0; padding-bottom: var(--bdm-132); background-color: var(--bdm-wit); }
  @media (width <= 900px) {
    [data-bdm] .bdm-ontstaan { padding-bottom: 72px; }
  }
  [data-bdm] .bdm-ontstaan__toneel { aspect-ratio: 2; border-radius: var(--bdm-radius-knop); background-color: var(--bdm-wit); position: relative; overflow: hidden; }
  [data-bdm] .bdm-ontstaan__doek,
  [data-bdm] .bdm-ontstaan__impressie,
  [data-bdm] .bdm-ontstaan__wit { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }
  [data-bdm] .bdm-ontstaan__doek { overflow: hidden; }
  [data-bdm] .bdm-ontstaan__impressie { object-fit: cover; pointer-events: none; }
  [data-bdm] .bdm-ontstaan__doek,
  [data-bdm] .bdm-ontstaan__impressie { transform-origin: 50%; will-change: transform, opacity; }
  /* Met de 3D-versie begint de foto onzichtbaar; het script zet hem aan het eind in beeld. */
  [data-bdm] .bdm-ontstaan__toneel.is--3d .bdm-ontstaan__impressie { opacity: 0; }
  [data-bdm] .bdm-ontstaan__wit { background-color: var(--bdm-wit); pointer-events: none; }
  [data-bdm] .bdm-ontstaan__knop { right: var(--bdm-16); bottom: var(--bdm-16); z-index: 2; border-radius: var(--bdm-radius-pil); width: 44px; height: 44px; color: var(--bdm-tekst); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background-color: #fffc; border: 1px solid #0f14121f; place-items: center; padding: 0; transition: background-color .2s, transform .2s; display: grid; position: absolute; }
  [data-bdm] .bdm-ontstaan__knop[hidden] { display: none; }
  [data-bdm] .bdm-ontstaan__knop:hover { background-color: var(--bdm-wit); transform: scale(1.06); }
  [data-bdm] .bdm-ontstaan__knop:focus-visible { outline: 2px solid var(--bdm-oranje); outline-offset: 2px; }
  [data-bdm] .bdm-ontstaan__knop [data-icoon] { display: grid; }
  @media (width <= 700px) {
    [data-bdm] .bdm-ontstaan__toneel { border-radius: 0; width: 100vw; margin-left: calc(50% - 50vw); }
  }

  /* Hero: Vimeo-film als achtergrond, 16:9 gevuld als object-fit: cover; zichtbaar zodra hij speelt. */
  [data-bdm] .bdm-hero__vimeo { position: absolute; inset: 0; overflow: hidden; container-type: size; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
  [data-bdm] .bdm-hero { background-color: rgb(var(--bdm-donker)); }
  [data-bdm] .bdm-hero__vimeo.is--speelt { opacity: 1; }
  [data-bdm] .bdm-hero__vimeo iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%); border: 0; }
  /* Zelfde film in de paginakop: over de eerste foto, met dezelfde ronde hoeken. */
  [data-bdm] .bdm-beeldslider__baan > li.has--film { position: relative; }
  [data-bdm] .bdm-beeldslider__baan > li.has--film .bdm-hero__vimeo { border-radius: var(--bdm-tegel-radius); }

  /* Laag "Foto (breed)". */
  [data-bdm] .bdm-beeldlaag__beeld { width: 100%; aspect-ratio: 1264/600; object-fit: cover; border-radius: var(--bdm-tegel-radius); display: block; }
  [data-bdm] .bdm-beeldlaag__bijschrift { margin-top: var(--bdm-12); font-size: 14px; line-height: 1.5; color: var(--bdm-tekst-zacht, inherit); }
  @media (width <= 900px) {
    [data-bdm] .bdm-beeldlaag__beeld { aspect-ratio: 3/2; }
  }
}

  /* Werken bij: foto en kaart als twee losse blokken */
  @media (width > 700px) {
    [data-bdm] .bdm-werving2__band { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--bdm-24); align-items: stretch; padding: 0; overflow: visible; border-radius: 0; }
    [data-bdm] .bdm-werving2__beeld { position: static; width: 100%; height: 100%; aspect-ratio: 1600 / 1024; object-fit: cover; border-radius: var(--bdm-tegel-radius); }
    [data-bdm] .bdm-werving2__kaart { width: auto; justify-content: center; padding: var(--bdm-40); }
  }
  @media (700px < width <= 900px) {
    [data-bdm] .bdm-werving2__band { grid-template-columns: minmax(0, 1fr); }
    [data-bdm] .bdm-werving2__beeld { height: auto; }
    [data-bdm] .bdm-werving2__kaart { padding: var(--bdm-24); }
  }

/* Cookiebanner (Complianz) in Bouwdam-stijl. Buiten @layer en met :root:root, want Complianz zet zijn variabelen op :root. */
:root:root {
  --cmplz_button_accept_background_color: #ef7920;
  --cmplz_button_accept_border_color: #ef7920;
  --cmplz_button_accept_text_color: #0f1412; /* donker op oranje: contrast 6,6:1 (wit was 2,9:1) */
  --cmplz_hyperlink_color: #0f1412;
  --cmplz_slider_active_color: #ef7920;
  --cmplz_text_color: #0f1412;
  --cmplz_button_border_radius: 999px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { filter: brightness(.94); }