print
anders als kaal kopje. */
#aannames-container .aannames-blok > :not(summary) { display: block !important; }
/* De 'Uw eigen antwoorden'-groep is op het SCHERM verborgen (staat daar
in het 💬-paneel, dat niet print) — maar hoort WÉL in de PDF, want
.dashboard-rechts print niet. §10/§10c: elk oordeel-dragend feit
meeprint. Deze regel maakt de scherm-verborgen groep print-zichtbaar. */
#aannames-container .aannames-groep-antwoord { display: block !important; }
#aannames-container .aannames-blok { page-break-inside: avoid; border: 1px solid #cbd5e1; }
#aannames-container .aannames-tabel td { border-bottom: 1px solid #cbd5e1; }
/* §10b: de correctie-knop is een scherm-actie. Op papier is 'Klopt niet?'
een dode knop die alleen de kolom vult; de aanname zelf (en dus het
loket-gesprek) blijft gewoon staan. */
#aannames-container .aanname-actie { display: none !important; }
details summary { font-weight: 600; }
/* FIX HOOG-PRINT-CONCLUSIE-TABEL-LAYOUT-GESTAPELD: een 4-koloms
table-layout:fixed perste de lange Toelichting in 25% (krappe,
rafelige kolom) terwijl Status 25% verspilde. Render de conclusie
als gestapelde blokken: Activiteit als kop + Status-badge,
daaronder Toelichting en Grondslag op VOLLE breedte met labels. */
.conclusie-tabel thead { display: none; }
.conclusie-tabel, .conclusie-tabel tbody, .conclusie-tabel tr, .conclusie-tabel td { display: block; width: 100% !important; }
.conclusie-tabel tr { border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; margin: 0 0 10px; page-break-inside: avoid; }
.conclusie-tabel td { border: none !important; padding: 3px 0; font-size: 13px; white-space: normal; word-break: break-word; }
.conclusie-tabel td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.conclusie-tabel td[data-label="Activiteit"] { font-size: 15px; font-weight: 700; color: #002C64; }
.conclusie-tabel td[data-label="Activiteit"]::before, .conclusie-tabel td[data-label="Status"]::before { display: none; }
.print-only { display: block !important; } /* print-header tonen */
}
.print-only { display: none; } /* buiten print verborgen */
.btn-optie {
display: block; width: 100%; padding: 12px 16px; margin-bottom: 8px;
background: white; color: var(--ink); border: 2px solid var(--border);
border-radius: 10px; font-size: 14px; text-align: left; cursor: pointer;
transition: all .15s;
}
.btn-optie:hover { border-color: var(--vng-light); background: var(--bg-soft); }
.btn-optie:disabled { opacity: .5; cursor: not-allowed; }
.getal-input { display: flex; gap: 10px; align-items: center; }
.getal-input input { width: 160px; }
/* FIX VIS-1-STRAY-GETALVELD (Grader 2026-06-12): voorkom dat een stray
buiten de .getal-input-wrapper visueel boven
keuzeknoppen verschijnt. Stand-alone number-inputs verbergen tenzij
expliciet in een .getal-input-wrapper. */
#vraagblok > input[type="number"]:not(.getal-input input),
.vraag-card > input[type="number"]:not(.getal-input input) { display: none !important; }
/* tabel */
.conclusie-tabel { width: 100%; border-collapse: collapse; margin-top: 8px; }
.conclusie-tabel th {
background: var(--vng-dark); color: white; padding: 10px 12px; text-align: left; font-size: 12px;
text-transform: uppercase; letter-spacing: .05em;
}
.conclusie-tabel td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: top; }
.conclusie-tabel tr:last-child td { border-bottom: none; }
/* FIX T-MOB-1 (+ tweelingbroer van HOOG-PRINT-CONCLUSIE-TABEL-LAYOUT-
GESTAPELD): op smal scherm perst de 4-koloms tabel de Toelichting weg.
Render als gestapelde blokken, identiek aan @media print. */
@media (max-width: 600px) {
.conclusie-tabel thead { display: none; }
.conclusie-tabel, .conclusie-tabel tbody, .conclusie-tabel tr, .conclusie-tabel td { display: block; width: 100% !important; }
.conclusie-tabel tr { border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin: 0 0 10px; }
.conclusie-tabel td { border: none !important; padding: 3px 0; }
.conclusie-tabel td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
.conclusie-tabel td[data-label="Activiteit"] { font-size: 15px; font-weight: 700; color: var(--vng-dark); }
.conclusie-tabel td[data-label="Activiteit"]::before, .conclusie-tabel td[data-label="Status"]::before { display: none; }
}
.status-badge {
display: inline-block; padding: 3px 10px; border-radius: 12px;
font-size: 11px; font-weight: 700; text-transform: uppercase;
}
/* FIX KLEURSEMANTIEK-RESULTATEN (ISO 3864 + WCAG, Cowork-oordeel 2026-07-23): een
omgevingsvergunning is juridisch 'toegestaan mits vergund', geen verbod -> rood is
vals-ontmoedigend (spiegel van vals-geruststellend). Tier 2 = sterk amber/oranjebruin
(NIET lichtrood, dat houdt het in de gevaar-familie); rood blijft UITSLUITEND op
.status-niet_toegestaan (tier 1). Contrast geverifieerd: #7c2d12 op #fff4e6 = 8.63:1. */
.status-vergunning { background: #fff4e6; color: #7c2d12; }
/* Tier 3 = melding/informatieplicht: lichter geel/amber met donkere tekst (geel-op-wit is de
WCAG-valkuil). Contrast #854d0e op #fef9c3 = 6.38:1. */
.status-melding { background: #fef9c3; color: #854d0e; }
/* FIX HOOG-STATUS-INFORMATIEPLICHT-ZONDER-CSS-LABEL-RANG (audit ronde 19): de status
'informatieplicht' (harde termijnplicht, o.a. Bal art. 3.207 — aanleveren >= 4 weken
vóór aanvang) wordt wél uitgezonden (regelkennis.py bepaal_mba_agrarisch_plant) maar
stond in GEEN van de vier kaarten: geen CSS -> kale chip zonder kleur, geen label ->
rauwe enum in kapitalen, geen rang -> gesorteerd ONDER 'onbekend'. Zelfde defectklasse
als de voorbehoud-fix verderop. Tier 3 samen met melding, zie de comment hierboven. */
.status-informatieplicht { background: #fef9c3; color: #854d0e; }
.status-vergunningvrij { background: #e8f5e9; color: var(--green); }
/* STATUS-OMSLAG (2026-07-08): 'waarschijnlijk vergunningvrij' — lime/geel-tint,
visueel tussen kaal groen (vrij) en blauw (nader onderzoek); niet met kaal
groen te verwarren zodat de burger de reële-maar-klein-risico-nuance ziet. */
/* was #827717 = 4,01:1; #6b6212 = 5,45:1 (audit ronde 19, WCAG 1.4.3) */
.status-vergunningvrij_mits_lokaal { background: #f0f4c3; color: #6b6212; }
.status-niet_van_toepassing { background: #f3e5f5; color: #7b1fa2; }
.status-nader_onderzoek { background: #e3f2fd; color: #1565c0; }
/* .status-laag_risico geschrapt 2026-08-03 (HOOG-STATUS-ENUM-DRIFT): fantoom-status,
0 emitters in de hele .py-boom — hij bestond alleen als CSS-klasse, label en rang. */
.status-niet_toegestaan { background: #ffcdd2; color: #b71c1c; }
/* was var(--orange) #e65100 = 3,46:1; #b34700 = 5,02:1. Bewust een lokale override i.p.v. de
variabele wijzigen: --orange dient elders als ACHTERGROND met witte tekst. */
.status-waarschuwing { background: #fff3e0; color: #b34700; }
/* FIX WCAG-1.4.3-CONTRAST-UITKOMSTBADGES (audit ronde 19): #f57f17 op #fff8e1 was 2,49:1 —
ruim onder de AA-drempel 4,5:1, en juist op de badges die het juridische oordeel dragen.
#8a5000 op #fff8e1 = 6,12:1, zelfde amber-familie. */
.status-aandachtspunt { background: #fff8e1; color: #8a5000; }
.status-voldoet { background: #e8f5e9; color: var(--green); }
/* was #757575 = 4,23:1; #616161 = 5,68:1 (audit ronde 19, WCAG 1.4.3) */
.status-onbekend { background: #f5f5f5; color: #616161; }
.status-informatie { background: #e3f2fd; color: #1565c0; }
/* FIX HOOG-STATUSBADGE-ZONDER-CSS-VOORBEHOUD-VISUEEL-STILST-KLASSE (Grader-meting
2026-08-01): voorbehoud (38 emissieplekken), buiten_scope en samenvatting werden
uitgezonden zonder eigen CSS-regel en vielen terug op de kale .status-badge -> geen
achtergrondkleur. Juist de rij die zegt "wij konden dit niet vaststellen" was daardoor
visueel de RUSTIGSTE van de pagina, terwijl elke andere rij een sturende kleur kreeg:
vals-geruststelling via vormgeving (anker vals-geruststellend = 0).
VOORBEHOUD = onopgeloste twijfel, GEEN lopend onderzoek en GEEN geruststelling. Daarom
bewust BUITEN de groene familie (#e8f5e9) en buiten het nader_onderzoek-blauw (#e3f2fd):
een warm-neutrale taupe met een DASHED rand — de streepjesrand leest als 'nog niet rond'
en trekt de scannende blik. Contrast geverifieerd (WCAG): #4e342e op #ece3d8 = 8.92:1. */
.status-voorbehoud { background: #ece3d8; color: #4e342e; border: 1px dashed #8d6e63; }
/* buiten_scope = valt buiten de vergunningcheck; neutraal blauwgrijs, geen oordeel.
Contrast #37474f op #eceff1 = 8.35:1. */
.status-buiten_scope { background: #eceff1; color: #37474f; }
/* samenvatting = kop-/rollup-rij, geen statusoordeel. Donkere chip zodat hij als kader
leest en niet als een van de kleur-tiers. Contrast #ffffff op #455a64 = 7.24:1. */
.status-samenvatting { background: #455a64; color: #ffffff; }
/* FIX HOOG-NVT-STATUS-ONZICHTBAAR-VOOR-ZEEF (2026-09-09, FILING 411). Vierde
instantie van de kale-badge-klasse hierboven, en de grootste: op een terminale
pagina zet markeer_terminaal_onderdrukt 19 van de 24 rijen op status 'n.v.t.'
— inclusief de knock-out-rij — en er was GEEN selector die daarop matchte. De
badge viel terug op de kale .status-badge: kleurloos, precies op de pagina waar
de burger de zwaarste boodschap krijgt.
WAAROM DE BACKSLASHES: de klasse die de renderer bouwt is letterlijk
`status-n.v.t.` (`status-${status}`, r6986). In een class-ATTRIBUUT is een punt
een gewoon teken, maar in een SELECTOR begint hij een nieuwe klasse — `.status-n`
gevolgd door `.v` en `.t`. Daarom moeten de punten hier ontsnapt worden; dat is
dezelfde klasse als de status-naam zelf, niet een tweede vorm.
Kleur = die van niet_van_toepassing (dezelfde betekenis voor de burger: deze rij
doet geen uitspraak meer). Contrast #7b1fa2 op #f3e5f5 = 7.66:1 (WCAG AA). */
.status-n\.v\.t\. { background: #f3e5f5; color: #7b1fa2; }
/* overall advies — FIX UX-RESULTAAT: compacter (was paginavullend) */
.overall-advies {
padding: 12px 16px; border-radius: var(--radius); margin-bottom: 12px;
animation: fadeIn .5s ease; box-shadow: var(--shadow);
display: flex; align-items: center; gap: 12px;
}
.overall-advies h2 { margin: 0; font-size: 16px; font-weight: 700; }
.overall-advies p { font-size: 13px; margin: 2px 0 0; opacity: 0.95; }
/* FIX HOOG-R21-H3 (auditor r21, WCAG 1.4.3): de banner draagt het HOOFDOORDEEL, en wit haalde op het
lichte gradiënt-eind geen 4,5:1 (oranje 2,70 · lichtgroen 2,36 · groen 3,30 · rood 4,23). Beide eindes
nu >= 4,5:1, ook voor de met opacity .95 (zwakste: groen/oranje 4,79 resp. 4,84). Kleur aangepast,
tint behouden; niet de tekst vergroot om de large-text-uitzondering te halen. Gemeten door
guard_kleursemantiek_vergunning_geen_rood as E (populatie .overall-*, beide eindes). */
.overall-rood { background: linear-gradient(135deg, #b71c1c, #c62828); color: white; }
.overall-oranje { background: linear-gradient(135deg, #9a3412, #c2410c); color: white; }
.overall-geel { background: linear-gradient(135deg, #f9a825, #fdd835); color: #333; }
.overall-lichtgroen { background: linear-gradient(135deg, #33691e, #467a28); color: white; }
.overall-groen { background: linear-gradient(135deg, #1b5e20, #2e7d32); color: white; }
.overall-icon { font-size: 24px; flex-shrink: 0; }
.suggestie-list { list-style: none; padding: 0; margin-top: 12px; }
.suggestie-list li {
padding: 10px 14px; margin-bottom: 6px; border-radius: 8px;
font-size: 14px; display: flex; gap: 8px; align-items: flex-start;
background: rgba(255,255,255,0.18);
}
.overall-geel .suggestie-list li { background: rgba(0,0,0,0.06); }
.suggestie-icon { flex-shrink: 0; font-size: 16px; }
/* RESULTATENPAGINA-LAYOUT punt 7 — VERVALLEN, subject bestaat niet meer (Fixer 2026-08-25).
Punt 7 vroeg om het 4-koloms .counter-telblok te HERORDENEN naar de severity-ladder
(verboden -> vergunning -> melding -> vrij) i.p.v. vier gelijk-gewicht cijfers. Gemeten
vóór bouw: dat telblok staat al niet meer op de burger-surface. FIX UX-RESULTAAT-
HERONTWERP (Grader-prio 2) heeft de samenvatting-tellers VERWIJDERD omdat ze de
conclusie-status telden i.p.v. de indien-keten en daardoor misleidende waarden gaven
('1 melding' bij 4 to-do-items) — zie de comment bij het resultaat-blok verderop. Wat
overbleef was uitsluitend de CSS: `class="counter"`/`counter-item` kwam 0x voor in de
markup van deze template en 0x in de overige .html/.py/.js van de tool-repo (de enige
treffers staan in archive_dakkapel_tool/, een aparte gearchiveerde app). Die dode CSS
hier laten staan is geen neutrale rest: hij LEEST als een bestaand telblok en nodigt de
volgende bouwer uit een severity-ladder op een klasse te leggen die niets rendert —
vals-groen op de burger-surface. Herordenen is dus geen fix maar een HERINTRODUCTIE van
een blok dat de Grader bewust heeft gesloopt; die keuze is Owner-/Grader-terrein, niet
Fixer-terrein. Regels verwijderd i.p.v. aangepast. */
/* FIX RESULTATENPAGINA-LAYOUT punt 4 (companion kleuroordeel): compacte termijn-chronologie
bovenaan de acties zodra >=2 distincte momentzinnen bestaan. Scanbare fase-volgorde; de
precieze wettelijke termijn blijft per actie inline (r4258). */
.termijn-chrono-lijst { list-style: none; padding: 0; margin: 8px 0 0; }
.termijn-fase { position: relative; padding: 0 0 14px 20px; border-left: 2px solid var(--vng-light); margin-left: 6px; }
.termijn-fase:last-child { border-left-color: transparent; padding-bottom: 0; }
.termijn-fase::before { content: ''; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--vng-light); border: 2px solid #fff; }
.termijn-fase-kop { font-weight: 700; font-size: 14px; color: var(--vng-dark); }
.termijn-fase-hint { font-size: 12px; color: var(--ink-muted); margin: 2px 0 4px; }
.termijn-fase-items { margin: 0; padding-left: 18px; font-size: 13px; }
.termijn-fase-items li { margin: 2px 0; }
.termijn-art { color: var(--ink-muted); font-size: 11px; }
.opnieuw { text-align: center; margin-top: 16px; }
.opnieuw a { cursor: pointer; font-weight: 600; }
.hidden { display: none; }
.spinner {
display: inline-block; width: 18px; height: 18px;
border: 3px solid rgba(255,255,255,0.3); border-top-color: white;
border-radius: 50%; animation: spin .7s linear infinite;
margin-right: 8px; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.melding-toelichting {
text-align: center; font-size: 12px; color: var(--ink-muted);
margin-top: 12px; padding: 10px;
background: var(--bg-soft); border-radius: 8px;
}
/* Diepe analyse — progressive enhancement */
.diepe-analyse-laadt {
display: flex; align-items: center; gap: 12px;
background: var(--bg-soft); border-left: 4px solid var(--vng-light);
padding: 14px 18px; border-radius: 10px; margin-top: 14px;
font-size: 14px; color: var(--ink-muted);
animation: fadeIn .25s ease;
}
.spinner-small {
display: inline-block; width: 14px; height: 14px;
border: 2px solid rgba(0, 114, 184, 0.25); border-top-color: var(--vng-light);
border-radius: 50%; animation: spin .7s linear infinite;
flex-shrink: 0;
}
.diepe-analyse-leeg {
font-size: 13px; color: var(--ink-muted);
background: var(--bg-soft); padding: 12px;
border-radius: 8px; margin-top: 14px;
}
.diepe-analyse-resultaat {
margin-top: 14px;
border-top: 3px solid var(--vng-light);
animation: fadeIn .35s ease;
}
.diepe-analyse-resultaat h2 {
color: var(--vng-dark); font-size: 17px;
}
.diepe-analyse-meta {
font-size: 13px; color: var(--ink-muted); margin-bottom: 14px;
}
.diepe-vragen {
list-style: none; padding: 0; margin: 0;
counter-reset: diepe-counter;
}
.diepe-vraag-item {
counter-increment: diepe-counter;
position: relative; padding: 12px 14px 12px 44px;
background: var(--bg-soft); border-radius: 10px;
margin-bottom: 10px;
}
.diepe-vraag-item::before {
content: counter(diepe-counter);
position: absolute; left: 14px; top: 12px;
width: 22px; height: 22px; border-radius: 50%;
background: var(--vng-light); color: white;
text-align: center; line-height: 22px;
font-size: 12px; font-weight: 700;
}
.diepe-vraag-tekst {
font-weight: 600; color: var(--vng-dark);
font-size: 14px; margin-bottom: 4px;
}
.diepe-vraag-toelichting {
font-size: 13px; color: var(--ink); margin-bottom: 6px;
}
.diepe-vraag-ref {
font-size: 11px; color: var(--ink-muted); font-style: italic;
}
.diepe-analyse-besi {
margin-top: 14px; padding: 12px 14px;
background: #e8f6e9; border-left: 4px solid #2e8b57;
border-radius: 8px; font-size: 13px;
color: #1d5430;
}
.diepe-analyse-besi a { color: #1d5430; font-weight: 600; }
/* Progress / zandloper */
.diepe-progress-card { margin-top: 14px; animation: fadeIn .25s ease; }
.diepe-progress-header {
display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.diepe-zandloper {
font-size: 30px; line-height: 1;
animation: zandloper 1.8s ease-in-out infinite;
display: inline-block; transform-origin: center;
}
@keyframes zandloper {
0% { transform: rotate(0deg); opacity: 1; }
45% { transform: rotate(180deg); opacity: 1; }
55% { transform: rotate(180deg); opacity: .9; }
100% { transform: rotate(360deg); opacity: 1; }
}
.diepe-progress-titel {
font-size: 16px; font-weight: 700; color: var(--vng-dark);
}
.diepe-progress-subtitel {
font-size: 13px; color: var(--ink-muted);
}
.diepe-stappen {
list-style: none; padding: 0; margin: 0;
border-left: 2px solid var(--border); padding-left: 14px;
}
.diepe-stap {
position: relative; padding: 6px 0 6px 4px; font-size: 13px;
animation: fadeIn .25s ease;
}
.diepe-stap::before {
content: ''; position: absolute; left: -19px; top: 11px;
width: 8px; height: 8px; border-radius: 50%; background: var(--border);
}
.diepe-stap-bezig {
color: var(--vng-dark); font-weight: 500;
}
.diepe-stap-bezig::before {
background: var(--vng-light); animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.4); }
}
.diepe-stap-ok { color: var(--ink-muted); }
.diepe-stap-ok::before { background: var(--green); }
.diepe-stap-tekst { display: inline-block; }
/* Resultaat na klaar */
.diepe-analyse-fout { border-left: 4px solid var(--amber); }
.diepe-subsectie {
font-size: 14px; color: var(--vng-dark); margin: 18px 0 8px;
}
.diepe-soorten { list-style: none; padding: 0; margin: 0; }
.diepe-soort-item {
display: flex; gap: 12px; align-items: flex-start;
padding: 10px 12px; background: #f4faff;
border-radius: 8px; margin-bottom: 8px;
border-left: 3px solid var(--vng-light);
}
.diepe-soort-icoon { font-size: 24px; line-height: 1; }
.diepe-soort-naam {
font-weight: 600; color: var(--vng-dark); font-size: 14px;
}
.diepe-soort-reden {
font-size: 12px; color: var(--ink); margin-top: 2px;
}
/* error/banner */
.banner {
padding: 16px; border-radius: 10px;
background: #fff3e0; color: var(--orange);
border-left: 4px solid var(--orange); font-size: 14px;
}
.banner strong { color: var(--vng-dark); display: block; margin-bottom: 4px; }
/* ============ BLOKKERENDE LIMIET-MODAL (429) ============
HOOG-UX-LIMIET-429-ALS-MODAL-NIET-BANNER-DEMO-BLOKKEREND. Owner-besluit
2026-08-18 (bindend): "een pop-up in een andere kleur waar je niet omheen kan."
Waarom niet de .banner: die stond zonder scrollIntoView tot +2480px buiten beeld
(gemeten) en is bovendien visueel niet te onderscheiden van de routine-
aandachtspunten — #fff3e0/#fff8e1 is bezet door N2000, voorbereidingsbesluit,
participatie en KLIC, waar een normaal resultaat vol mee staat. Zichtbaar is
niet hetzelfde als opvallend. Deze overlay hergebruikt het BESTAANDE modal-
patroon (position:fixed; inset:0; z-index >= 1000, zoals .bezig-overlay/
.interpret-overlay) in een aantoonbaar andere kleurfamilie: rood (hue ~0)
tegenover aandachtspunt-oranje (hue ~30-40). */
.limiet-overlay {
position: fixed; inset: 0; z-index: 1020;
display: flex; align-items: center; justify-content: center;
background: rgba(15,23,42,.62); -webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px); padding: 20px;
animation: fadeIn .2s ease;
}
.limiet-overlay.hidden { display: none; }
.limiet-card {
background: #fdeaea; border-top: 6px solid #b3261e;
border-radius: 16px; padding: 24px 24px 20px;
max-width: 520px; width: 100%;
box-shadow: 0 20px 60px rgba(0,0,0,.35);
text-align: left; color: #4a1512;
}
.limiet-card h3 { margin: 0 0 10px; font-size: 19px; color: #8c1d18; }
.limiet-tekst { font-size: 15px; line-height: 1.5; }
.limiet-tekst a { color: #8c1d18; font-weight: 600; }
.limiet-acties { margin-top: 18px; display: flex; justify-content: flex-end; }
.limiet-sluit {
background: #8c1d18; color: #fff; border: none; border-radius: 8px;
padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.limiet-sluit:hover { background: #6f1713; }
/* ============ WIZARD-MODE ============ */
.wizard-kop {
position: sticky; top: 0; z-index: 50;
background: var(--vng-dark); color: #fff;
padding: 12px 18px;
border-radius: 12px 12px 0 0;
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.wizard-kop-tekst {
font-size: 14px; line-height: 1.4;
flex: 1; min-width: 0;
}
.wizard-kop-tekst .wkop-label { opacity: 0.7; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.wizard-kop-tekst .wkop-val { font-weight: 500; }
.wizard-bewerk-btn {
background: rgba(255,255,255,0.12); color: #fff;
border: 1px solid rgba(255,255,255,0.25);
padding: 6px 12px; border-radius: 8px;
font-size: 13px; cursor: pointer; transition: background .15s;
}
.wizard-bewerk-btn:hover { background: rgba(255,255,255,0.22); }
.wizard-progress {
background: #fff; padding: 14px 18px 6px;
border-bottom: 1px solid var(--border);
}
.wizard-progress-bar {
height: 6px; background: var(--border);
border-radius: 3px; overflow: hidden;
}
.wizard-progress-fill {
height: 100%; background: var(--vng-light);
border-radius: 3px; transition: width .35s ease;
}
.wizard-progress-tekst {
font-size: 12px; color: var(--ink-muted);
margin-top: 6px; text-align: right;
}
.wizard-vraag-wrap {
background: #fff; padding: 22px 18px;
border-bottom: 1px solid var(--border);
min-height: 200px;
}
.wizard-vorige-btn {
background: transparent; color: var(--vng-dark);
border: none; cursor: pointer;
padding: 8px 14px; font-size: 14px;
display: inline-flex; align-items: center; gap: 6px;
}
.wizard-vorige-btn:hover { text-decoration: underline; }
/* FIX MIDDEN-NIEUWBOUW-VRAAG-BUGS Bug B (Grader 2026-06-20): .wizard-vorige-btn
(display:inline-flex) staat LATER dan .hidden{display:none} bij gelijke
specificiteit -> .hidden verloor en de knop was altijd zichtbaar, ook op
vraag 1. Dubbele klasse-selector (specificiteit 0,0,2,0) wint nu altijd. */
.wizard-vorige-btn.hidden { display: none; }
.wizard-vorige-wrap {
background: #fff; padding: 6px 18px 14px;
border-bottom: 1px solid var(--border);
}
.wizard-voet {
position: sticky; bottom: 0; z-index: 50;
background: #fafbfc;
border-radius: 0 0 12px 12px;
padding: 12px 18px;
border-top: 1px solid var(--border);
box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.wizard-voet-label {
font-size: 11px; color: var(--ink-muted);
text-transform: uppercase; letter-spacing: 0.5px;
margin-bottom: 8px;
}
.wizard-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wizard-chip {
background: #fff; border: 1px solid var(--border);
padding: 5px 10px; border-radius: 20px;
font-size: 12px; cursor: pointer;
transition: all .15s;
display: inline-flex; align-items: center; gap: 5px;
}
.wizard-chip:hover { border-color: var(--vng-light); background: #f5f9fd; }
.wizard-chip:focus-visible { outline: 3px solid var(--vng-light); outline-offset: 2px; }
/* FIX MIDDEN-DASHBOARD-VOORBEHOUD-ALLEEN-IN-TITLE-TOOLTIP (audit ronde 19): de drie
voorbehouden op het dashboard (rijksmonument/gezicht: "alleen het landelijke register
gecontroleerd") leefden uitsluitend in een title-attribuut zonder enige CSS-regel:
geen zichtbare affordance, niet bereikbaar per toetsenbord, en een title opent niet op
touch. Nu: zichtbare gestippelde markering + focusbaar (tabindex/role=note), zodat
screenreaders en toetsenbordgebruikers de tekst wél bereiken. Een tap-toggle voor
touch blijft een vervolgstap (aan de Grader gemeld). */
.dash-voorbehoud { cursor: help; border-bottom: 1px dotted currentColor; padding: 0 2px; }
.dash-voorbehoud:focus-visible { outline: 3px solid var(--vng-light); outline-offset: 2px; }
.wizard-chip-ja { color: #2e7d32; }
.wizard-chip-nee { color: #c62828; }
.wizard-chip-leeg { color: var(--ink-muted); font-style: italic; cursor: default; }
.wizard-chip-leeg:hover { border-color: var(--border); background: #fff; }
/* Wizard wrap-container met afgeronde hoeken */
#wizard-mode {
background: #fff; border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
overflow: hidden;
margin-bottom: 24px;
}
/* Grondslag-blok in vraag */
.vraag-grondslag-uitklap {
margin-top: 12px; font-size: 13px;
background: #f5f9fd; border-left: 3px solid var(--vng-light);
padding: 10px 12px; border-radius: 0 8px 8px 0;
color: var(--ink-muted);
}
.vraag-grondslag-uitklap b { color: var(--vng-dark); }
@media (max-width: 640px) {
.wizard-kop { border-radius: 0; }
#wizard-mode { border-radius: 0; }
.wizard-voet { border-radius: 0; }
}
/* ============ INDIEN-ACTIES (eindscherm) ============ */
.acties-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:20px; margin-top:18px; }
.acties-card h2 { margin:0 0 8px 0; }
.acties-meta { color:var(--ink-muted); font-size:13px; margin:0 0 14px 0; }
.acties-moment { margin-top:6px; font-size:13px; color:var(--ink); background:#f1f6ff; border-left:3px solid #3b6fd4; border-radius:6px; padding:6px 10px; }
.acties-moment-ic { margin-right:2px; }
.acties-moment-art { color:var(--ink-muted); font-size:12px; }
.acties-lijst { list-style:none; padding:0; margin:0; counter-reset:item; }
.acties-item {
border-left:4px solid var(--border);
padding:12px 14px;
margin-bottom:10px;
background:#fafbfc;
border-radius:0 8px 8px 0;
position:relative;
counter-increment:item;
}
/* FIX KLEURSEMANTIEK-RESULTATEN req4 (balk-/actie-vocabulaire, follow-up op kern 8c67332):
de indien-checklist droeg voor een omgevingsvergunning nog het verbod-rood (var(--red))
als accent — dezelfde vals-ontmoedigende ISO-3864-rood-op-een-verleenbare-vergunning die
de badge-tier al verliet. Accent nu tier-2 amber/oranjebruin (#92400e), consistent met de
.status-vergunning-badge en de overall-balk (📋). Rood blijft uitsluitend tier-1 verbod. */
.acties-item-vergunning { border-left-color: #92400e; }
/* Melding = tier 3: lichter amber (#a16207), niet het deep-orange var(--orange) dat te dicht
bij de tier-2-vergunning-familie ligt. */
.acties-item-melding { border-left-color: #a16207; }
.acties-item-informatie { border-left-color: var(--vng-light); }
.acties-item-maatregel { border-left-color: #f9c84a; }
.acties-titel { font-weight:600; color:var(--vng-dark); margin-bottom:4px; }
.acties-soort { color:var(--ink-muted); font-weight:500; font-size:13px; margin-right:4px; }
.acties-omschrijving { font-size:14px; line-height:1.5; margin-bottom:6px; }
/* GH7 (MIDDEN-HOOG-GH7-NESTING-PRESENTATIE-EEN-OMGEVINGSVERGUNNING): onderdelen van één
omgevingsvergunning genest onder de moederkaart — subordinaat, geen eigen rode gelijkwaardige kaart. */
.acties-moeder > .acties-onderdelen { list-style:none; padding:0; margin:10px 0 0; counter-reset:onderdeel; }
.acties-onderdeel {
counter-increment:onderdeel;
border-left:3px solid #e2e8f0;
background:#fff;
border-radius:0 6px 6px 0;
padding:8px 12px;
margin-top:8px;
}
.acties-onderdeel-titel { font-weight:600; color:var(--vng-dark); margin-bottom:4px; font-size:14px; }
.acties-onderdeel-titel::before { content:"Onderdeel " counter(onderdeel) ": "; color:var(--ink-muted); font-weight:500; font-size:12px; }
.acties-urgentie { font-size:12px; color:var(--ink-muted); margin-bottom:4px; }
.acties-grondslag { font-size:12px; color:var(--ink-muted); margin-bottom:8px; }
.acties-link {
display:inline-block; padding:6px 12px;
background:var(--vng-dark); color:#fff;
border-radius:6px; text-decoration:none;
font-size:13px; font-weight:500;
}
.acties-link:hover { background:var(--vng-light); }
/* ============ COMPACT MODE — actie eerst, rest in expander ============ */
.acties-meer, .conclusie-meer {
margin-top: 4px;
font-size: 13px;
color: var(--ink-muted);
}
.acties-meer summary, .conclusie-meer summary {
cursor: pointer;
color: var(--vng-dark);
font-weight: 500;
font-size: 12px;
user-select: none;
list-style: none;
display: inline-block;
padding: 2px 0;
}
.acties-meer summary::before, .conclusie-meer summary::before {
content: "▸ ";
display: inline-block;
transition: transform .15s ease;
}
.acties-meer[open] summary::before, .conclusie-meer[open] summary::before {
content: "▾ ";
}
.acties-meer summary:hover, .conclusie-meer summary:hover {
color: var(--vng-light);
text-decoration: underline;
}
/* FIX VIS-TOELICHTING-LINK-NIET-INTUITIEF: chip-uiterlijk maakt de
'Lees toelichting'-summary herkenbaar klikbaar (i.p.v. een kaal
blauw pijltje). Subtiele rand + achtergrond = duidelijke CTA. */
.conclusie-meer summary.conclusie-meer-cta {
border: 1px solid var(--vng-light, #6aa6d8);
border-radius: 12px;
padding: 2px 10px;
background: #eef4fb;
color: var(--vng-dark);
}
.conclusie-meer summary.conclusie-meer-cta:hover {
background: var(--vng-light, #6aa6d8);
color: #fff;
text-decoration: none;
}
.acties-meer-inhoud, .conclusie-meer-inhoud {
margin-top: 6px;
padding: 8px 12px;
background: #f5f7fa;
border-radius: 6px;
line-height: 1.5;
}
/* ============ KAART-PICKER ============ */
.locatie-hint {
display: flex; align-items: center; gap: 6px;
margin-top: 6px; flex-wrap: wrap;
}
.link-knop {
background: transparent; border: none;
color: var(--vng-dark); font-size: 13px;
cursor: pointer; padding: 2px 0;
text-decoration: underline; text-underline-offset: 2px;
}
.link-knop:hover { color: var(--vng-light); }
.hint-muted { color: var(--ink-muted); font-size: 12px; }
.kaart-paneel {
margin-top: 10px;
border: 1px solid var(--border);
border-radius: 10px;
background: #fff;
padding: 12px;
}
.kaart-paneel-kop {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 8px;
font-size: 13px; color: var(--ink-muted);
}
.kaart-resultaat {
margin-top: 10px; min-height: 24px;
font-size: 13px;
}
.kaart-resultaat.gekozen {
background: #e8f5e9; padding: 10px 12px;
border-left: 3px solid var(--green); border-radius: 0 8px 8px 0;
color: #1b5e20;
}
.kaart-resultaat-adres { font-weight: 500; }
.kaart-resultaat-coords { font-size: 12px; opacity: 0.8; }
.kaart-laden { color: var(--ink-muted); font-style: italic; }
/* Bezig-popup (modal) tijdens het toetsen — verdwijnt zodra het klaar is. */
.bezig-overlay {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center;
background: rgba(15,23,42,.45); -webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px); padding: 20px;
animation: fadeIn .2s ease;
}
.bezig-overlay.hidden { display: none; }
.bezig-card {
background: #fff; border-radius: 16px; padding: 26px 22px 22px;
max-width: 560px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.3);
text-align: center;
}
.bezig-card h3 { margin: 0 0 4px; color: var(--vng-dark); font-size: 18px; }
.bezig-card p { margin: 0 0 16px; color: var(--ink-muted); font-size: 14px; }
.bezig-card .stappen { margin-top: 4px; }
/* Donkere spinner-variant (de standaard .spinner is wit, voor de knop). */
.spinner-dark { border-color: rgba(11,61,145,.25); border-top-color: var(--vng-dark); }
/* Interpretatie-modal (pop-up vóór de vragen — HOOG-INTERPRETATIE-REFLECTIE) */
.interpret-overlay {
position: fixed; inset: 0; z-index: 1010;
display: flex; align-items: center; justify-content: center;
background: rgba(15,23,42,.50); -webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px); padding: 20px;
animation: fadeIn .2s ease;
}
.interpret-overlay.hidden { display: none; }
.interpret-card {
background: #fff; border-radius: 16px; padding: 26px 24px 22px;
max-width: 580px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.3);
text-align: left;
}
.interpret-card h3 { margin: 0 0 10px; color: var(--vng-dark); font-size: 17px; }
.interpret-samenvatting {
background: #f0f4ff; border-left: 3px solid var(--vng-light);
border-radius: 6px; padding: 10px 14px; margin: 0 0 14px;
font-size: 14px; color: var(--ink);
}
/* SPEC-INTERPRETATIE-SAMENVATTING-ALTIJD-ZICHTBAAR: niet-blokkerende
inline begrip-samenvatting bovenaan het resultaat. */
#begrip-banner { margin: 0 0 14px; }
#begrip-banner.hidden { display: none; }
.begrip-card {
background: #f0f4ff; border-left: 3px solid var(--vng-light);
border-radius: 6px; padding: 10px 14px;
font-size: 14px; color: var(--ink);
}
.begrip-card .begrip-tekst { display:block; }
.begrip-card .begrip-aanpas {
margin-top: 6px; font-size: 13px; color: var(--ink-muted);
}
.begrip-card .begrip-aanpas a {
color: var(--vng-light); text-decoration: underline; cursor: pointer;
}
.interpret-twijfel { margin: 0 0 12px; padding: 0; list-style: none; }
.interpret-twijfel li {
background: #fff8e1; border-left: 3px solid #f59e0b;
border-radius: 5px; padding: 8px 12px; margin-bottom: 6px;
font-size: 13px; color: #78350f;
}
.interpret-hint {
background: #fef2f2; border-left: 3px solid #f87171;
border-radius: 6px; padding: 10px 14px; margin: 0 0 14px;
font-size: 14px; color: #7f1d1d;
}
.interpret-aanpassen { margin-top: 12px; }
.interpret-aanpassen label { display:block; font-size:13px; color:var(--ink-muted); margin-bottom:3px; }
.interpret-aanpassen input, .interpret-aanpassen textarea {
width:100%; box-sizing:border-box; border:1px solid #cbd5e1;
border-radius:7px; padding:8px 10px; font-size:14px;
font-family:inherit; margin-bottom:8px; resize:vertical;
}
/* FIX HOOG-R21-H4 (auditor r21, WCAG 2.4.7/1.4.11): hier stond `outline:none` met een box-shadow van
~1,2:1. Deze selector (0,2,1) verslaat de r19-focusfix (textarea:focus/input:focus, 0,1,1), dus de
correctievelden van de interpretatiemodal hadden géén zichtbare focus — tweede instantie van de
r19-klasse. Nu dezelfde ring als r19 (#0072B8 op wit, ruim >= 3:1). De populatie-lint
guard_focus_outline_none_heeft_zichtbare_vervanging houdt de klasse dicht. */
.interpret-aanpassen input:focus, .interpret-aanpassen textarea:focus {
border-color:var(--vng-light); outline:3px solid var(--vng-light); outline-offset:1px;
}
/* HOOG-INTAKE-POPUP-RIJK-ALTIJD: gerelateerde-activiteiten + extra-info secties */
.interpret-sectie-titel { font-size:13px; font-weight:600; color:#334; margin:0 0 8px; }
.interpret-gerelateerd, .interpret-extra { margin:0 0 14px; }
.interpret-gerelateerd.hidden, .interpret-extra.hidden { display:none; }
#interpret-chips { display:flex; flex-wrap:wrap; gap:8px; }
.interpret-chip {
display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:18px;
border:1.5px solid #cdd6ff; background:#f4f6ff; color:#2b3a67; font-size:13px; cursor:pointer;
transition:all .12s; }
.interpret-chip:hover { border-color:#8ea0ff; }
.interpret-chip.gekozen { background:#2b52d6; border-color:#2b52d6; color:#fff; }
.interpret-chip .chip-vink { font-weight:700; }
#interpret-extra-lijst { margin:0; padding:0 0 0 18px; }
#interpret-extra-lijst li { font-size:13px; color:#445; margin:0 0 5px; }
.interpret-acties { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; align-items:center; }
.interpret-acties .btn { flex:1; min-width:130px; text-align:center; padding:10px 16px; font-size:15px; }
.interpret-acties .btn-sec {
background:#fff; color:var(--vng-dark); border:1.5px solid var(--vng-light);
border-radius:8px; padding:9px 16px; font-size:14px; cursor:pointer;
flex:0; white-space:nowrap;
}
.interpret-acties .btn-sec:hover { background:#f0f4ff; }