/* ==========================================================================
   bweijmanmontage.nl — site.css
   All custom CSS lives here. See docs/brand-and-ux.md for the direction
   and CLAUDE.md -> Styling Rules for the conventions.

   Order:  1. fonts  2. tokens  3. base  4. typography  5. bootstrap overrides
   ========================================================================== */


/* 1. FONTS ================================================================
   Richting A: Roboto Slab (koppen) + Inter (broodtekst).
   Self-hosted variable fonts — never hotlink Google Fonts (AVG: embedding
   sends visitor IPs to Google without consent). Weight range 400-700 comes
   from one file per subset; unicode-range means latin-ext is only fetched
   when a character in that range actually appears on the page.
   Both faces are SIL Open Font License.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/roboto-slab-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/roboto-slab-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. TOKENS ===============================================================
   Every colour is defined ONCE, here. Never paste a hex into a view or into
   a second rule — use var(--bw-*).

   RICHTING B — zwart, helder, en het groen van het bouwhekdoek.
   Open beslissing 14 uit docs/brand-and-ux.md is hiermee gemaakt: #16453C,
   de enige achtergrondkleur op Maikels doek, is de merkkleur. Brons is eruit.
   Het maakte de site warm, maar ook bruin — en bruin op beige leest niet als
   vakwerk maar als een keuken uit 1978. Wat ervoor in de plaats komt is de
   andere helft van de merkrichting, die er nog niet was: *chic*. Bijna-zwarte
   banden, helderwitte vlakken, en het groen als de enige kleur die iets
   betekent.

   Wat dit ook oplost: het brons haalde 3,9:1 op de canvasachtergrond en mocht
   daarom nooit tekst zijn (zie de waarschuwing in brand-and-ux.md). #16453C
   haalt 10,7:1 op wit — AAA — en mag dus gewoon een link zijn, een label, of
   een kop. Eén merkkleur voor alles in plaats van een accent plus een
   donkerder aftreksel ervan om tekst mee te zetten.
   -------------------------------------------------------------------------- */

:root {
  /* Merkkleuren. --bw-groen is de kleur van het doek zelf; de andere drie zijn
     zijn buren, en er is geen vijfde. Diep = ingedrukt, licht = aangewezen,
     helder = op zwart (waar #16453C wegvalt tegen de band). */
  --bw-groen: #16453c;
  --bw-groen-diep: #0e2e28;
  --bw-groen-licht: #1d5a4e;
  --bw-groen-helder: #57c79a;
  --bw-groen-vlak: #e6eeea;

  /* Messing. Één specerij, en hij ligt alleen onder de sterren van een review.
     Champagne in plaats van mosterd: naast zwart en groen moet goud fluisteren,
     anders wordt het een pilsbierlogo. */
  --bw-messing: #c8a96a;

  /* Accent op licht — het merkgroen zelf. Dat het hier geen aparte, donkerdere
     tekstkleur meer is, is precies de winst van deze richting. */
  --bw-accent-text: #16453c;

  /* Neutralen. Bijna neutraal, met een spoor groen erin, zodat het wit en het
     zwart bij de merkkleur hóren in plaats van er toevallig naast te staan. */
  --bw-ink: #0f1210;
  --bw-ink-soft: #39423e;
  --bw-muted: #69736e;
  --bw-line: #d9dfdb;
  --bw-line-strong: #b3bcb7;
  --bw-canvas: #f1f4f2;
  --bw-surface: #ffffff;
  --bw-surface-alt: #e7edea;
  --bw-charcoal: #1b211e;

  /* Donkere banden: zwart, niet donkerbruin — dat is de ene helft van "zwart
     en helder". Het zachte vlak erín is het merkgroen zelf, zodat de kleur van
     het doek in de hero staat en niet alleen in een knopje. */
  --bw-band: #0b0f0d;
  --bw-band-zacht: #16453c;
  --bw-op-donker: #f2f5f3;
  --bw-op-donker-zacht: #a8b4af;
  --bw-lijn-op-donker: #2a3733;

  /* Statuskleuren — voor documentstatussen (offerte, factuur). Let op het
     verschil tussen --bw-goed en --bw-groen: "goed" is gras, de merkkleur is
     bos. Ze moeten in één tabel naast elkaar kunnen staan zonder dat een
     akkoordbadge als sitechroom leest. */
  --bw-goed: #2c7a3f;
  --bw-goed-vlak: #e4f1e6;
  --bw-slecht: #a02c2c;
  --bw-slecht-vlak: #f8e8e7;
  --bw-aandacht: #8a6212;
  --bw-aandacht-vlak: #faf0d9;
  --bw-open: #3c5a78;
  --bw-open-vlak: #e8eef5;

  /* Typografie */
  --bw-font-heading: 'Roboto Slab', Rockwell, Georgia, serif;
  --bw-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Bootstrap 5 haakt hierop aan */
  --bs-body-font-family: var(--bw-font-body);
  --bs-body-color: var(--bw-ink);
  --bs-body-bg: var(--bw-canvas);
  /* ⚠️ Bootstrap 5.3 kleurt een <a> via de RGB-variant, niet via de hex:
        a       { color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity,1)) }
        a:hover { --bs-link-color-rgb: var(--bs-link-hover-color-rgb) }
     Alleen --bs-link-color zetten doet dus niets, en dát is waarom elke kale
     link op de publieke site Bootstrap-blauw (#0d6efd) bleef terwijl het
     palet allang groen was. De hex-varianten blijven staan omdat andere
     componenten (o.a. .link-* en .btn-link) ze wél lezen. */
  --bs-link-color: var(--bw-groen);
  --bs-link-color-rgb: 22, 69, 60;
  --bs-link-hover-color: var(--bw-groen-licht);
  --bs-link-hover-color-rgb: 29, 90, 78;
  --bs-border-color: var(--bw-line);
  --bs-primary: var(--bw-groen);
  --bs-primary-rgb: 22, 69, 60;
  --bs-focus-ring-color: rgba(22, 69, 60, 0.35);
}


/* 3. BASE =================================================================== */

html {
  font-size: 14px;
  /* De balk plakt bovenaan (sectie 9). Springt de browser naar een anker,
     dan moet de kop daarvan niet half achter die balk landen. Ruim genomen:
     een paar pixels lucht te veel is onzichtbaar, een halve kop te weinig niet. */
  scroll-padding-block-start: 5.5rem;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* De body is een kolom over de volle schermhoogte, zodat de footer onderaan
   blijft plakken: bij een korte pagina staat hij op de onderrand van het
   scherm, bij een lange wordt hij vooruitgeduwd. Dit vervangt de truc uit de
   scaffold (html position: relative + body margin-bottom + een absoluut
   gepositioneerde footer), die alleen klopt zolang de footer exact 60px hoog
   en een regel is — met twee regels viel hij over de inhoud heen.
   100dvh houdt rekening met de in- en uitschuivende browserbalk op mobiel;
   100vh blijft ervoor staan voor browsers die dvh niet kennen. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bw-canvas);
  color: var(--bw-ink);
  font-family: var(--bw-font-body);
  -webkit-font-smoothing: antialiased;
}

/* Het middenstuk rekt op en duwt de footer naar beneden; de footer zelf mag
   nooit krimpen. De regel staat hier en niet in _Layout.cshtml.css, omdat hij
   samenhangt met de body hierboven en ook geldt voor de admin- en
   portaallayout (die geen footer hebben, maar wel dezelfde body). */
body > .container,
body > .container-fluid {
  flex: 1 0 auto;
}

/* Zichtbare focus voor toetsenbordgebruikers — nooit weghalen. */
:focus-visible {
  outline: 2px solid var(--bw-accent-text);
  outline-offset: 2px;
}


/* 4. TYPOGRAPHY ============================================================
   Koppen in de slab, broodtekst in Inter. "Geblokt en hokkerig" uit de
   merkrichting: rechte hoeken, dunne randjes, geen zachte schaduwen.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.bw-heading {
  font-family: var(--bw-font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--bw-ink);
}

h1 { font-size: clamp(1.9rem, 4.5vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }
h4 { font-size: 1.15rem; font-weight: 600; }
h5, h6 { font-size: 1rem; font-weight: 600; }

p, li {
  line-height: 1.65;
}

/* Lopende tekst rond de 65 tekens houden — leest het prettigst. */
.bw-prose {
  max-width: 65ch;
  color: var(--bw-ink-soft);
}

/* Klein label in kapitalen, voor eyebrows boven een kop. */
.bw-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bw-accent-text);
}

.bw-muted {
  color: var(--bw-muted);
}

/* Bedragen en aantallen: kolommen moeten uitlijnen. */
.bw-num,
td.bw-num,
th.bw-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Dunne, precieze randjes in plaats van schaduwen. */
.bw-panel {
  background-color: var(--bw-surface);
  border: 1px solid var(--bw-line);
  padding: 1.5rem;
}

.bw-rule {
  border: 0;
  border-top: 1px solid var(--bw-line);
  margin: 0;
}


/* 5. BOOTSTRAP OVERRIDES ==================================================
   Bootstrap's standaardblauw en afgeronde hoeken werken tegen de merkrichting.
   -------------------------------------------------------------------------- */

.btn-primary {
  --bs-btn-bg: var(--bw-groen);
  --bs-btn-border-color: var(--bw-groen);
  --bs-btn-hover-bg: var(--bw-groen-licht);
  --bs-btn-hover-border-color: var(--bw-groen-licht);
  --bs-btn-active-bg: var(--bw-groen-diep);
  --bs-btn-active-border-color: var(--bw-groen-diep);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
}

.btn-outline-primary {
  --bs-btn-color: var(--bw-groen);
  --bs-btn-border-color: var(--bw-groen);
  --bs-btn-hover-bg: var(--bw-groen);
  --bs-btn-hover-border-color: var(--bw-groen);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--bw-groen-diep);
  --bs-btn-active-border-color: var(--bw-groen-diep);
  --bs-btn-active-color: #ffffff;
}

.navbar-brand {
  font-family: var(--bw-font-heading);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Rechte hoeken: "geblokt en hokkerig". */
.btn,
.card,
.form-control,
.form-select,
.alert,
.badge,
.list-group-item {
  border-radius: 0;
}

.card {
  border-color: var(--bw-line);
  background-color: var(--bw-surface);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--bw-groen);
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
  background-color: var(--bw-groen);
  border-color: var(--bw-groen);
}

/* Scaffold-restanten uit de Bootstrap-template. */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Honeypot: off-screen field that real users never see or fill. */
.bw-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Behoud regelafbrekingen in door gebruikers ingevoerde tekst. */
.bw-pre {
  white-space: pre-wrap;
}


/* 6. DOCUMENTSTATUS =======================================================
   Eén badge, vier betekenissen. Welke klasse een status krijgt staat in
   OfferteStatusInfo.BadgeClass() — niet in de view, en niet hier.
   -------------------------------------------------------------------------- */

.bw-status {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  padding: 0.15em 0.6em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.bw-status-concept {
  background-color: var(--bw-surface-alt);
  border-color: var(--bw-line-strong);
  color: var(--bw-muted);
}

.bw-status-open {
  background-color: var(--bw-open-vlak);
  border-color: var(--bw-open);
  color: var(--bw-open);
}

.bw-status-goed {
  background-color: var(--bw-goed-vlak);
  border-color: var(--bw-goed);
  color: var(--bw-goed);
}

.bw-status-slecht {
  background-color: var(--bw-slecht-vlak);
  border-color: var(--bw-slecht);
  color: var(--bw-slecht);
}

.bw-status-aandacht {
  background-color: var(--bw-aandacht-vlak);
  border-color: var(--bw-aandacht);
  color: var(--bw-aandacht);
}

/* Het documentblad: een offerte op het scherm leest als het papier. */
.bw-document {
  background-color: var(--bw-surface);
  border: 1px solid var(--bw-line);
  padding: 1.5rem;
}

.bw-document-regel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--bw-line);
}

.bw-document-regel:last-of-type {
  border-bottom: 0;
}

/* De totaalregel: het bedrag waar het om gaat, groot en rustig. */
.bw-totaal {
  border-top: 2px solid var(--bw-groen);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

/* Een berichtendraad bij een offerte. */
.bw-draad-bericht {
  border-left: 3px solid var(--bw-line-strong);
  padding: 0.25rem 0 0.25rem 0.85rem;
  margin-bottom: 0.85rem;
}

.bw-draad-bericht.bw-van-barry {
  border-left-color: var(--bw-groen);
}

/* Vastgelegd akkoord: het bewijsstuk, bewust nuchter vormgegeven. */
.bw-akkoord {
  background-color: var(--bw-goed-vlak);
  border: 1px solid var(--bw-goed);
  padding: 1rem 1.25rem;
}

.bw-akkoord dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bw-muted);
}

.bw-akkoord dd {
  margin-bottom: 0.6rem;
  word-break: break-word;
}


/* 7. FOTO'S ===============================================================
   Uploads worden geserveerd door een controller (buiten de webroot), en zijn
   altijd webp. Vaste verhouding zodat een galerij niet gaat springen terwijl
   de plaatjes binnenkomen.
   -------------------------------------------------------------------------- */

.bw-foto-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: var(--bw-surface-alt);
  border: 1px solid var(--bw-line);
}

/* De omslagfoto boven een projectkaart. */
.bw-foto-omslag {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: var(--bw-surface-alt);
}

/* Staat er nog geen foto, dan een rustig vlak in plaats van een gat. */
.bw-foto-leeg {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background-color: var(--bw-surface-alt);
  color: var(--bw-muted);
  font-size: 0.85rem;
}


/* 8. VEELGESTELDE VRAGEN ==================================================
   <details>/<summary> in plaats van een accordeon met JavaScript: de tekst
   staat altijd in de pagina, werkt met het toetsenbord, en is exact wat het
   FAQPage-blok herhaalt. Alleen de standaard driehoek is vervangen, zodat de
   ingebouwde toetsenbediening en het open/dicht-gedrag intact blijven.
   -------------------------------------------------------------------------- */

.bw-faq {
  border-bottom: 1px solid var(--bw-line);
  padding: 0.85rem 0;
}

.bw-faq:first-of-type {
  border-top: 1px solid var(--bw-line);
}

.bw-faq-vraag {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

/* Safari toont zonder dit alsnog zijn eigen driehoek. */
.bw-faq-vraag::-webkit-details-marker {
  display: none;
}

.bw-faq-vraag::before {
  content: "+";
  flex: 0 0 auto;
  width: 1.25rem;
  font-weight: 700;
  color: var(--bw-groen);
  line-height: 1.4;
}

.bw-faq[open] > .bw-faq-vraag::before {
  content: "−";
}

.bw-faq-vraag:focus-visible {
  outline: 2px solid var(--bw-groen);
  outline-offset: 3px;
}

.bw-faq-antwoord {
  padding: 0.6rem 0 0.2rem 1.85rem;
}


/* 9. TEXTUUR, BANDEN EN VLAKKEN ===========================================
   Waar de warmte vandaan komt. De site was correct maar koud: tekst in witte
   kaders met dunne randjes, en verder niets. Drie dingen halen dat weg, en
   alle drie staan ze in docs/brand-and-ux.md:

   - "Gereedschap as texture" — Jellina vroeg om het gereedschap te laten
     zien. Maikels collage (wwwroot/img/logo-mark.svg) is precies dat en stond
     al in huis; op het bouwhekdoek loopt hij van de rand af, dus hier ook.
   - "Wood must be present" — houttinten als vlak, niet als accentje.
   - "Geblokt en hokkerig" — rechte randen, geen border-radius, geen zachte
     schaduwen. Een band is een blok, geen kaartje dat zweeft.

   De collage wordt als MASKER gebruikt, niet als achtergrondplaatje: het
   masker bepaalt de vorm, en de kleur eronder komt uit een token. Eén bestand
   kan zo elke kleur aannemen op elke dekking, zonder ingekleurde varianten.

   ⚠️ Maskeer met logo-mark-WIT.svg, niet met logo-mark.svg. Een masker leest
   alleen het alfakanaal, dus in theorie doet de vulling er niet toe — maar
   logo-mark.svg is gevuld met currentColor, en een SVG die als afbeelding
   wordt geladen heeft geen HTML om die kleur uit te erven. De vulling valt
   dan weg, de alfa is nul, en het masker verbergt alles. In de browser
   getest: met logo-mark.svg verdwijnt het hele vlak. logo-mark.svg blijft
   bestaan voor inline gebruik, waar currentColor juist het punt is.
   -------------------------------------------------------------------------- */

.bw-textuur {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.bw-textuur::before {
  content: "";
  position: absolute;
  z-index: -1;
  inline-size: var(--bw-textuur-maat, 26rem);
  block-size: var(--bw-textuur-maat, 26rem);
  inset-block-end: var(--bw-textuur-verschuiving, -6rem);
  inset-inline-start: var(--bw-textuur-verschuiving, -6rem);
  background-color: var(--bw-textuur-kleur, var(--bw-groen));
  opacity: var(--bw-textuur-dekking, 0.09);
  -webkit-mask-image: url('../img/logo-mark-wit.svg');
          mask-image: url('../img/logo-mark-wit.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  pointer-events: none;
}

/* Gespiegeld, zodat twee banden onder elkaar niet hetzelfde hoekje herhalen. */
.bw-textuur-rechts::before {
  inset-inline-start: auto;
  inset-inline-end: var(--bw-textuur-verschuiving, -6rem);
  transform: scaleX(-1);
}

/* Gecentreerd — voor lege staten, waar het gereedschap de plek van de
   ontbrekende inhoud inneemt in plaats van een leeg kader achter te laten. */
.bw-textuur-midden::before {
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

/* Een browser zonder maskerondersteuning krijgt gewoon geen textuur. Dat is
   een gemis, geen kapotte pagina: alle tekst en contrast blijven staan, want
   de textuur draagt nooit betekenis. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .bw-textuur::before { content: none; }
}


/* De donkere band. Draagt de hero en de call to action: het zwaartepunt van
   de pagina, met het gereedschap dat er half uit loopt. */
.bw-band {
  background-color: var(--bw-band);
  color: var(--bw-op-donker);
  padding: clamp(1.5rem, 4.5vw, 3rem);
  --bw-textuur-kleur: var(--bw-op-donker);
  --bw-textuur-dekking: 0.10;
}

.bw-band h1,
.bw-band h2,
.bw-band h3,
.bw-band .bw-heading {
  color: var(--bw-op-donker);
}

.bw-band .bw-prose,
.bw-band .bw-muted {
  color: var(--bw-op-donker-zacht);
}

/* Het goud is hier op zijn plek: klein, en het enige warme lichtpunt op het
   donkere vlak. Op licht blijft het label brons — zie sectie 4. */
.bw-band .bw-label {
  color: var(--bw-groen-helder);
}

/* Een omrande knop op donker: de bronzen rand valt weg tegen het bruin, dus
   hier leent hij het lichte tekstvlak. */
.bw-band .btn-outline-primary {
  --bs-btn-color: var(--bw-op-donker);
  --bs-btn-border-color: var(--bw-lijn-op-donker);
  --bs-btn-hover-bg: var(--bw-op-donker);
  --bs-btn-hover-border-color: var(--bw-op-donker);
  --bs-btn-hover-color: var(--bw-band);
  --bs-btn-active-bg: var(--bw-op-donker);
  --bs-btn-active-color: var(--bw-band);
}

.bw-band :focus-visible {
  outline-color: var(--bw-groen-helder);
}

/* Een vlak binnen de donkere band — het uitgelichte kaartje in de hero. */
.bw-band-vlak {
  background-color: var(--bw-band-zacht);
  border: 1px solid var(--bw-lijn-op-donker);
  padding: 1.25rem;
}


/* Een warm, licht vlak. Het hout uit de merkrichting als vlak in plaats van
   als randje: net genoeg kleur om het verschil met de canvasachtergrond te
   zien, zonder de foto's te beconcurreren. */
.bw-vlak-warm {
  background-color: var(--bw-surface-alt);
  border: 1px solid var(--bw-line);
  --bw-textuur-kleur: var(--bw-groen);
  --bw-textuur-dekking: 0.07;
}


/* De cijferbalk: één blok met scheidingslijnen, niet drie losse kaders die
   hetzelfde randje drie keer herhalen. */
.bw-cijfers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: var(--bw-surface);
  border: 1px solid var(--bw-line);
}

.bw-cijfer {
  padding: clamp(0.9rem, 3vw, 1.5rem) 0.75rem;
  text-align: center;
  border-inline-start: 1px solid var(--bw-line);
}

.bw-cijfer:first-child {
  border-inline-start: 0;
}

.bw-cijfer-getal {
  display: block;
  font-family: var(--bw-font-heading);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--bw-ink);
}

.bw-cijfer-label {
  display: block;
  font-size: 0.8rem;
  color: var(--bw-muted);
}


/* Een sectiekop met een bronzen blokje ervoor: geblokt, en het oog vindt de
   secties terug zonder dat er een lijn door de pagina hoeft. */
.bw-sectiekop {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.bw-sectiekop::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.6rem;
  block-size: 1.4rem;
  background-color: var(--bw-groen);
}

.bw-sectiekop > h2 {
  margin-bottom: 0;
}

/* Duwt een "alles bekijken"-link naar de rechterkant van de sectiekop. */
.bw-sectiekop > .bw-sectiekop-actie {
  margin-inline-start: auto;
}


/* Kaarten krijgen een bovenrand die oplicht. Geen schaduw, geen opduwen: een
   rand die van kleur verandert past bij "dunne randjes, geen schaduwen". */
.bw-kaart {
  border-top: 3px solid var(--bw-line);
  transition: border-top-color 0.15s ease-in-out;
}

.bw-kaart:hover,
.bw-kaart:focus-within {
  border-top-color: var(--bw-groen);
}

@media (prefers-reduced-motion: reduce) {
  .bw-kaart { transition: none; }
}


/* De ontworpen lege staat. Elke lijst begint leeg op een nieuwe site, dus dit
   is geen randgeval maar de eerste indruk — vandaar het gereedschap erachter
   in plaats van een kader met een zin erin. */
.bw-leeg {
  display: grid;
  place-items: center;
  gap: 0.3rem;
  min-block-size: 11rem;
  padding: clamp(1.5rem, 5vw, 2.75rem) 1.25rem;
  text-align: center;
  background-color: var(--bw-surface);
  border: 1px solid var(--bw-line);
  color: var(--bw-muted);
  --bw-textuur-maat: 13rem;
  --bw-textuur-dekking: 0.10;
  --bw-textuur-kleur: var(--bw-groen);
}

.bw-leeg-titel {
  font-family: var(--bw-font-heading);
  font-weight: 700;
  color: var(--bw-ink-soft);
}


/* Een review is een citaat. Het aanhalingsteken is decoratie en staat daarom
   in de CSS en niet in de view — een schermlezer hoort het niet, en dat klopt. */
.bw-citaat {
  position: relative;
  padding-top: 2.1rem;
}

.bw-citaat::before {
  content: "\201C";
  position: absolute;
  inset-block-start: -0.5rem;
  inset-inline-start: -0.2rem;
  font-family: var(--bw-font-heading);
  font-size: 4rem;
  line-height: 1;
  color: var(--bw-groen);
  opacity: 0.3;
}

.bw-sterren {
  color: var(--bw-messing);
  letter-spacing: 0.1em;
}


/* Het merk in de navigatiebalk: de hamer plus de naam waaronder Barry
   daadwerkelijk werkt. */
.bw-merk {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* De hamer als masker en niet als <img>, zodat zijn kleur uit een token komt
   en niet uit het bestand — logo-icon.svg blijft daardoor één bestand dat
   overal elke kleur kan aannemen. */
.bw-merk-hamer {
  inline-size: 1.9rem;
  block-size: 1.9rem;
  flex: 0 0 auto;
  background-color: var(--bw-groen);
  -webkit-mask-image: url('../img/logo-icon-wit.svg');
          mask-image: url('../img/logo-icon-wit.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

.bw-merk-naam {
  font-family: var(--bw-font-heading);
  font-weight: 700;
  line-height: 1.1;
  color: var(--bw-ink);
}

.bw-merk-naam span {
  display: block;
  font-family: var(--bw-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bw-accent-text);
}

/* DE BALK BLIJFT BOVENAAN PLAKKEN.

   ⚠️ `sticky` en niet `fixed`, en dát is de reden dat er nergens een padding-top
   bij hoeft om de inhoud vrij te houden: een sticky element blijft gewoon ruimte
   innemen in de stroom. De eerste kop van de pagina schuift dus niet onder de
   balk, de sticky footer uit sectie 3 blijft kloppen, en er is geen tweede getal
   dat gelijk moet blijven aan de hoogte van de balk. Bij `fixed` was dat er wel,
   en dat getal loopt altijd een keer uit de pas met het merk erin.

   ⚠️ Op de <header> en niet op de <nav>. Een sticky element schuift alleen binnen
   zijn eigen ouder, en de ouder van de <nav> is de <header> — precies even hoog
   als de balk zelf. Bootstrap's .sticky-top dáárop zetten geeft dus nul ruimte om
   in te plakken en doet zichtbaar niets. De <header> zit zelf in de body-flexkolom
   en die is de hele pagina hoog.

   ⚠️ Zet nooit `overflow: hidden` (of `clip`) op html, body of deze <header>: dat
   zet sticky stilletjes uit, zonder foutmelding. Begint de balk ooit weer mee te
   scrollen, zoek daar dan eerst.

   1020 is Bootstrap's eigen $zindex-sticky: boven de inhoud, maar onder een modal
   (1055) en een tooltip (1080), zodat die er niet achter verdwijnen. */
.bw-kop {
  position: sticky;
  inset-block-start: 0;
  z-index: 1020;
  /* Niet krimpen in de body-flexkolom, om dezelfde reden als de footer. */
  flex: 0 0 auto;
}

/* De balk zelf: warm oppervlak met een bronzen onderrand in plaats van wit
   met grijs. Bootstrap's .bg-white en .border-bottom zijn daarom uit de view
   gehaald — die winnen anders van deze regel. */
.bw-navbalk {
  background-color: var(--bw-surface);
  border-bottom: 3px solid var(--bw-groen);
}

/* ⚠️ HIER STOND `overflow: hidden`. Die regel sneed het merk af op de onderrand van
   de balk — het merk loopt er namelijk onderuit, dat is de compositie van het doek
   (sectie 10) — en de opmerking erbij waarschuwde: "komt er ooit een dropdown in de
   navigatie, dan moet deze regel weg". Die dropdown is er nu (Vakmanschap, en het
   accountmenu), en hetzelfde `overflow: hidden` onthoofdt een menu dat onder de balk
   uitklapt. Het afsnijden is daarom verhuisd naar het merk zélf: zie sectie 10,
   .bw-navbalk .bw-merk. */

.bw-navbalk .nav-link {
  color: var(--bw-ink-soft);
  font-weight: 500;
}

.bw-navbalk .nav-link:hover,
.bw-navbalk .nav-link:focus {
  color: var(--bw-accent-text);
}

/* De actie tússen de links. Zwaarder en in de merkkleur, zodat "Offerte aanvragen"
   niet als vierde gelijkwaardige link leest. Bewust géén .bw-actie en geen pil: die
   vorm heeft de belknop ernaast al, en twee knoppen in één balk maken elkaar allebei
   zachter.

   ⚠️ Werkt alleen zonder .text-dark op de link. Die utility is !important en wint
   van elke kleur hier — daarom staat hij niet meer in _Layout.cshtml. */
.bw-navbalk .bw-navactie {
  color: var(--bw-accent-text);
  font-weight: 600;
}

.bw-navbalk .bw-navactie:hover,
.bw-navbalk .bw-navactie:focus {
  color: var(--bw-groen-licht);
}

/* De hamburger. Bootstrap tekent hem in grijszwart (#212529 op 75%) en die kleur
   zit ingebakken in een data-URI achter --bs-navbar-toggler-icon-bg: `color`
   erop zetten doet dus niets. Daarom hetzelfde maskeridioom als sectie 9 en 11 —
   de tekening bepaalt alleen de vorm, de kleur eronder komt uit een token.

   ⚠️ De %23fff in de data-URI is géén kleur. Een masker leest alleen de alfa, dus
   de streek moet dekkend zijn en verder maakt de tint niet uit; wit is dezelfde
   afspraak als de losse -wit-maskerbestanden.

   Maat en vorm volgen .bw-header-actie (sectie 12): op een telefoon staan die twee naast
   elkaar in dezelfde rij, en een blokje naast een pil leest als twee losse
   dingen in plaats van als één paar. Vandaar 2rem hoog en rond.

   ⚠️ Alles hieronder staat binnen deze media query, en dat is geen opsmuk. De
   knop is er alleen ónder lg — .navbar-expand-lg .navbar-toggler { display: none }
   heeft precies dezelfde specificiteit als .bw-navbalk .navbar-toggler, en
   site.css laadt ná Bootstrap. Een `display` hierbuiten zou de hamburger dus op
   desktop weer tevoorschijn toveren, naast het al uitgeklapte menu. */
@media (max-width: 991.98px) {

  .bw-navbalk .navbar-toggler {
    --bs-navbar-toggler-border-color: var(--bw-groen);
    --bs-navbar-toggler-border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    color: var(--bw-groen);
  }

  /* Ingedrukt zolang het menu openstaat: dan is de knop niet "open het menu"
     meer maar "dit staat open", en dat mag je zien. */
  .bw-navbalk .navbar-toggler:hover,
  .bw-navbalk .navbar-toggler[aria-expanded="true"] {
    background-color: var(--bw-groen);
    color: #fff;
  }

  /* Bootstrap zet hier een box-shadow zonder kleur neer, die dus terugvalt op
     `color` — en die is wit zodra de knop gevuld is. Onzichtbaar op een witte
     balk. Vandaar dezelfde ring als de formuliervelden, in plaats van de erfenis. */
  .bw-navbalk .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
  }

  .bw-navbalk .navbar-toggler-icon {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    background-image: none;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
            mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
  }

  /* ⚠️ Zonder maskerondersteuning is dit een dichtgekleurd blokje in plaats van
     drie streepjes. Terug naar de tekening van Bootstrap dan maar: grijs, maar
     wél een hamburger. */
  @supports not ((-webkit-mask-image: none) or (mask-image: none)) {
    .bw-navbalk .navbar-toggler-icon {
      background-image: var(--bs-navbar-toggler-icon-bg);
      background-color: transparent;
    }
  }

  /* HET UITKLAPMENU ALS PANEEL, NIET ALS DUWKRACHT.

     Standaard groeit .navbar-collapse mee in de rij: de balk wordt hoger en alles
     eronder — de held, de hele pagina — schuift naar beneden. Met een plakkende
     balk is dat dubbel vervelend, want dan verspringt de inhoud onder je duim
     terwijl je alleen even wilde kijken wat er in het menu zit. Absoluut
     positioneren haalt het paneel uit de stroom: het hangt over de pagina heen en
     er beweegt niets.

     ⚠️ Het anker is de .container en niet de <nav>. Een paneel van schermrand tot
     schermrand lijkt logischer, maar onder lg is de container gemaximeerd op 540px
     (sm) of 720px (md) én gecentreerd — bij 991px staat er dus 135px lucht naast.
     Een paneel dat de volle breedte pakt zet de menu-items daarmee tot 135px links
     van het merk. Aan de container hangen betekent: dezelfde linkerrand als het
     merk erboven en als de inhoud eronder, op elke breedte. Dat is dezelfde
     afspraak als waarom de balk in een .container staat — zie _Layout.cshtml.

     De verticale offset is de rij (100%) + de padding van de balk + de 3px
     onderrand, zodat het paneel precies ónder de groene lijn begint en die lijn
     dus over de volle breedte heel blijft. */
  .bw-navbalk > .container {
    position: relative;
  }

  .bw-navbalk .navbar-collapse {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + var(--bs-navbar-padding-y) + 3px);
    padding-block: 0.5rem 0.75rem;
    padding-inline: 0.25rem;
    background-color: var(--bw-surface);
    border-inline: 1px solid var(--bw-line);
    border-block-end: 3px solid var(--bw-groen);
  }

  /* Past het menu niet op een kort scherm — of staat "Vakmanschap" er ook nog
     open bij — dan scrollt het paneel zelf in plaats van onder de vouw te
     verdwijnen. 80dvh en niet 100: er moet een strook pagina zichtbaar blijven,
     anders leest het als een dialoog die je niet meer weg krijgt.

     ⚠️ Alleen op .show, niet op .navbar-collapse zelf. Tijdens het openklappen
     heet het element .collapsing en staat daar Bootstrap's `overflow: hidden` op
     om de hoogte-animatie netjes af te snijden; een `overflow-y` met hogere
     specificiteit zou dat overrulen en de animatie laten flikkeren. */
  .bw-navbalk .navbar-collapse.show {
    max-block-size: 80vh;
    max-block-size: 80dvh;
    overflow-y: auto;
  }
}

/* Het accountmenu — poppetje plus woord. Staat in de publieke balk én in beide
   portalen, want _LoginPartial is één bestand voor alle drie de layouts. Daarom
   niet gescoped op .bw-navbalk. */
.bw-account {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.bw-account-icoon {
  inline-size: 1.05em;
  block-size: 1.05em;
  flex: 0 0 auto;
}

/* Het uitklapmenu op merkkleur. Bootstrap levert het in zijn eigen blauw; deze regel
   zet alleen de variabelen om, zodat de component verder de component blijft — dat
   is goedkoper en veiliger dan hem overschrijven. Ook niet gescoped, om dezelfde
   reden als .bw-account hierboven. */
.dropdown-menu {
  --bs-dropdown-border-color: var(--bw-line);
  --bs-dropdown-link-color: var(--bw-ink-soft);
  --bs-dropdown-link-hover-color: var(--bw-accent-text);
  --bs-dropdown-link-hover-bg: var(--bw-groen-vlak);
  --bs-dropdown-link-active-color: var(--bw-op-donker);
  --bs-dropdown-link-active-bg: var(--bw-groen);
  --bs-dropdown-header-color: var(--bw-muted);
}

/* 10. GEREEDSCHAP =========================================================
   Sectie 9 zet Maikels collage als textuur achter een vlak. Deze sectie zet
   de losse stukken gereedschap in als TEKEN: klein, scherp, en alleen op een
   plek waar het iets betekent.

   De afspraak, en die is de helft van het ontwerp:

     - Gereedschap staat waar WERK staat. Wat Barry doet (diensten), wat hij
       gemaakt heeft (projecten) en met wie (vakmensen) dragen een teken.
       Contact, werkgebied, privacy, het aanvraagformulier, de reviews en de
       kennisbank dragen het niet. Gereedschap dat overal hangt is geen teken
       meer maar behang.
     - Drie registers, en een pagina gebruikt er hooguit twee tegelijk:
         merk     de collage in de navigatiebalk — één per site
         teken    één stuk gereedschap, vol of als watermerk, bij een ding
                  dat een soort héeft (een dienst, een vak)
         textuur  groot en flauw achter een band, aflopend van de rand;
                  dat is sectie 9
     - Welk stuk bij welk ding hoort staat in Services/Images/Gereedschap.cs.
       Niet hier en niet in een view: het is één lijst.
     - Het teken is altijd aria-hidden. De tekst ernaast zegt het al, en een
       schermlezer die "hamer" voorleest bij "Dakrenovatie" maakt de pagina
       niet duidelijker.

   De hele afspraak staat naast elkaar op /stijl — de gereedschapskist.

   WAAROM MASKEREN EN GEEN <img>: dezelfde reden als in sectie 9, plus een
   tweede. De eerste is de kleur — een masker leest alleen de alfa, dus de
   background-color eronder bepaalt de tint, en die staat hier op currentColor.
   Een teken erft daarmee de kleur van zijn omgeving: groen op wit, wit op de
   donkere band, zonder ingekleurde varianten. De tweede is dat een decoratief
   <img> een leeg alt-attribuut nodig heeft dat iemand een keer vergeet; een
   achtergrond kan die fout niet maken.

   Maskeer met de -wit-variant, nooit met de gewone. gereedschap-hamer.svg is
   gevuld met currentColor, en een SVG die als afbeelding wordt geladen heeft
   geen HTML om die kleur uit te erven: de vulling valt weg, de alfa is nul,
   en het teken verdwijnt.
   -------------------------------------------------------------------------- */

.bw-ikoon {
  display: inline-block;
  flex: 0 0 auto;
  inline-size: var(--bw-ikoon-maat, 1.75rem);
  block-size: var(--bw-ikoon-maat, 1.75rem);
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* contain en niet cover: de tekeningen hebben sterk uiteenlopende
     verhoudingen (de tang is 2:1 liggend, de waaier 1:2 staand). Contain laat
     elk stuk zijn eigen vorm houden binnen een vierkant vak, zodat een rij
     tekens uitlijnt op hetzelfde raster zonder dat er iets bijgesneden wordt. */
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  pointer-events: none;
}

/* ⚠️ Zonder maskerondersteuning is een teken een gekleurd blokje — en dat is
   erger dan geen teken. Anders dan bij de textuur (sectie 9, die alleen een
   ::before weglaat) moet het element hier dus echt verdwijnen. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .bw-ikoon { display: none; }
}

.bw-ikoon-hamer {
  -webkit-mask-image: url("../img/gereedschap-hamer-wit.svg");
          mask-image: url("../img/gereedschap-hamer-wit.svg");
}

.bw-ikoon-beitel {
  -webkit-mask-image: url("../img/gereedschap-beitel-wit.svg");
          mask-image: url("../img/gereedschap-beitel-wit.svg");
}

.bw-ikoon-stanleymes {
  -webkit-mask-image: url("../img/gereedschap-stanleymes-wit.svg");
          mask-image: url("../img/gereedschap-stanleymes-wit.svg");
}

.bw-ikoon-steeksleutel {
  -webkit-mask-image: url("../img/gereedschap-steeksleutel-wit.svg");
          mask-image: url("../img/gereedschap-steeksleutel-wit.svg");
}

.bw-ikoon-schroevendraaier {
  -webkit-mask-image: url("../img/gereedschap-schroevendraaier-wit.svg");
          mask-image: url("../img/gereedschap-schroevendraaier-wit.svg");
}

.bw-ikoon-schroevendraaier-heft-boven {
  -webkit-mask-image: url("../img/gereedschap-schroevendraaier-heft-boven-wit.svg");
          mask-image: url("../img/gereedschap-schroevendraaier-heft-boven-wit.svg");
}

.bw-ikoon-kwast {
  -webkit-mask-image: url("../img/gereedschap-kwast-wit.svg");
          mask-image: url("../img/gereedschap-kwast-wit.svg");
}

.bw-ikoon-tang {
  -webkit-mask-image: url("../img/gereedschap-tang-wit.svg");
          mask-image: url("../img/gereedschap-tang-wit.svg");
}

/* ⚠️ Liggender dan al het andere: 3,85:1, waar de tang op 2:1 het record had. In een
   vierkant vak met mask-size: contain wordt hij dus laag. Dat is goed — hij hóórt laag
   te zijn, een uitgetrokken rolmaat ligt recht — maar zet hem niet in een rij waar de
   optische hoogte moet kloppen met een staande tekening als de waaier. */
.bw-ikoon-rolmaat {
  -webkit-mask-image: url("../img/gereedschap-rolmaat-wit.svg");
          mask-image: url("../img/gereedschap-rolmaat-wit.svg");
}

.bw-ikoon-hoek {
  -webkit-mask-image: url("../img/gereedschap-hoek-wit.svg");
          mask-image: url("../img/gereedschap-hoek-wit.svg");
}

.bw-ikoon-waaier {
  -webkit-mask-image: url("../img/gereedschap-waaier-wit.svg");
          mask-image: url("../img/gereedschap-waaier-wit.svg");
}


/* DE PAGINAKOP — een teken naast de <h1>.

   Dit is wat de site over pagina's heen samenbindt: je klikt op een kaart met
   een beitel erop en landt op een pagina met diezelfde beitel naast de kop.
   Het teken is hier vol en groen, niet flauw — op deze ene plek is het een
   naambordje en geen achtergrond.

   Alleen op de pagina's die over het werk gaan; zie de afspraak bovenaan. */
.bw-paginakop {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 3vw, 1.35rem);
  margin-block-end: 1.5rem;
  padding-block-end: 1.1rem;
  border-block-end: 1px solid var(--bw-line);
}

.bw-paginakop > .bw-ikoon {
  --bw-ikoon-maat: clamp(2.5rem, 8vw, 3.5rem);
  color: var(--bw-groen);
}

/* De kop mag geen marge houden onder de streep die er al is. */
.bw-paginakop > :last-child {
  margin-block-end: 0;
}


/* HET WATERMERK OP EEN KAART — het teken als stille signatuur.

   Op een kaart is het teken decoratie en geen naambordje: het staat rechtsboven,
   flauw, en licht pas op als je de kaart aanwijst. Dat is de speelse helft — in
   rust merk je het nauwelijks, en wie er met de muis overheen gaat ziet het
   gereedschap uit de collage tevoorschijn komen.

   Een dienstkaart is een link (.stretched-link) en licht toch al op; een
   vakmankaart is dat niet, en daar is de hover een klein vondstje. Ze delen
   dezelfde regel, want het verschil zit in de kaart en niet in het teken.

   ⚠️ Het teken is een DIRECT kind van .bw-kaart-teken en staat dus buiten de
   .card-body. Zet je het erin, dan telt het mee in die flexkolom en duwt het
   de tekst opzij in plaats van erachter te blijven staan. */
.bw-kaart-teken {
  position: relative;
}

.bw-kaart-teken > .bw-ikoon {
  position: absolute;
  /* Een paar pixels hoger en verder naar rechts dan de tekst eronder: het teken is
     geen tweede kolom maar een signatuur in de hoek, en die hoort dichter tegen de
     rand te liggen dan de inhoud. */
  inset-block-start: 0.85rem;
  inset-inline-end: 0.85rem;
  --bw-ikoon-maat: 2.5rem;
  color: var(--bw-groen);
  opacity: 0.18;
  /* ⚠️ Gespiegeld over de verticale as. Elke tekening uit de collage wijst naar
     linksonder — dat is de stand op het doek, waar het gereedschap in de LINKER
     onderhoek ligt. Rechtsboven op een kaart wijst hij daarmee de pagina uit. Deze
     spiegeling zet de kop naar binnen, het handvat naar de rand: hetzelfde gebaar,
     alleen de goede kant op voor deze hoek.
     De spiegeling staat in de transform, dus elke hover-transform hieronder moet
     scaleX(-1) HERHALEN — een tweede transform vervangt de eerste, hij stapelt niet. */
  transform: scaleX(-1);
  transition: opacity 0.18s ease-in-out, transform 0.18s ease-in-out;
}

/* Alle tekeningen liggen op dezelfde as van 45,5 graden (zie de waarschuwing
   bij gereedschap-beitel in docs/image-assets.md), dus één kleine draai laat ze
   allemaal dezelfde kant op kantelen. Het blijft een familie, en het leeft. */
.bw-kaart-teken:hover > .bw-ikoon,
.bw-kaart-teken:focus-within > .bw-ikoon {
  opacity: 0.85;
  /* rotate(5deg) en niet -5: de spiegeling ervoor draait de draairichting om, dus
     dit is dezelfde kanteling naar links als vóór het spiegelen. */
  transform: scaleX(-1) rotate(5deg) scale(1.05);
}

/* Kop en label mogen niet onder het teken door lopen. Het beslaat ruwweg de
   eerste 3,6rem rechtsboven — precies waar die twee beginnen. */
.bw-kaart-teken > .bw-label,
.bw-kaart-teken :is(h2, h3, .card-title) {
  padding-inline-end: 3.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .bw-kaart-teken > .bw-ikoon {
    transition: none;
  }

  .bw-kaart-teken:hover > .bw-ikoon,
  .bw-kaart-teken:focus-within > .bw-ikoon {
    /* Niet 'none': dan valt de spiegeling weg en springt het teken om. */
    transform: scaleX(-1);
  }
}


/* HET MERK IN DE NAVIGATIEBALK — de collage, gezakt, opgeschoven en verbreed.

   Vijf pogingen ver. De route staat op /stijl, want elke afgekeurde stap verklaart
   de volgende:

     1. de losse hamer — rustig, maar een plaatje náást de naam;
     2. de collage wit in een gevuld groen vierkant — een kader eromheen maakt er
        helemáál een plaatje van, en dit beeldmerk is juist een hoekornament;
     3. de collage vol in het groen, hoog — die drukte tegen de naam aan;
     4. dezelfde collage gezakt, opgeschoven en een tikje transparant — maar daarin
        was van de hamer alleen nog de bovenrand van de kop te zien;
     5. de collage verbreed, met de hamer verhuisd naar de lege hoek rechts van
        MONTAGE en een rolmaat in het gat dat daartussen viel. Dat staat hier.

   De compositie komt uit `docs/input/barry bouwhekdoek.pdf` en is gemeten, niet
   bedacht. Twee dingen uit die meting sturen alles:

     - de collage is een DIAGONAAL: het gereedschap ligt opeengepakt in de linker
       ONDERdriehoek, en alles voorbij ongeveer 60% van de breedte en boven 40% van
       de hoogte is leeg. Dat is de ruimte die Maikel voor het woordmerk openliet;
     - DAAR STAAT DE NAAM DAN OOK. Op het doek begint "B. Weijman" op x = 1885,04
       terwijl de tekening tot x = 1990 doorloopt: de naam staat niet naast het
       beeldmerk, hij staat erín.

   ⚠️ ZAKKEN IS GEWICHT WEGHALEN, NIET ALLEEN VERSCHUIVEN. Het gereedschap ligt
   opeengepakt onderin, en de balk snijdt de onderkant af. De tekening laten zakken
   duwt dus juist die zware massa — de tang en de hamerkop — onder de snijlijn, en
   wat overblijft is de rustiger bovenkant met een dunne veeg langs de onderrand.
   Effectiever dan dekking alleen; de tussenstappen staan op /stijl.

   ⚠️ DAT ZAKKEN KOST GEREEDSCHAP. Wat onder de snijlijn verdwijnt is niet alleen
   gewicht: logo-mark.svg is bijna vierkant en zijn gereedschap staat in een STAPEL die
   tot de onderrand doorloopt, terwijl een balk breed en laag is. De steeksleutel ligt
   in die stapel het laagst en verdween dus als eerste.

   Daarvoor is `logo-mark-balk.svg` er: identiek aan het beeldmerk, met alleen de
   steeksleutel 355 eenheden verder langs de as. Verder opschuiven kan niet — bij 355
   is de afstand tot zijn buren 20 eenheden, precies de band van 15-22 die deze collage
   zelf aanhoudt; bij 450 is het nog 1, en dan lopen de vormen op balkformaat visueel
   in elkaar over. Opgemeten, niet geschat.

   ⚠️ EN DAARMEE WAS DE HAMER NOG STEEDS EEN VEEG. De steeksleutel kon mee, maar de
   hamer staat in dezelfde stapel en is het grootste stuk: van zijn kop bleef binnen de
   zichtbare strook niet meer over dan de bovenrand. Verder opschuiven kon niet, want
   dan botst hij op zijn buren. Wat wél kon, is de tekening BREDER maken: rechts van
   MONTAGE en onder de letters "man" stond een lege hoek van 1154 bij 674 eenheden, en
   daar past de hele hamerkop in.

   Dat werd `logo-mark-balk-breed.svg`: dezelfde paden, viewBox verbreed van 1990,47 naar
   3300, de hamer verhuisd naar die hoek (en op 0,86, want op ware grootte past hij er in
   de hoogte niet in — zie het bestand), en tussen de stapel en de hamer de nieuwe
   `gereedschap-rolmaat.svg`, 180° gedraaid: huisje rechts, lipje links omhoog onder de M,
   zodat het lijkt alsof MONTAGE wordt opgemeten. Staat als variant H op /stijl.

   ⚠️ EN DAT WERD TE DRUK. Het gat was gevuld, maar de balk ook: drie dingen om de naam
   heen, en als geheel hing het niet samen. Wat hier nu hangt is
   `logo-mark-balk-rustig.svg`, dat op twee punten van H afwijkt:

     - de HAMER IS GESPIEGELD, zodat hij naar de naam toe slaat in plaats van ervandaan.
       Hij staat daarmee ook 15 eenheden verder naar rechts (3210 in plaats van 3195):
       gespiegeld loopt de steel naar rechtsonder weg in plaats van naar linksonder, en
       dat is de kant waar de niet-echte rand ligt. Zo houdt de inkt (tot 3244) dezelfde
       30 eenheden speling tot de snijlijn op 3274 als eerst;
     - de ROLMAAT IS ERUIT. Juist het vullen van dat gat maakte het vol. Zonder rolmaat
       staat de naam vrij, en leest het merk als één ding: stapel links, naam, hamer die
       naar de naam toe slaat.

   ⚠️ De verhouding die dit merk draagt blijft daarbij staan, en die is de reden dat het
   werkt: de bovenkant van de stapel ligt op de kaphoogte van "B. Weijman", dus tekening
   en naam beginnen op dezelfde lijn. Verander je `--bw-merk-zak` of `--bw-merk-maat`, dan
   is dat het eerste wat je opnieuw moet bekijken.

   ⭐ DAARNA IS DE TEKENING NOG 3 PX OMHOOG en op de strook bijgesneden. Drie dingen die
   bij elkaar horen:

     - de tekening staat 3 px hoger, zodat de stapel dichter tegen de kaplijn van
       "B. Weijman" aan komt. Dat gebeurt niet met een losse marge maar met de viewBox
       zelf: die begint nu op y = -377,2 in plaats van op -446,2;
     - DE HAMER GING 69 EENHEDEN OMLAAG, en 69 eenheden ís die 3 px (er gaan er 23 in
       een pixel). Netto staat hij dus stil in de balk terwijl de rest omhoogging —
       anders raakt zijn klauw de onderkant van de n van "Weijman". Zo houdt hij 61
       eenheden vrij onder die letters, precies zoals eerst;
     - KWAST EN TANG ZIJN ERUIT. Die liggen in de collage vanaf y 1378 en de strook
       stopt op 1010: ze kwamen nooit in beeld. Scheelt vier paden en ruim een derde
       van de padgegevens in een bestand dat op élke pagina wordt geladen.

   ⚠️ Al die y-waarden zijn dus 69 hoger dan in logo-mark-balk-breed.svg, terwijl de
   x-waarden gelijk bleven. Vergelijk je de twee bestanden, reken dat verschil er dan bij.

   🔵 Beide voorgangers blijven staan om naast elkaar te kunnen leggen: H
   (`logo-mark-balk-breed.svg`, hamer naar buiten, mét rolmaat) en I
   (`logo-mark-balk-breed-spiegel.svg`, hamer naar binnen, mét rolmaat).

   ⚠️ De naam verspringt hierdoor niet. De inspringing is 0,35 van een breedte van
   1,6014 maat, en dat is 0,5605 maat — precies wat 0,58 van 0,9659 was. Het merk is
   dus even breed als eerst; alleen loopt de tekening nu verder onder de naam door,
   waar toch niets stond.

   🔵 `logo-mark-liggend.svg` blijft klaarliggen: dezelfde vier stuks náást elkaar in
   plaats van onder elkaar (2,09:1, alles in beeld). Die was de eerdere poging om
   hetzelfde probleem op te lossen, en is teruggedraaid omdat hij groot en los in de
   balk staat in plaats van om de naam heen. Staat als variant G op /stijl.

   ⚠️ VOL GROEN, EN GEEN WATERMERK — een gedwongen keuze, geen smaak. Bij lage dekking
   wordt deze collage op balkformaat een grijze veeg, want de vormen zijn dun en liggen
   dicht op elkaar; en over de vólle tekening kan de naam niet, want --bw-ink op
   --bw-groen haalt 1,7:1. De enige plek waar de naam én leesbaar én bínnen het
   beeldmerk staat, is die lege hoek.

   ⚠️ Alleen het gereedschap krijgt kleur. Geen vlak, geen kader.

   De maten zijn verhoudingen en geen losse getallen:
     --bw-merk-maat      de hoogte van de tekening
     --bw-merk-breedte   volgt de viewBox van de tekening in het masker
     --bw-merk-inspring  waar de open hoek begint, als deel van de breedte
     --bw-merk-schuif    hoe ver de tekening naar rechts schuift, ónder de naam door
     --bw-merk-zak       legt het midden van de naam op dit deel van de hoogte
     --bw-merk-dekking   een paar procent transparantie */
.bw-merk {
  /* ⚠️ DIT IS DE BINNENMAAT VAN DE BALK, en dat is geen toeval maar de hele opzet.
     logo-mark-balk-rustig.svg is bijgesneden op precies de strook die in de balk te
     zien is, dus de tekening valt samen met het maskervak: niets valt er meer buiten,
     en in de browser staat er geen blok van 90 px meer in een balk van 60. Dat is ook
     waarom --bw-merk-zak hieronder gewoon -50% is: middenin, geen los getal.

     De keerzijde: dit getal hángt nu aan de hoogte van de balk. Die is 60,31 px —
     de naam (34,31) plus 2 × 0,3125rem brandpadding plus 2 × 0,5rem navbarpadding —
     en 60,31/16 = 3,7694rem. Verandert de regelhoogte, de lettergrootte of een van
     die twee paddings, dan moet dit getal opnieuw uitgerekend worden, en anders staat
     er een streep wit boven of onder de tekening. */
  --bw-merk-maat: 3.7694rem;
  /* 3300/1387 — de viewBox van logo-mark-balk-rustig.svg. Wissel je de tekening,
     dan moet dit getal mee, anders wordt ze uitgerekt of gaat ze zweven. */
  --bw-merk-breedte: calc(var(--bw-merk-maat) * 2.37917);
  /* 0,35 × 2,37917 × 3,7694rem is dezelfde inspringing in pixels als 0,58 × 0,9659 ×
     5,6rem bij de vierkante tekening. De naam begint dus nog steeds op dezelfde plek
     en het merk is even breed als altijd — de balk verspringt niet. */
  --bw-merk-inspring: 0.35;
  /* 0,55rem + 6px. Die laatste 6px zijn met de hand in de browser gevonden en niet
     berekend: de tekening staat er nét iets beter mee. In rem gezet zodat hij meeschaalt
     met de kleinere wortelmaat onder 768 px (sectie 3), net als al het andere hier. */
  --bw-merk-schuif: 0.925rem;
  --bw-merk-zak: -50%;
  --bw-merk-dekking: 0.9;
  position: relative;
  /* De tekening staat absoluut en telt dus niet mee in de breedte. Deze inspringing
     zet de naam in de open hoek en reserveert de ruimte die de tekening links ervan
     inneemt. De tekening loopt met --bw-merk-schuif verder naar rechts dan de naam
     begint: ze schuift dus ónder de naam door, en dat mag, want juist dat deel van
     de tekening is leeg. */
  padding-inline-start: calc(var(--bw-merk-breedte) * var(--bw-merk-inspring));
}

.bw-merk-collage {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--bw-merk-schuif);
  inline-size: var(--bw-merk-breedte);
  block-size: var(--bw-merk-maat);
  transform: translateY(var(--bw-merk-zak));
  background-color: var(--bw-groen);
  opacity: var(--bw-merk-dekking);
  /* ⚠️ De RUSTIGE BALKVARIANT, niet logo-mark.svg zelf. Dezelfde paden, maar breder
     (3300 in plaats van 1990,47), de steeksleutel opgeschoven, de hamer gespiegeld in
     de lege hoek rechts van MONTAGE, en bijgesneden op de strook die in de balk te
     zien is: viewBox 0 -377,2 3300 1387. Kwast en tang zitten er niet meer in, want
     die liggen onder die strook. Elke andere tekening heeft dus een andere verhouding
     én een andere maat: wissel je hem, wissel dan ook de vier variabelen hierboven
     (zie .bw-kist-merk-vierkant en .bw-kist-merk-breed). Redenen: in het bestand. */
  -webkit-mask-image: url("../img/logo-mark-balk-rustig-wit.svg");
          mask-image: url("../img/logo-mark-balk-rustig-wit.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  pointer-events: none;
}

/* De naam ligt boven de tekening; een absoluut geplaatst element wint anders van een
   statische broer. */
.bw-merk-naam {
  position: relative;
  z-index: 1;
}

/* ⚠️ Zonder maskerondersteuning is dit een groen blok naast de naam. Dan dus niets,
   en ook de inspringing eruit — anders blijft er een gat staan. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .bw-merk-collage { display: none; }
  .bw-merk { padding-inline-start: 0; }
}

/* HET MERK IN DE NAVIGATIEBALK — twee dingen tegelijk, en ze horen bij elkaar.

   1. UITLIJNEN MET DE INHOUD (margin-inline-start).
   .bw-merk begint netjes op de rand van de container, maar de tekening begint pas
   --bw-merk-schuif verder naar rechts. Het merk stond daardoor zichtbaar dieper
   ingesprongen dan alle koppen en tekst eronder. Deze negatieve marge trekt het merk
   terug tot de tekening op diezelfde lijn staat.

   ⚠️ Niet gelijk aan --bw-merk-schuif, en geen som die je kunt narekenen: de
   linkerrand van de tekening is niet de linkerrand van het maskervak. De balk snijdt
   de collage af, en wat er van het gereedschap in die strook overblijft begint een
   paar pixels naar binnen. Deze waarde is dus met de hand in de browser opgemeten,
   net als de 6px in --bw-merk-schuif, en moet opnieuw worden opgemeten zodra de maat,
   de zak of de tekening verandert. 0,715rem is 10px bij de wortelmaat van 14px die
   onder 768px geldt (sectie 3); in rem, zodat hij daarboven meeschaalt met de rest
   van deze sectie.

   Geldt op elke breedte, en dat kan omdat de balk in _Layout.cshtml in een .container
   staat en niet meer in een .container-fluid: balk en pagina delen nu dezelfde
   linkerrand. Wordt dat ooit teruggedraaid, dan klopt deze regel alleen nog onder
   576px — daarboven staat het merk dan links van gecentreerde inhoud.

   2. ZICHZELF AFSNIJDEN (de vier regels daaronder).
   Het merk loopt onder de balk uit; dat is de compositie van het doek. Dat werd
   afgevangen met `overflow: hidden` op .bw-navbalk, maar die balk heeft nu
   uitklapmenu's en die regel kapte ze af (zie sectie 9). Dus snijdt het merk zichzelf.

   De vier regels zijn samen één beweging: `stretch` maakt het merk zo hoog als de
   rij, de negatieve marge duwt hem daarna over de padding van de balk heen, en de
   padding zet diezelfde ruimte er binnenin weer bij. Netto ligt de rand van het merk
   exact op de binnenrand van de balk — precies waar `overflow: hidden` eerst sneed —
   terwijl de naam op zijn plek blijft en een menu vrij naar buiten kan klappen. Dat
   de naam niet verschuift zit hem erin dat het merk symmetrisch groeit: het midden
   van .bw-merk blijft het midden van de rij, en daar hangt de tekening aan vast
   (inset-block-start: 50% op .bw-merk-collage).

   ⚠️ Béide Bootstrap-variabelen moeten in die som. Met alleen --bs-navbar-padding-y
   verliest .navbar-brand zijn eigen ruimte: de balk wordt 0,625rem lager en snijdt
   dus méér van de tekening af dan de bedoeling is — juist onderaan, waar hij van de
   rand af hoort te lopen. */
.bw-navbalk .bw-merk {
  margin-inline-start: -0.715rem;
  align-self: stretch;
  margin-block: calc(var(--bs-navbar-padding-y) * -1);
  padding-block: calc(var(--bs-navbar-padding-y) + var(--bs-navbar-brand-padding-y));
  overflow: hidden;
}


/* TEXTUURVARIANTEN — sectie 9 met een andere tekening.

   .bw-textuur tekent standaard de hele collage. Deze twee zetten er een groep
   uit die collage voor in de plaats, voor vlakken waar de vierkante verhouding
   van het beeldmerk niet past.

   ⚠️ De maat moet mee. .bw-textuur::before is vierkant, en mask-size: contain
   laat een staande tekening dan met brede marges links en rechts in dat
   vierkant zweven — waardoor de verschuiving naar de rand niet meer klopt en
   de textuur ineens midden in het vlak hangt. Vandaar dat elke variant het vak
   op de verhouding van zijn eigen viewBox zet: dan raakt de tekening de rand
   van het vak, en doet --bw-textuur-verschuiving weer wat er staat. */

/* Staand, 975,23 x 1981,49 — dus 0,4922 keer zo breed als hoog. */
.bw-textuur-waaier::before {
  inline-size: calc(var(--bw-textuur-maat, 26rem) * 0.4922);
  -webkit-mask-image: url("../img/gereedschap-waaier-wit.svg");
          mask-image: url("../img/gereedschap-waaier-wit.svg");
}

/* Liggend, 1825,79 x 1377,74 — dus 0,7546 keer zo hoog als breed. */
.bw-textuur-hoek::before {
  block-size: calc(var(--bw-textuur-maat, 26rem) * 0.7546);
  -webkit-mask-image: url("../img/gereedschap-hoek-wit.svg");
          mask-image: url("../img/gereedschap-hoek-wit.svg");
}


/* DE GEREEDSCHAPSKIST — /stijl.

   Eén pagina waar de hele afspraak naast elkaar staat, zodat een keuze te zien
   is in plaats van te beredeneren. Hij staat bewust in site.css en niet in een
   eigen bestand: het zijn een paar regels, en de pagina hoort de site te tonen
   zoals hij is — met dezelfde tokens, dezelfde randjes, hetzelfde raster.

   De pagina krijgt noindex (zie StijlController) en staat niet in sitemap.xml. */
/* ⚠️ Losse tegels met een eigen randje, en geen naadloos raster met een gat van
   1px ertussen. Die truc — de containerkleur laten doorschijnen — laat in de
   laatste rij ook de LEGE cellen doorschijnen, en tien tekeningen vullen zelden
   een hele rij. Dan staat er een grijs blok achter niets. In de browser gezien. */
.bw-kist-rooster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.6rem;
}

.bw-kist-vak {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.5rem;
  padding: 1.25rem 0.75rem;
  background-color: var(--bw-surface);
  border: 1px solid var(--bw-line);
  text-align: center;
}

.bw-kist-vak > .bw-ikoon {
  --bw-ikoon-maat: 3.25rem;
  color: var(--bw-groen);
}

.bw-kist-naam {
  font-family: var(--bw-font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
}

/* De proefbalk voor het merk: een stukje navigatiebalk, zodat elke variant op
   zijn echte ondergrond staat en niet op de paginaachtergrond. */
/* ⚠️ DEZE PROEFBALK MOET DE ECHTE BALK NÁDOEN, niet er alleen op lijken. Hij deed dat
   niet: het merk stond hier in een vak zo hoog als de naam, terwijl het in de echte
   balk `align-self: stretch` krijgt en dus zo hoog wordt als de hele balk. En de naam
   stond er op 1rem in plaats van de 1,25rem die .navbar-brand geeft. Twee verschillen
   die je niet ziet als je er los naar kijkt, maar die de tekening ergens ánders
   afsnijden — en dan kies je op /stijl een variant die in de balk anders uitpakt.

   De vier getallen hieronder zijn daarom letterlijk die van Bootstrap's navbar:
   --bs-navbar-padding-y (0,5rem) en --bs-navbar-brand-padding-y (0,3125rem). Ze staan
   hier uitgeschreven en niet als var(), want die variabelen leven op .navbar en die is
   hier niet in de buurt. Verandert Bootstrap ze, dan moet dit mee — en dat merk je
   doordat deze proef weer van de echte balk gaat afwijken. */
.bw-kist-balk {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: var(--bw-surface);
  border: 1px solid var(--bw-line);
  border-bottom: 3px solid var(--bw-groen);
  /* Net als de echte balk (sectie 9): anders steekt een merkvariant eruit en meet
     je iets anders dan wat er op de site gebeurt. */
  overflow: hidden;
}

/* Dezelfde beweging als .bw-navbalk .bw-merk hierboven: even hoog worden als de balk,
   over de padding heen, en zichzelf afsnijden op de binnenrand. */
.bw-kist-balk .bw-merk {
  font-size: 1.25rem;
  align-self: stretch;
  margin-block: -0.5rem;
  padding-block: 0.8125rem;
  overflow: hidden;
}

/* De textuurproef: drie kleine vlakken naast elkaar. Op ware grootte (26rem) zie je
   in zo'n vlak maar een hoekje van de tekening, en dan lijken alle drie hetzelfde.
   Hier dus kleiner en dichter naar binnen, zodat het verschil te zien is — wat op
   de echte banden juist niet de bedoeling is. */
.bw-kist-textuur {
  --bw-textuur-maat: 11rem;
  --bw-textuur-verschuiving: -1.5rem;
  min-block-size: 11rem;
}

/* Een teken op ware grootte los tegen de canvasachtergrond. */
.bw-kist-groot {
  --bw-ikoon-maat: clamp(5rem, 22vw, 8rem);
  color: var(--bw-groen);
}



/* De merkvarianten die NIET geleverd zijn, zodat er te KIJKEN valt in plaats van te
   beredeneren. Ze verschillen alleen in de variabelen van .bw-merk hierboven, plus bij
   sommige een andere tekening in het masker. Wordt er hier een gekozen, dan verhuizen
   die waarden naar .bw-merk en gaat de variant weg. .bw-kist-balk snijdt net zo af als
   de echte navigatiebalk. */

/* De VIERKANTE collage — logo-mark-balk.svg, wat er tot de verbreding hing.
   Sinds .bw-merk de brede tekening draagt, is dit de variant en niet meer de norm.
   Staat hier vóór C, E en F omdat die drie hem als basis gebruiken en er alleen één
   variabele van overschrijven; bij gelijke specificiteit wint de laatste regel. */
.bw-kist-merk-vierkant {
  /* ⚠️ Maat en zak staan hier expliciet. De geleverde tekening is bijgesneden op de
     balkstrook en heeft daarom een eigen maat (3,7694rem) en zak (-50%); een tekening
     die dat niet is, moet zijn oude waarden terugzetten, anders krijgt hij die van de
     nieuwe en klopt er niets meer van. Geldt ook voor de twee klassen verderop. */
  --bw-merk-maat: 5.6rem;
  --bw-merk-breedte: calc(var(--bw-merk-maat) * 0.9659);
  --bw-merk-inspring: 0.58;
  --bw-merk-zak: -12%;
}

.bw-kist-merk-vierkant .bw-merk-collage {
  -webkit-mask-image: url("../img/logo-mark-balk-wit.svg");
          mask-image: url("../img/logo-mark-balk-wit.svg");
}

/* H en I — de twee tussenstappen mét rolmaat. Ze delen één viewBox (3300 × 2060,66,
   dus de hele tekening en niet alleen de balkstrook) en dus ook maat, breedte en zak.
   Waarom ze het geen van beide werden, staat bij de toelichting op .bw-merk: met de
   rolmaat erbij werd de balk te vol. */
.bw-kist-merk-breed,
.bw-kist-merk-spiegel {
  --bw-merk-maat: 5.6rem;
  --bw-merk-breedte: calc(var(--bw-merk-maat) * 1.6014);
  --bw-merk-inspring: 0.35;
  --bw-merk-zak: -12%;
}

.bw-kist-merk-breed .bw-merk-collage {
  -webkit-mask-image: url("../img/logo-mark-balk-breed-wit.svg");
          mask-image: url("../img/logo-mark-balk-breed-wit.svg");
}

.bw-kist-merk-spiegel .bw-merk-collage {
  -webkit-mask-image: url("../img/logo-mark-balk-breed-spiegel-wit.svg");
          mask-image: url("../img/logo-mark-balk-breed-spiegel-wit.svg");
}

/* A — de losse hamer, waar we begonnen. Die stond in de tekstregel en niet absoluut,
   dus hier de inspringing terugdraaien en de tussenruimte terugzetten. */
.bw-kist-merk-hamer {
  padding-inline-start: 0;
  gap: 0.6rem;
}

/* B — de hoek (hamer, kwast, tang) naast de naam: rustiger, maar het is een uitsnede
   en niet het beeldmerk. */
.bw-kist-merk-hoek {
  --bw-merk-maat: 3rem;
  --bw-merk-breedte: calc(var(--bw-merk-maat) * 1.3252);
  --bw-merk-inspring: 1.08;
  --bw-merk-schuif: 0;
  --bw-merk-zak: -50%;
}

.bw-kist-merk-hoek .bw-merk-collage {
  -webkit-mask-image: url("../img/gereedschap-hoek-wit.svg");
          mask-image: url("../img/gereedschap-hoek-wit.svg");
}

/* C — de stand van vóór het zakken: hoog, vol, niets opgeschoven. Laat zien wat
   --bw-merk-zak doet; de zware onderkant valt hier nog binnen de balk. */
.bw-kist-merk-hoog {
  --bw-merk-maat: 5rem;
  --bw-merk-inspring: 0.66;
  --bw-merk-schuif: 0;
  --bw-merk-zak: -22%;
  --bw-merk-dekking: 1;
}

/* E — groter: meer gereedschap in beeld, en verder onder de balk uit. */
.bw-kist-merk-groot {
  --bw-merk-maat: 6.6rem;
}

/* F — het watermerk waar de naam wél overheen valt. Staat er om te laten zien waarom
   het niet geleverd is: op deze maat wordt de collage een grijze veeg. */
.bw-kist-merk-watermerk {
  --bw-merk-inspring: 0.3;
  --bw-merk-dekking: 0.3;
}

/* G — de liggende tekening. Gemaakt omdat de vierkante collage in een lage balk zijn
   onderste helft verliest, en wéér teruggedraaid omdat hij groot en los in de balk
   staat in plaats van om de naam heen. Blijft hier staan om verder mee te schuiven:
   de knoppen zijn --bw-merk-maat, --bw-merk-inspring, --bw-merk-schuif en
   --bw-merk-zak, precies zoals hierboven. */
.bw-kist-merk-liggend {
  --bw-merk-maat: 3.4rem;
  --bw-merk-breedte: calc(var(--bw-merk-maat) * 2.0916);
  --bw-merk-inspring: 0.85;
  --bw-merk-schuif: 0;
  --bw-merk-zak: -50%;
}

.bw-kist-merk-liggend .bw-merk-collage {
  -webkit-mask-image: url("../img/logo-mark-liggend-wit.svg");
          mask-image: url("../img/logo-mark-liggend-wit.svg");
}

/* Variant op het kaartwatermerk: het teken vol en boven de kop, in plaats van
   flauw in de hoek. Staat alleen op /stijl, ter vergelijking. */
.bw-kist-kaart-vol .bw-ikoon {
  --bw-ikoon-maat: 2.25rem;
  color: var(--bw-groen);
  margin-block-end: 0.65rem;
}
/* 11. ACTIELINKS ==========================================================
   Waarom dit bestaat: de publieke pagina's stonden vol kale <a>-tekst —
   "Alle diensten", "Lees meer", "Bekijk project", de hele voettekst. Het
   blauw was al overschreven, maar een onderstreepte tekstlink is nog steeds
   geen ontworpen actie: hij verdwijnt in de pagina, en op een telefoon is een
   regel tekst van 11 px een raakvlak dat je drie keer mist.

   Drie gewichten, en bewust niet meer dan drie:

     .btn-primary          het zwaarste. Eén per scherm: de echte actie
     .btn-outline-primary  de secundaire actie die ernaast staat
     .bw-actie             de navigatie-actie: "alle diensten", "lees meer"

   .bw-actie is met opzet géén .btn. Hij zit ertussenin — zwaarder dan tekst,
   lichter dan een knop — want een homepage met twintig gevulde groene knoppen
   is geen ontwerp maar een kermis. Vorm: een blok met een dun randje dat pas
   invult als je hem aanwijst, precies de "professioneel dunne randjes" uit
   docs/brand-and-ux.md, met genoeg padding om het duimformaat te halen.
   -------------------------------------------------------------------------- */

.bw-actie {
  display: inline-flex;
  /* Staat hier en niet alleen op .bw-kaart .bw-actie: in elke flexkolom
     (card-body is er een) rekt een blokitem anders over de volle breedte
     uit, en dan is het geen knop meer maar een balk. */
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--bw-line-strong);
  background-color: transparent;
  color: var(--bw-accent-text);
  font-family: var(--bw-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out,
              color 0.15s ease-in-out;
}

/* De pijl staat in de CSS en niet in de view, omdat hij decoratie is: een
   schermlezer hoort "Alle diensten" en niet "Alle diensten pijl-naar-rechts".

   ⚠️ Dit MOET ::before zijn, en de order zet hem daarna weer achteraan.
   Bootstrap's .stretched-link — die op de kaarten de hele kaart klikbaar
   maakt — gebruikt namelijk ::after met content: "" en inset: 0. Zet je de
   pijl in ::after, dan wint deze regel (site.css laadt na Bootstrap) en staat
   de pijl ineens in de linkerbovenhoek van de kaart, want dat is waar dat
   opgerekte overlay-vlak begint. In de browser gezien; niet terugdraaien. */
.bw-actie::before {
  content: "\2192";
  order: 1;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.15s ease-in-out;
}

.bw-actie:hover,
.bw-actie:focus-visible {
  background-color: var(--bw-groen);
  border-color: var(--bw-groen);
  color: var(--bw-op-donker);
  text-decoration: none;
}

.bw-actie:hover::before,
.bw-actie:focus-visible::before {
  transform: translateX(0.2rem);
}

/* De zwaardere variant, voor waar de actie het doel van de sectie is. */
.bw-actie-vol {
  background-color: var(--bw-groen);
  border-color: var(--bw-groen);
  color: var(--bw-op-donker);
}

.bw-actie-vol:hover,
.bw-actie-vol:focus-visible {
  background-color: var(--bw-groen-diep);
  border-color: var(--bw-groen-diep);
}

/* In een kaart is de hele kaart klikbaar (.stretched-link), dus de actie moet
   meelichten zodra je ergens op die kaart hangt. Doet hij dat niet, dan lijkt
   hij dood terwijl de kaart wel degelijk reageert. */
.bw-kaart .bw-actie {
  margin-block-start: 0.85rem;
}

.bw-kaart:hover .bw-actie,
.bw-kaart:focus-within .bw-actie {
  background-color: var(--bw-groen);
  border-color: var(--bw-groen);
  color: var(--bw-op-donker);
}

.bw-kaart:hover .bw-actie::before,
.bw-kaart:focus-within .bw-actie::before {
  transform: translateX(0.2rem);
}

/* Op zwart valt het merkgroen weg tegen de band, dus daar leent de actie het
   lichte tekstvlak — dezelfde truc als .bw-band .btn-outline-primary.
   Alleen .bw-band: de voettekst heeft sinds sectie 12 een eigen linkvorm. */
.bw-band .bw-actie {
  border-color: var(--bw-lijn-op-donker);
  color: var(--bw-op-donker);
}

.bw-band .bw-actie:hover,
.bw-band .bw-actie:focus-visible {
  background-color: var(--bw-op-donker);
  border-color: var(--bw-op-donker);
  color: var(--bw-band);
}

/* Op een telefoon staat de rem op 14px (sectie 3), dus dezelfde padding
   levert daar een kleiner blokje op — precies waar het raakvlak juist groter
   moet zijn. Vandaar hier meer lucht en niet minder. WCAG 2.2 AA vraagt
   24x24 CSS-px; daar zitten we ruim boven. */
@media (max-width: 575.98px) {
  .bw-actie {
    padding-block: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bw-actie,
  .bw-actie::before {
    transition: none;
  }
}


/* 12. VOETTEKST ===========================================================
   Was: vijf onderstreepte links op een grijze regel met een dun lijntje
   erboven — het enige stuk van de pagina waar niets ontworpen was.
   Is: de derde donkere band. De site sluit onderaan zoals hij bovenaan opent,
   met dezelfde gereedschapstextuur en dezelfde actievorm, zodat de voettekst
   deel van het ontwerp is in plaats van wat er overblijft.
   -------------------------------------------------------------------------- */

.bw-voet {
  flex-shrink: 0;
  margin-block-start: 2rem;
  padding-block: clamp(1.5rem, 4vw, 2.25rem) 1.25rem;
  background-color: var(--bw-band);
  color: var(--bw-op-donker-zacht);
  border-top: 3px solid var(--bw-groen);
  --bw-textuur-kleur: var(--bw-op-donker);
  --bw-textuur-dekking: 0.07;
  --bw-textuur-maat: 20rem;
}

/* De linkbalk. Twee dingen die hij bewust NIET is:

   1. Geen .bw-actie. Die vorm — hoofdletters, een randje, een pijl — is de
      actie ván een pagina: "Alle diensten", "Bekijk project". Vijf van die
      blokjes onder elkaar in de voettekst lezen als vijf oproepen, terwijl
      het gewoon de kruimels van de site zijn. Hier dus geen pijl en geen
      kader, maar de kopletter met een dun lijntje eronder: hetzelfde
      "professioneel dunne randje" uit brand-and-ux.md, alleen liggend.
   2. Geen rij die links begint. De balk staat buiten .container en verdeelt
      zich over de volle breedte, elk label gecentreerd in zijn eigen vak.

   grid-auto-flow: column met grid-auto-columns: 1fr geeft elk item exact
   dezelfde breedte zonder dat het aantal links ergens in de CSS staat — een
   zesde link erbij verdeelt zichzelf. */
.bw-voet-links {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0 clamp(0.5rem, 2vw, 2rem);
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.bw-voet-link {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ruim boven de 24x24 CSS-px van WCAG 2.2 AA, ook wanneer het label kort is
     ("Contact") — het hele vak is het raakvlak, niet alleen de tekst. */
  min-height: 3rem;
  padding: 0.65rem 0.35rem;
  border-bottom: 1px solid var(--bw-lijn-op-donker);
  color: var(--bw-op-donker-zacht);
  font-family: var(--bw-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: color 0.15s ease-in-out,
              border-color 0.15s ease-in-out,
              box-shadow 0.15s ease-in-out;
}

/* Het lijntje verdikt zich in plaats van dat de rand van breedte verandert:
   een inset-schaduw tekent binnen het vak en verschuift dus niets. Groen-
   helder en niet --bw-groen, want #16453C valt weg tegen deze band. */
.bw-voet-link:hover,
.bw-voet-link:focus-visible {
  color: var(--bw-op-donker);
  border-color: var(--bw-groen-helder);
  box-shadow: inset 0 -2px 0 var(--bw-groen-helder);
  text-decoration: none;
}

/* Onder md wordt vijf naast elkaar een kolom van 90 px waarin "Kennisbank"
   afbreekt. Twee kolommen dus, en staat er een oneven aantal links, dan gaat
   de laatste over de volle breedte — anders hangt hij scheef in zijn helft. */
@media (max-width: 767.98px) {
  .bw-voet-links {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 1rem;
  }

  .bw-voet-link:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bw-voet-link {
    transition: none;
  }
}

/* De onderste regel: copyright, en verder niets dat om aandacht vraagt. */
.bw-voet-slot {
  margin-block-start: 1.35rem;
  padding-block-start: 1rem;
  border-top: 1px solid var(--bw-lijn-op-donker);
  font-size: 0.85rem;
  color: var(--bw-op-donker-zacht);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.5rem;
}

/* De contactgegevens onderaan. Wit en niet groen: #16453C valt weg tegen de
   donkere band — zie de contrastregel in docs/brand-and-ux.md. */
.bw-voet-contact {
  color: var(--bw-op-donker);
  font-weight: 500;
  text-decoration: none;
}

.bw-voet-contact:hover,
.bw-voet-contact:focus-visible {
  color: var(--bw-groen-helder);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bw-voet-plaats {
  color: var(--bw-op-donker-zacht);
}

/* Onder md past het slot niet meer op één regel: telefoon, e-mail, bedrijfsnaam
   en copyright breken dan af tot drie regels van elk een andere lengte, links
   tegen de kantlijn — een rafelrand onderaan de pagina. Ze afzonderlijk
   centreren kan niet: items op dezelfde flexregel delen hun uitlijning, dus
   centreert het hele blok. Bewust dezelfde grens als de linkbalk hierboven: de
   voettekst is onder md één gecentreerde stapel en vanaf md een verdeelde balk
   met een regel eronder die op de container uitlijnt.
   text-align staat erbij voor het geval "B. Weijman Montage · Hoofddorp" op een
   smalle telefoon zélf nog afbreekt — dan hoort die tweede regel ook gecentreerd. */
@media (max-width: 767.98px) {
  .bw-voet-slot {
    justify-content: center;
    text-align: center;
  }
}


/* 12a. LEESLIJST ==========================================================
   De lijst met doorverwijzingen onderaan een dienst- of werkgebiedpagina:
   titel als link, samenvatting eronder. Geen kaarten — dit zijn suggesties,
   geen etalage, en drie kaarten onder drie andere kaarten leest als ruis.
   -------------------------------------------------------------------------- */

.bw-lijst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.85rem;
}

.bw-lijst > li {
  padding-block-end: 0.85rem;
  border-bottom: 1px solid var(--bw-line);
}

.bw-lijst > li:last-child {
  padding-block-end: 0;
  border-bottom: 0;
}

.bw-lijst > li > a {
  font-family: var(--bw-font-heading);
  font-weight: 600;
}


/* 12b. HOOFDACTIE IN DE NAVIGATIE =========================================
   Bezoekers kunnen Barry direct bellen. Wie is ingelogd met een portalrol
   krijgt op dezelfde plek een directe ingang naar het eigen portaal. Beide
   blijven buiten het dichtgeklapte menu (zie Views/Shared/_HeaderActie.cshtml)
   en gebruiken dezelfde knopvorm.
   -------------------------------------------------------------------------- */

.bw-header-actie {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--bw-groen);
  border-radius: 999px;
  color: var(--bw-groen);
  background: transparent;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}

.bw-header-actie:hover,
.bw-header-actie:focus-visible {
  background: var(--bw-groen);
  color: #fff;
  text-decoration: none;
}

.bw-bel-icoon {
  width: 0.95em;
  height: 0.95em;
  flex: 0 0 auto;
}

/* 13. FOTOHERO ============================================================
   De hero was een zwart vlak met het gereedschapsmasker erachter. Nu draagt
   een echte foto van Barry's werk hem — "photography carries the site, Barry's
   own work, large" uit docs/brand-and-ux.md, en het eerste wat een bezoeker
   ziet is dus vakwerk in plaats van een kleurvlak.

   .bw-hero is een MODIFIER op .bw-band, geen vervanging: alle regels voor
   tekst, labels en knoppen op donker staan al in sectie 9 en blijven gelden.
   Hier komt alleen de foto bij.

   Het parallax-effect komt van background-attachment: fixed — de foto staat
   stil terwijl de herotekst eroverheen wegschuift. Bewuste keuzes daarbij:

   - ⚠️ iOS Safari negeert `fixed` en valt terug op `scroll`. Dat is geen bug
     om te repareren: je krijgt dan een gewone meescrollende fotoband, wat
     precies de rustige variant is. Niet met JavaScript "oplossen".
   - De sluier is opgebouwd met color-mix() uit --bw-band, zodat er ook hier
     geen losse hex in de CSS staat. Kent een browser color-mix() niet, dan is
     de hele background-image-declaratie ongeldig en valt hij terug op de
     effen band van background-color — exact de vorige situatie.
   - De sluier loopt van donker (links, waar de kop staat) naar lichter
     (rechts, waar het uitgelichte vlak staat en de foto mag ademen).
   -------------------------------------------------------------------------- */

.bw-hero {
  /* Het opgeleverde dak van het appartementencomplex. Dakrenovatie is de dienst
     waar Barry op gevonden moet worden (zie docs/seo-content-plan.md), dus dat
     is wat er boven de vouw hoort te staan. Wil je hier de keukenfoto terug,
     dan is dat deze regel plus de twee media queries hieronder:
     keuken-plafond-{1000,1600,2400}.webp staan er nog. */
  --bw-hero-foto: url('../img/foto/dak-opgeleverd-1460.webp');

  /* Deze sluier houdt de witte tekst boven de 4,5:1 op de lichtste plek van
     de foto. Verlaag je de dekking, meet dan opnieuw — en meet met verborgen
     tekst, anders meet je de letters in plaats van de achtergrond.
     ⚠️ Deze foto heeft een grote strook lucht, en lucht is véél lichter dan
     het plafond dat hier eerst stond: de sluier moet daarom zwaarder zijn dan
     je op het oog zou kiezen. */
  --bw-hero-sluier: linear-gradient(
      100deg,
      color-mix(in srgb, var(--bw-band) 88%, transparent) 0%,
      color-mix(in srgb, var(--bw-band) 82%, transparent) 50%,
      color-mix(in srgb, var(--bw-band) 62%, transparent) 100%);

  padding-block: clamp(2.5rem, 8vw, 5rem);
  background-color: var(--bw-band);
  background-image: var(--bw-hero-sluier), var(--bw-hero-foto);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/* Op een effen band mag de inleiding gedempt zijn; op een foto niet. Achter
   deze alinea ligt lucht, en --bw-op-donker-zacht haalt daar de 4,5:1 voor
   lopende tekst niet. Vol wit wel. Gemeten, niet geschat: zie docs/backlog.md. */
.bw-hero .bw-prose {
  color: var(--bw-op-donker);
}

/* Een kleiner scherm krijgt een kleiner bestand. 1000 px is genoeg zolang de
   foto onder een sluier ligt: hij draagt sfeer, geen detail. */
@media (max-width: 700px) {
  .bw-hero {
    --bw-hero-foto: url('../img/foto/dak-opgeleverd-1000.webp');
  }
}

/* Wie beweging heeft uitgezet, krijgt de foto gewoon meescrollend. */
@media (prefers-reduced-motion: reduce) {
  .bw-hero {
    background-attachment: scroll;
  }
}

/* 14. VOOR / NA ===========================================================
   Het sterkste dat een aannemerssite kan laten zien: dezelfde plek, twee keer.
   Bewust twee kolommen op elk schermformaat — naast elkaar is de vergelijking;
   onder elkaar is het gewoon twee foto's, en dan kun je het blok net zo goed
   weglaten. Vandaar ook een vaste verhouding: springende hoogtes maken het
   verschil moeilijker te zien dan het is.
   -------------------------------------------------------------------------- */

.bw-voor-na {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0 0 1.75rem;
}

.bw-voor-na-vak {
  position: relative;
}

.bw-voor-na-foto {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--bw-line);
  background-color: var(--bw-surface-alt);
}

/* Het label ligt op de foto en niet eronder: zo blijft het bij zijn beeld,
   ook als de twee kolommen smal worden. */
.bw-voor-na-label {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  padding: 0.35rem 0.85rem;
  background-color: var(--bw-band);
  color: var(--bw-op-donker);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* "Na" krijgt het merkgroen. Dat is de kant waar het om gaat. */
.bw-voor-na-label-na {
  background-color: var(--bw-groen);
}