/* public/css/bestuurderscheck.css — publieke bestuurderscheck (fase 3).
   Huisstijl LEAGL: Deep Purple #222035, Bright Purple #5245AD, Soft Purple #D8D3EF,
   papier #f7f6f5. Fonts self-hosted — geen font-CDN, geen externe bronnen. */

@font-face { font-family:'Mulish'; src:url('/fonts/mulish-var.woff2') format('woff2'); font-weight:200 900; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('/fonts/roboto-var.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/fonts/jetbrains-mono-var.woff2') format('woff2'); font-weight:100 800; font-display:swap; }

:root {
  --primary:#222035;        /* Deep Purple */
  --secondary:#5245ad;      /* Bright Purple */
  --zacht:#d8d3ef;          /* Soft Purple */
  --zacht-vlak:#efedf4;     /* Soft Purple, uitgewassen — sectievlakken */
  --papier:#f7f6f5;
  --grijs:#6b7280;
  --lijn:#e0ddd6;
  --wit:#ffffff;
  --diep:#1a1830;           /* donker heroveld, één stap onder Deep Purple */
  --groen:#087a2a; --groen-vlak:#effaf2; --groen-lijn:#ccebd5;
  --amber:#b7791f; --rood:#b3261e;
  --schaduw:0 18px 48px rgba(34,32,53,.10);
  --schaduw-klein:0 4px 14px rgba(34,32,53,.06);
  /* Zijmarge en breedte van het inhoudskader. De hero is een split-screen: de
     rechterhelft loopt door tot de vensterrand, dus als de linkerhelft haar tekst
     uitlijnt op een gecentreerd kader, groeit de leegte vóór die tekst mee met het
     scherm — op 2560px was dat ruim 600px, terwijl rechts niets meegaf. De marge
     groeit daarom mee tot 200px en stopt daar; elke sectie, de topnav en de
     herotekst delen ze, zodat de pagina bij élke breedte op één lijn begint. */
  --bc-kader:1600px;
  --bc-marge:clamp(40px, calc((100vw - 1280px) / 2 + 40px), 200px);
}

* { box-sizing:border-box; }
/* Kolom met een groeiende main: bij een korte pagina (wachtscherm, afmelden) hoort de
   footer onderaan het venster te plakken, niet halverwege te zweven. */
body { margin:0; min-height:100vh; display:flex; flex-direction:column;
       background:var(--papier); color:var(--primary);
       font-family:'Roboto',system-ui,sans-serif; line-height:1.6;
       -webkit-font-smoothing:antialiased; }
body > main { flex:1 0 auto; }
.bc-nav, .bc-footer { flex:none; }
/* `margin:0 auto` op de kruisas zet stretch uit, waardoor deze blokken naar hun
   contentbreedte krompen; de breedte moet dus expliciet. */
.bc-nav, .bc-footer, body > main { width:100%; }
img { max-width:100%; }
a { color:var(--secondary); }

/* ---------- Topnav ---------- */
.bc-nav { display:flex; align-items:center; gap:32px;
          padding:22px var(--bc-marge); border-bottom:1px solid var(--lijn); }
.bc-nav__logo { height:30px; width:auto; display:block; }
.bc-nav__links { display:flex; gap:28px; margin:0 auto; }
.bc-nav__links a { color:var(--primary); text-decoration:none; font-size:15px; }
.bc-nav__links a:hover { color:var(--secondary); }
.bc-nav__cta { display:inline-flex; align-items:center; gap:8px; color:var(--secondary);
               font-weight:700; font-size:15px; text-decoration:none; white-space:nowrap; }
.bc-pijl { width:14px; height:14px; flex:none; }

/* ---------- Hero ---------- */
.bc-hero { display:grid; grid-template-columns:1fr 1fr; align-items:center;
           min-height:calc(100vh - 76px); }
.bc-hero__tekst { padding:72px 48px 72px var(--bc-marge); }
/* Links uitgelijnd op de marge, niet rechts tegen de scheiding geduwd: de overblijvende
   ruimte hoort náást de tekst te vallen, waar het donkere veld ze al opvangt. */
.bc-hero__binnen { max-width:640px; }

.bc-eyebrow { display:flex; align-items:center; gap:14px; margin:0 0 26px; }
.bc-pill { display:inline-block; padding:6px 16px; border-radius:999px;
           background:var(--secondary); color:var(--wit); font-size:12px; font-weight:700;
           letter-spacing:.06em; text-transform:uppercase; }
.bc-eyebrow__label { color:var(--secondary); font-size:13px; font-weight:700;
                     letter-spacing:.09em; text-transform:uppercase; }

h1 { font-family:'Mulish',sans-serif; font-weight:800; font-size:clamp(38px,5.6vw,76px);
     line-height:1.0; letter-spacing:-.042em; margin:0 0 22px; }
h2 { font-family:'Mulish',sans-serif; font-weight:800; font-size:clamp(26px,3vw,40px);
     line-height:1.1; letter-spacing:-.03em; margin:0 0 16px; }
h3 { font-family:'Mulish',sans-serif; font-weight:700; font-size:19px; line-height:1.3;
     letter-spacing:-.01em; margin:0 0 8px; }
p.lead { font-size:18px; color:#4a4860; margin:0 0 32px; max-width:34em; }
.accent { color:var(--secondary); }

/* ---------- Formulierkaart ---------- */
.bc-kaart { background:var(--wit); border:1px solid var(--lijn); border-radius:14px;
            padding:24px; margin:0 0 20px; }
.bc-kaart--formulier { box-shadow:var(--schaduw); border-color:rgba(224,221,214,.7);
                       padding:26px 26px 24px; }
.bc-veld { margin:0 0 18px; }
.bc-veld label { display:block; font-size:14px; font-weight:700; margin:0 0 8px; }
.bc-veld input[type=text], .bc-veld input[type=email] {
  width:100%; padding:14px 16px; font-size:16px; font-family:inherit; color:var(--primary);
  border:1px solid var(--lijn); border-radius:10px; background:var(--wit); }
.bc-veld input::placeholder { color:#a8a5b4; }
.bc-veld input:focus { outline:2px solid var(--secondary); outline-offset:1px; }

/* Invoerrij met BE-prefix en de knop erin, zoals in het ontwerp. */
.bc-invoer { display:flex; align-items:center; gap:0; border:1px solid var(--lijn);
             border-radius:10px; background:var(--wit); padding:5px 5px 5px 16px; }
.bc-invoer:focus-within { outline:2px solid var(--secondary); outline-offset:1px; }
.bc-invoer__prefix { font-weight:700; font-size:16px; color:var(--primary); flex:none;
                     padding-right:10px; }
.bc-invoer input { flex:1; min-width:0; border:0; outline:0; background:transparent;
                   padding:11px 0; font-size:16px; font-family:inherit; color:var(--primary); }
.bc-invoer input:focus { outline:0; }

.bc-consent { display:flex; gap:10px; align-items:flex-start; font-size:13px;
              color:var(--grijs); margin:0 0 12px; }
.bc-consent input { margin-top:3px; accent-color:var(--secondary); flex:none; }

.bc-knop { display:inline-flex; align-items:center; justify-content:center; gap:10px;
           padding:14px 26px; border:0; border-radius:10px;
           background:var(--secondary); color:var(--wit); font-size:15px; font-weight:700;
           font-family:inherit; line-height:1.2; cursor:pointer; text-decoration:none;
           transition:background .18s ease; }
.bc-knop:hover { background:var(--primary); }
.bc-knop:disabled { opacity:.55; cursor:default; }
.bc-knop--breed { width:100%; }
.bc-knop--licht { background:var(--wit); color:var(--primary); border:1px solid var(--lijn); }
.bc-knop--licht:hover { background:var(--papier); }

.bc-fout { color:var(--rood); font-size:14px; margin:12px 0 0; }
.bc-ok { color:var(--groen); font-size:14px; margin:12px 0 0; }

/* ---------- Bewijs-chips ---------- */
.bc-chips { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0; padding:0; list-style:none; }
.bc-chip { display:inline-flex; align-items:center; gap:7px; padding:7px 13px;
           border-radius:999px; background:var(--groen-vlak); border:1px solid var(--groen-lijn);
           color:var(--groen); font-size:12px; font-weight:700; }
.bc-vink { width:15px; height:15px; flex:none; }

/* ---------- Donker heroveld ---------- */
.bc-hero__visueel { position:relative; align-self:stretch; overflow:hidden;
                    background:radial-gradient(120% 100% at 70% 20%, #2b2850 0%, var(--diep) 62%);
                    display:flex; align-items:center; justify-content:center; padding:64px 48px; }
/* Concentrische ring als textuur — laag contrast, nooit dominant. */
.bc-hero__visueel::before { content:''; position:absolute; inset:-30% -10%;
  background:radial-gradient(circle at 50% 45%, transparent 0 38%, rgba(216,211,239,.07) 38.4% 38.8%, transparent 39.2%),
             radial-gradient(circle at 50% 45%, transparent 0 50%, rgba(216,211,239,.05) 50.4% 50.8%, transparent 51.2%);
  pointer-events:none; }

.bc-toon { position:relative; width:100%; max-width:520px; background:var(--wit);
           border-radius:16px; box-shadow:0 30px 70px rgba(0,0,0,.35);
           transform:rotate(-1.4deg); overflow:hidden; }
.bc-toon__kop { display:flex; align-items:center; gap:12px; padding:18px 20px;
                border-bottom:1px solid var(--lijn); }
.bc-toon__merk { width:38px; height:38px; border-radius:10px; background:var(--secondary);
                 color:var(--wit); display:flex; align-items:center; justify-content:center;
                 font-family:'Mulish',sans-serif; font-weight:800; font-size:17px; flex:none; }
.bc-toon__titel { font-weight:700; font-size:15px; }
.bc-toon__body { padding:22px 20px 24px; }
.bc-toon__kopje { font-size:22px; margin:0 0 16px; }
.bc-toon__stempel { margin-left:auto; padding:6px 12px; border-radius:999px;
                    background:var(--groen-vlak); border:1px solid var(--groen-lijn);
                    color:var(--groen); font-size:11px; font-weight:700; }
.bc-toon__blok { display:flex; gap:12px; align-items:flex-start; padding:14px 16px;
                 border-radius:12px; background:var(--groen-vlak); border:1px solid var(--groen-lijn);
                 margin:0 0 16px; }
.bc-toon__bronnen { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bc-bron { display:flex; gap:10px; align-items:center; padding:12px 14px; border-radius:12px;
           border:1px solid var(--lijn); background:var(--papier); }
.bc-bron__merk { width:30px; height:30px; border-radius:8px; flex:none; display:flex;
                 align-items:center; justify-content:center; font-family:'Mulish',sans-serif;
                 font-weight:800; font-size:13px; }
.bc-bron__merk--kbo { background:var(--zacht); color:var(--secondary); }
.bc-bron__merk--bs { background:#f4ead8; color:#8a6a24; }

/* ---------- Contentsecties ---------- */
/* Niet gecentreerd op een eigen kader maar links uitgelijnd op dezelfde marge als de
   topnav en de herotekst, zodat de hele pagina op één lijn begint. De inhoud zelf
   blijft op --bc-kader begrensd; op een ultrabreed scherm valt de rest weg aan de
   rechterzijde in plaats van als een gat vóór de tekst. */
.bc-sectie { padding:104px var(--bc-marge); }
.bc-sectie--vlak { background:var(--zacht-vlak); }
.bc-sectie > *, .bc-sectie--vlak > .bc-binnen { max-width:var(--bc-kader); }
.bc-label { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em;
            text-transform:uppercase; color:var(--secondary); font-weight:700;
            display:block; margin:0 0 14px; }
.bc-raster3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:44px 0 0; }
.bc-stap { background:var(--wit); border:1px solid var(--lijn); border-radius:14px;
           padding:26px 24px; box-shadow:var(--schaduw-klein); }
.bc-stap__nr { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700;
               color:#c6c3ce; display:block; margin:0 0 14px; }
.bc-stap p { margin:0; font-size:15px; color:#4a4860; }

/* Kaart met een vinkbol boven de titel — gebruikt in "Waarom controleren?". */
.bc-stap--vink { padding-top:22px; }
.bc-vinkbol { display:block; color:var(--groen); margin:0 0 12px; }
.bc-stap--vink .bc-vink { width:22px; height:22px; }

/* ---------- FAQ ---------- */
/* details/summary i.p.v. een JS-accordeon: de CSP verbiedt inline handlers en dit
   werkt ook zonder JavaScript. De marker komt uit ::after, want de standaard
   driehoek is per browser anders. */
.bc-faq { margin:44px 0 0; }
.bc-vraag { background:var(--wit); border:1px solid var(--lijn); border-radius:14px;
            box-shadow:var(--schaduw-klein); margin:0 0 14px; }
.bc-vraag:last-child { margin-bottom:0; }
.bc-vraag > summary { display:flex; align-items:center; gap:16px; cursor:pointer;
                      padding:20px 24px; font-family:'Mulish',sans-serif; font-weight:700;
                      font-size:18px; letter-spacing:-.01em; list-style:none; }
.bc-vraag > summary::-webkit-details-marker { display:none; }
.bc-vraag > summary::after { content:'+'; margin-left:auto; flex:none; width:28px; height:28px;
                             border-radius:50%; background:var(--zacht-vlak); color:var(--secondary);
                             font-family:'Roboto',sans-serif; font-size:19px; font-weight:400;
                             line-height:26px; text-align:center;
                             transition:transform .18s ease, background .18s ease; }
.bc-vraag[open] > summary::after { content:'+'; transform:rotate(45deg); background:var(--zacht); }
.bc-vraag > summary:focus-visible { outline:2px solid var(--secondary); outline-offset:-2px;
                                    border-radius:14px; }
.bc-vraag > p { margin:0; padding:0 60px 22px 24px; font-size:15px; color:#4a4860; }

/* ---------- Slot-CTA ---------- */
.bc-slot { background:radial-gradient(120% 140% at 20% 10%, #2b2850 0%, var(--diep) 60%);
           color:var(--wit); }
.bc-slot__binnen { padding:96px var(--bc-marge); }
.bc-slot__binnen > * { max-width:var(--bc-kader); }
.bc-slot h2 { margin:0 0 32px; }
.bc-label--licht { color:var(--zacht); }
.bc-knop--slot { background:var(--wit); color:var(--primary); }
.bc-knop--slot:hover { background:var(--zacht); color:var(--primary); }

/* ---------- Wachtscherm ---------- */
/* Deze <ul> draagt óók .bc-kaart. Hier bewust GEEN padding zetten: elke waarde
   overschrijft de 24px van de kaart, want deze regel staat later in het bestand.
   Dat zette de bolletjes tegen de rand — en de actieve bol steekt met zijn ring
   van 5px zelfs buiten het kader. De inspringing van de browser is al weg door
   de padding van .bc-kaart; list-style haalt de opsommingstekens weg. */
.bc-stappen { list-style:none; margin:0; }
.bc-stappen li { display:flex; gap:14px; align-items:center; padding:12px 0;
                 color:var(--grijs); font-size:15px; }
.bc-stappen li.actief { color:var(--primary); font-weight:700; }
.bc-stappen li.klaar { color:var(--groen); }
.bc-bol { width:11px; height:11px; border-radius:50%; background:var(--lijn); flex:none; }
.bc-stappen li.actief .bc-bol { background:var(--secondary);
  box-shadow:0 0 0 5px rgba(82,69,173,.15); }
.bc-stappen li.klaar .bc-bol { background:var(--groen); }

/* ---------- Resultaat ---------- */
.bc-badge { display:inline-block; padding:5px 14px; border-radius:999px; font-size:12px;
            font-weight:700; font-family:'JetBrains Mono',monospace; text-transform:uppercase;
            letter-spacing:.06em; }
.bc-badge--verified { background:var(--groen-vlak); color:var(--groen); }
.bc-badge--review_required { background:#fdf1dd; color:var(--amber); }
.bc-badge--inconclusive { background:#f1f0ee; color:var(--grijs); }
.bc-badge--source_unavailable { background:#fbe9e7; color:var(--rood); }

.bc-citaat { background:var(--papier); border:1px solid var(--lijn); border-radius:10px;
             padding:14px 16px; font-size:13px; color:var(--grijs); font-style:italic;
             margin:14px 0 10px; }
.bc-tabel { width:100%; border-collapse:collapse; font-size:14px; }
.bc-tabel th { text-align:left; font-family:'JetBrains Mono',monospace; font-size:11px;
               letter-spacing:.08em; text-transform:uppercase; color:var(--grijs);
               border-bottom:1px solid var(--lijn); padding:8px 8px 10px 0; }
.bc-tabel td { border-bottom:1px solid var(--lijn); padding:12px 8px 12px 0; vertical-align:top; }
.bc-tabel tr:last-child td { border-bottom:0; }
.bc-meta { font-size:12px; color:var(--grijs); }
/* Een gat in de namenlijst hoort op te vallen, niet als voetnoot weg te zakken. */
.bc-onvolledig { font-size:13px; color:var(--amber); background:#fdf8ec;
                 border-left:3px solid var(--amber); padding:10px 14px; margin:10px 0 0;
                 border-radius:0 8px 8px 0; }
/* De namen zijn het antwoord; de statutaire zin staat eronder als onderbouwing. */
.bc-namen--groot li { font-size:17px; font-weight:700; }
.bc-antwoord__punt .eis { font-size:13px; color:var(--grijs); margin:6px 0 0; }

/* Juridische onderbouwing achter één klik. De ondernemer wil weten wie mag
   tekenen; de tekenregels met hun citaten en de bronlijst zijn het bewijs
   daarachter, geen leesvoer vooraf. */
.bc-achtergrond { margin:18px 0 0; border:1px solid var(--lijn); border-radius:14px;
                  background:#fff; }
.bc-achtergrond > summary { cursor:pointer; padding:18px 24px; font-weight:700;
                            font-size:15px; list-style:none; display:flex;
                            flex-direction:column; gap:2px; }
.bc-achtergrond > summary::-webkit-details-marker { display:none; }
.bc-achtergrond > summary::after { content:'Tonen'; position:absolute; right:24px;
                                   font-size:12px; font-weight:600; color:var(--paars); }
.bc-achtergrond[open] > summary::after { content:'Verbergen'; }
.bc-achtergrond > summary { position:relative; }
.bc-achtergrond > summary .bc-meta { font-weight:400; }
.bc-achtergrond__inhoud { padding:0 24px 24px; display:grid; gap:18px; }

/* Op papier hoort het rapport volledig te zijn, ook wat op het scherm dichtgeklapt is. */
@media print {
  .bc-achtergrond__inhoud { display:block !important; }
  .bc-achtergrond > summary { display:none; }
}

/* Tak van een artikel die zich hier niet voordoet: blijft leesbaar, maar treedt
   naar achteren zodat ze niet als geldende tekenregel oogt. */
.bc-regel--nvt { opacity:.72; }
.bc-voorwaarde { font-size:13px; color:var(--grijs); background:#f4f3f7;
                 border-left:3px solid var(--lijn); padding:10px 14px; margin:10px 0 0;
                 border-radius:0 8px 8px 0; }

.bc-disclaimer { font-size:12px; color:var(--grijs); border-top:1px solid var(--lijn);
                 padding-top:18px; margin-top:36px; }
.bc-verborgen { display:none; }

/* Smalle kolom voor resultaat- en afmeldpagina. */
.bc-wrap { max-width:820px; margin:0 auto; padding:56px 40px 96px; }
.bc-wrap h1 { font-size:clamp(30px,4vw,46px); }
.bc-wrap h2 { font-size:clamp(21px,2.4vw,27px); margin:40px 0 14px; }
.bc-wrap h2.eerste { margin-top:26px; }
.bc-kop { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 4px; }

/* ---------- Rapportlayout (resultaatpagina) ----------
   Brede rapportkolom op een uitgewassen vlak, met de conclusie als hoofdkaart
   naast een controlestrook, daaronder de tekenregels en pas dan het detail
   (functiehouders en bronnen). Bewust breder dan `.bc-wrap`: het resultaat is
   een dossierstuk met naast elkaar leesbare blokken, geen lopende tekst. */
.bc-rapport { background:var(--zacht-vlak); }
.bc-rapport__binnen { max-width:1180px; margin:0 auto; padding:48px 40px 88px; }
/* Het wachtscherm blijft een smalle leeskolom. */
.bc-rapport__smal { max-width:720px; }
.bc-rapport h1 { font-size:clamp(30px,3.6vw,48px); margin:0 0 8px; }
.bc-printlogo { display:none; }

/* Statusstrook bovenaan: één zin die zegt hoe hard dit rapport is. */
.bc-strip { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
            padding:13px 18px; border-radius:10px; margin:0 0 22px; font-size:14px;
            background:#e4e0f3; border:1px solid #cac3e8; color:#514876; }
.bc-strip strong { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
                   letter-spacing:.09em; text-transform:uppercase; flex:none; }
.bc-strip--verified { background:var(--groen-vlak); border-color:var(--groen-lijn); color:#2c5f3c; }
.bc-strip--verified strong { color:var(--groen); }
.bc-strip--review_required { background:#fdf8ec; border-color:#f0e0bd; color:#7a5a18; }
.bc-strip--review_required strong { color:var(--amber); }
.bc-strip--source_unavailable { background:#fbe9e7; border-color:#f3ccc7; color:#8a3229; }
.bc-strip--source_unavailable strong { color:var(--rood); }

.bc-rapportkop { display:flex; align-items:flex-end; justify-content:space-between;
                 gap:28px; margin:0 0 22px; }
.bc-rapportkop__meta { margin:0; color:var(--grijs); font-size:16px; }
.bc-rapportkop__acties { display:flex; align-items:center; gap:12px; flex:none; }

.bc-raster-resultaat { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.8fr);
                       gap:18px; align-items:start; }
.bc-raster-detail { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:18px 0 0; }
.bc-rapport .bc-kaart { margin:0; }

.bc-conclusie { padding:30px; }
.bc-conclusie__kop { display:flex; gap:16px; align-items:flex-start; }
.bc-conclusie__kop h2 { margin:0; font-size:clamp(21px,2.2vw,26px); }
.bc-conclusie__kop .bc-label { margin:0 0 6px; }
.bc-zegel { flex:none; width:48px; height:48px; border-radius:12px; display:flex;
            align-items:center; justify-content:center;
            background:var(--groen-vlak); border:1px solid var(--groen-lijn); color:var(--groen); }
.bc-zegel--twijfel { background:#fdf8ec; border-color:#f0e0bd; color:var(--amber); }
.bc-zegel svg { width:22px; height:22px; }
.bc-conclusie__tekst { font-size:17px; line-height:1.7; color:#4a4860; margin:22px 0 0;
                       max-width:44em; }
/* Staat het antwoord er, dan zakt de statuszin naar bijschrift: die bevestigt
   het proces, het blok erboven beantwoordt de vraag. */
.bc-antwoord + .bc-conclusie__tekst { font-size:14px; margin-top:14px; color:var(--grijs); }

/* ---------- Het antwoord ----------
   Wat de bezoeker kwam halen: de eis uit de akte met de namen die de KBO
   vandaag geeft. Bewust vóór de statusuitleg en in de grootste letter van de
   kaart — de vorige opzet begroef dit onder een procesbevestiging. */
.bc-antwoord { margin:22px 0 0; }
.bc-antwoord__punt { padding:16px 18px; border-radius:12px; background:var(--zacht-vlak);
                     border:1px solid #e1ddef; margin:0 0 10px; }
.bc-antwoord__punt:last-child { margin-bottom:0; }
.bc-antwoord .eis { font-family:'Mulish',sans-serif; font-size:18px; font-weight:700;
                    letter-spacing:-.01em; line-height:1.4; margin:0; }
.bc-antwoord .bc-namen { margin-top:12px; }
.bc-antwoord .bc-namen li { background:var(--wit); font-size:15px; padding:7px 14px; }

.bc-betrouwbaar { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
                  margin:22px 0 0; padding:14px 0 0; border-top:1px solid var(--lijn);
                  font-size:14px; }
.bc-betrouwbaar > span { color:var(--grijs); }
.bc-betrouwbaar strong { font-size:14px; }
.bc-balk { display:flex; gap:3px; }
.bc-balk i { width:28px; height:5px; border-radius:99px; background:#d5d2dc; }
.bc-balk--3 i { background:var(--groen); }
.bc-balk--2 i:nth-child(-n+2) { background:var(--amber); }
.bc-balk--1 i:nth-child(1) { background:var(--rood); }
.bc-betrouwbaar--3 strong { color:var(--groen); }
.bc-betrouwbaar--2 strong { color:var(--amber); }
.bc-betrouwbaar--1 strong { color:var(--rood); }

.bc-caveat { margin:16px 0 0; padding:15px 17px; border-radius:10px;
             background:#fdf8ec; border:1px solid #f0e0bd; }
.bc-caveat strong { color:#8a6a24; font-size:14px; display:block; margin:0 0 4px; }
.bc-caveat p { margin:0; color:#73643e; font-size:13px; line-height:1.65; }

.bc-samenvatting { padding:26px 24px; }
.bc-samenvatting dl { margin:14px 0 0; }
.bc-samenvatting dl > div { display:flex; justify-content:space-between; gap:14px;
                            padding:12px 0; border-bottom:1px solid var(--lijn); }
.bc-samenvatting dl > div:last-child { border-bottom:0; padding-bottom:0; }
.bc-samenvatting dt { margin:0; color:var(--grijs); font-size:14px; }
.bc-samenvatting dd { margin:0; font-size:14px; font-weight:700; text-align:right; }
.bc-samenvatting dd.ok { color:var(--groen); }
.bc-samenvatting dd.let-op { color:var(--amber); }

.bc-kaart__kop { display:flex; align-items:flex-start; justify-content:space-between;
                 gap:18px; margin:0 0 18px; }
.bc-kaart__kop h2 { margin:0; font-size:clamp(19px,2vw,23px); }
.bc-kaart__kop .bc-label { margin:0 0 6px; }
.bc-telling { flex:none; padding:6px 12px; border-radius:999px; background:var(--zacht-vlak);
              color:var(--secondary); font-size:12px; font-weight:700; }

/* Tekenregels naast elkaar: elke regel is een afgesloten tegel met eis, namen,
   citaat en vindplaats — zo staat het bewijs bij de bewering. */
.bc-tekenkaart { margin-top:18px !important; padding:28px; }
.bc-regels { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; }
.bc-regel { padding:18px; border-radius:12px; background:#f8f7fb; border:1px solid #e3e0ea; }
.bc-regel .scope { display:block; margin:0 0 7px; color:var(--secondary); font-size:11px;
                   font-weight:700; letter-spacing:.09em; text-transform:uppercase;
                   font-family:'JetBrains Mono',monospace; }
.bc-regel .eis { font-family:'Mulish',sans-serif; font-size:17px; font-weight:700;
                 letter-spacing:-.01em; line-height:1.45; margin:0; }
.bc-namen { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 0; padding:0; list-style:none; }
.bc-namen li { display:inline-flex; align-items:center; gap:7px; padding:6px 12px;
               border-radius:999px; background:var(--wit); border:1px solid var(--lijn);
               font-size:14px; font-weight:600; }
.bc-regel .bc-citaat { background:var(--wit); }

/* De handelingscategorie boven een regel. Alleen zichtbaar bij een bijzondere
   bepaling: bij de algemene regel laat de template dit weg, zodat er geen
   indeling gesuggereerd wordt waar de statuten er geen maken. */
.bc-handeling { display:inline-block; margin:0 0 9px; padding:4px 11px; border-radius:999px;
                background:var(--wit); border:1px solid var(--lijn); font-size:11px;
                font-weight:700; letter-spacing:.06em; text-transform:uppercase;
                font-family:'JetBrains Mono',monospace; color:var(--primary); }

/* Bevindingen over de bezetting van het orgaan. Blokkerend krijgt de amberrand
   die elders al voor een onvolledige uitkomst staat; een vacature blijft neutraal,
   want die maakt geen enkele handtekening ongeldig. */
.bc-bezetting { display:flex; flex-direction:column; gap:12px; }
.bc-bevinding { padding:16px 18px; border-radius:12px; background:#f8f7fb;
                border:1px solid #e3e0ea; border-left:3px solid var(--lijn); }
.bc-bevinding--blokkerend { background:#fdf8ec; border-left-color:var(--amber); }
.bc-bevinding p { margin:6px 0 0; font-size:15px; line-height:1.6; }
.bc-bevinding blockquote { margin:10px 0 0; padding:10px 14px; background:var(--wit);
                           border:1px solid var(--lijn); border-radius:10px;
                           font-size:13px; font-style:italic; line-height:1.6; }
.bc-regel blockquote { margin:12px 0 0; padding:10px 14px; background:var(--wit);
                       border:1px solid var(--lijn); border-radius:10px;
                       font-size:13px; font-style:italic; line-height:1.6; }

/* Functiehouders als rijen met initialen — leest sneller dan een tabel. */
.bc-persoon { display:flex; align-items:center; gap:12px; padding:12px 0;
              border-top:1px solid var(--lijn); }
.bc-persoon:first-of-type { border-top:0; padding-top:0; }
.bc-persoon__tekst { flex:1; min-width:0; }
.bc-persoon strong { display:block; font-size:15px; }
.bc-persoon .bc-meta { display:block; }
.bc-avatar { flex:none; width:36px; height:36px; border-radius:10px; display:flex;
             align-items:center; justify-content:center; font-family:'Mulish',sans-serif;
             font-weight:800; font-size:13px; background:var(--zacht); color:var(--secondary); }
.bc-avatar--rp { background:#f4ead8; color:#8a6a24; }

.bc-bronrij { display:flex; align-items:center; gap:12px; padding:12px 0;
              border-top:1px solid var(--lijn); text-decoration:none; color:inherit; }
.bc-bronrij:first-of-type { border-top:0; padding-top:0; }
.bc-bronrij:hover strong { color:var(--secondary); }
.bc-bronrij__tekst { flex:1; min-width:0; }
.bc-bronrij strong { display:block; font-size:15px; }
.bc-bronicoon { flex:none; width:36px; height:36px; border-radius:10px; display:flex;
                align-items:center; justify-content:center; font-family:'Mulish',sans-serif;
                font-weight:800; font-size:14px; background:var(--zacht-vlak);
                color:var(--secondary); border:1px solid #e1ddef; }
.bc-bronrij__pijl { flex:none; color:var(--secondary); font-size:14px; }

.bc-cta { margin-top:18px !important; padding:28px; }
.bc-cta h2 { margin:0 0 10px; font-size:clamp(19px,2vw,23px); }
.bc-cta p { margin:0 0 18px; color:#4a4860; }
.bc-cta p:last-child { margin:0; }

/* ---------- Footer ---------- */
.bc-footer { background:var(--primary); color:var(--wit); }
.bc-footer__binnen { padding:56px var(--bc-marge);
                     display:flex; gap:32px; align-items:flex-end; flex-wrap:wrap; }
.bc-footer__tagline { font-family:'Mulish',sans-serif; font-weight:800;
                      font-size:clamp(22px,2.6vw,32px); line-height:1.1;
                      letter-spacing:-.03em; margin:0; }
.bc-footer__links { display:flex; gap:24px; }
.bc-footer__links a { color:var(--zacht); text-decoration:none; font-size:14px; }
.bc-footer__links a:hover { text-decoration:underline; }
.bc-footer__rechts { margin-left:auto; text-align:right; font-size:13px; color:#b6b3c6;
                     line-height:1.9; }
.bc-footer__rechts a { color:var(--zacht); }

/* ---------- Mobiel ---------- */
@media (max-width:900px) {
  .bc-nav { padding:16px 20px; gap:16px; }
  /* Zonder de ankerlinks valt hun `margin:0 auto` weg en zou de CTA tegen het logo
     plakken. */
  .bc-nav__links { display:none; }
  .bc-nav__cta { margin-left:auto; }
  .bc-nav__logo { height:26px; }
  .bc-hero { grid-template-columns:1fr; min-height:0; }
  .bc-hero__tekst { padding:44px 20px 40px; }
  .bc-hero__binnen { max-width:none; }
  .bc-hero__visueel { padding:44px 20px 52px; }
  .bc-toon { transform:none; max-width:none; }
  .bc-sectie { padding:64px 20px; }
  .bc-raster3 { grid-template-columns:1fr; gap:16px; margin-top:32px; }
  .bc-wrap { padding:36px 20px 64px; }
  .bc-footer__binnen { padding:40px 20px; }
  .bc-footer__links { flex-wrap:wrap; gap:16px 24px; }
  .bc-footer__rechts { margin-left:0; text-align:left; }
  .bc-slot__binnen { padding:64px 20px; }
  .bc-vraag > summary { padding:16px 18px; font-size:16px; gap:12px; }
  .bc-vraag > p { padding:0 18px 18px; }
  .bc-rapport__binnen { padding:32px 20px 64px; }
  .bc-raster-resultaat, .bc-raster-detail, .bc-regels { grid-template-columns:1fr; }
  .bc-rapportkop { flex-direction:column; align-items:flex-start; gap:16px; }
  .bc-conclusie, .bc-tekenkaart, .bc-cta { padding:22px 20px; }
}
@media (max-width:560px) {
  p.lead { font-size:16px; }
  .bc-toon__bronnen { grid-template-columns:1fr; }
  .bc-invoer { padding:4px 4px 4px 14px; }
  .bc-conclusie__kop { gap:12px; }
  .bc-zegel { width:40px; height:40px; }
  /* Op een telefoon past "1 augustus 2026 om 11:12" niet naast zijn label; naast
     elkaar houden levert een waarde over twee regels op die rechts uitlijnt en
     dan onleesbaar wordt. */
  .bc-samenvatting dl > div { flex-direction:column; gap:2px; }
  .bc-samenvatting dd { text-align:left; }
  .bc-rapportkop__acties { flex-wrap:wrap; }
}

/* ---------- Afdruk ----------
   Het rapport is een dossierstuk: navigatie, knoppen en de wachtsectie horen
   niet op papier, het logo wél. */
@media print {
  .bc-nav, .bc-footer, .bc-rapportkop__acties, .bc-cta, #bc-bezig { display:none !important; }
  body { background:var(--wit); }
  .bc-rapport { background:var(--wit); }
  .bc-rapport__binnen { max-width:none; padding:0; }
  .bc-printlogo { display:block; height:28px; width:auto; margin:0 0 22px; }
  .bc-kaart, .bc-regel { box-shadow:none; break-inside:avoid; }
  .bc-raster-resultaat, .bc-raster-detail { grid-template-columns:1fr; }
  .bc-regels { grid-template-columns:1fr 1fr; }
  a { color:var(--primary); }
}