/* TerraFact Perceelscan: de rapportpagina in ontwerprichting 2 (05-10-2026), zoals de site: marine, het
   blauw van het logo en één accent (amber), koppen in Archivo, tekst in IBM Plex. Op een breed scherm drie
   kolommen onder een marine kop: de inhoudstafel (altijd in beeld, zoals Sitescope: Lout 05-10-2026), de
   sectie en de kaart. Zonder script een gewone kolom om te lezen; op een telefoon de kaart boven en de
   inhoudstafel als strook. Het platform achter de login houdt zijn eigen Kadaster-stijl. */
@font-face { font-family: "Archivo"; src: url("/static/fonts/Archivo-Koppen.woff2") format("woff2"); font-weight: 700 800;
             font-stretch: 100% 112%; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --marine: #001d3d; --nacht: #001a3a; --tafel: #0a2448;
  --blauw: #0576c0; --blauw-donker: #045c96; --amber: #f5a524; --amber-licht: #ffb840; --amber-donker: #a35f00;
  --inkt: #1b2a40; --inkt-2: #3b4c63; --zacht: #5a6b82; --op-donker: #dce6f2; --op-donker-2: #93a8c2;
  --lijn: #e5ecf3; --vlak: #ffffff; --achter: #f4f7fb; --chip: #e6f1fa;
  --rood: #b42318; --rood-licht: #fde8e6; --oranje-licht: #fdefd6; --groen: #15803d;
  --kop: "Archivo", "Arial Black", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --rond: 16px; --tafelbreed: 264px; --leesbreed: 640px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Arial, sans-serif; color: var(--inkt);
       background: var(--achter); -webkit-font-smoothing: antialiased; }
a { color: var(--blauw); text-underline-offset: 2px; }
a:hover { color: var(--blauw-donker); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* de kop */
.kaart { display: none; }
.balk { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding: 12px 24px; min-height: 64px;
        background: var(--nacht); color: #fff; }
.merk { display: inline-flex; align-items: center; gap: 12px; }
.merk img { display: block; height: 26px; width: auto; }
.merk b { font-family: var(--kop); font-stretch: 112%; font-weight: 700; font-size: 17px; padding-left: 12px;
          border-left: 1px solid rgba(255, 255, 255, .35); }
.merk b span { font-family: "IBM Plex Sans", Arial, sans-serif; font-stretch: 100%; font-weight: 400; }
.adres { margin: 0; flex: 1 1 260px; font-family: var(--kop); font-weight: 700; font-size: 18px; line-height: 1.25; }
.acties { display: flex; gap: 8px; flex-wrap: wrap; }
.knop { display: inline-flex; align-items: center; min-height: 40px; border: 1px solid rgba(255, 255, 255, .35);
        border-radius: 999px; padding: 0 16px; background: transparent; color: #fff; font: inherit; font-size: 14px;
        cursor: pointer; text-decoration: none; }
.knop:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.knop.accent { border-color: var(--amber); background: var(--amber); color: var(--nacht); font-weight: 600; }
.knop.accent:hover { background: var(--amber-licht); color: var(--nacht); }
.rapportvak { max-width: 780px; margin: 0 auto; padding: 16px; }
.paneel { margin: 0; }

/* de inhoudstafel */
.inhoud { background: var(--tafel); color: var(--op-donker); border-radius: var(--rond); padding: 16px 12px; margin: 0 0 16px; }
.inhoud-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 10px 10px; }
.inhoud-kop b { font-size: 14px; color: #fff; } .inhoud-kop span { font-size: 13px; color: var(--op-donker-2); }
.groep { margin: 12px 10px 4px; font-size: 12px; font-weight: 600; color: var(--op-donker-2); }
.inhoud ol { list-style: none; margin: 0; padding: 0; }
.inhoud a { display: flex; align-items: flex-start; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--op-donker);
            text-decoration: none; font-size: 14px; line-height: 1.3; }
.inhoud a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.i-nr { flex: 0 0 18px; padding-top: 1px; text-align: right; color: var(--op-donker-2); font-family: var(--mono); font-size: 13px; }
.i-titel { flex: 1 1 auto; }
/* een stip met een uitroepteken: de stand niet alleen in kleur (16-10-2026) */
.i-stip { flex: 0 0 14px; height: 14px; margin-top: 2px; border-radius: 50%; color: var(--nacht); font-size: 10px;
          font-weight: 700; line-height: 14px; text-align: center; }
.i-stip::before { content: "!"; }
.i-stip.stand-fout { background: #ff8a80; } .i-stip.stand-nieuw { background: var(--amber); }
.inhoud a[aria-current="true"] { color: #fff; font-weight: 600; background: rgba(245, 165, 36, .16); }
.inhoud a[aria-current="true"] .i-nr { color: var(--amber); }

/* een sectie */
.sectie { background: var(--vlak); border-radius: var(--rond); padding: 22px 24px; margin: 16px 0; }
.boven { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; font-family: var(--mono);
         font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
.boven .groepnaam::after { content: "·"; margin-left: 10px; }
.nr { font-family: var(--mono); color: var(--zacht); }
.nr::after { content: " ·"; }
h2 { font-family: var(--kop); font-stretch: 112%; font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -.012em;
     margin: 0 0 18px; color: var(--nacht); }
p { line-height: 1.6; margin: 8px 0; color: var(--inkt-2); }
.dus { font-weight: 600; color: var(--nacht); }
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; margin: 14px 0; }
.tegel { background: var(--achter); border-radius: 12px; padding: 12px 14px; }
.getal { display: block; font-family: var(--kop); font-size: 24px; font-weight: 700; color: var(--nacht); }
.getal small { font-family: "IBM Plex Sans", Arial, sans-serif; font-size: 13px; margin-left: 4px; font-weight: 400; color: var(--inkt-2); }
.label { font-size: 12px; color: var(--inkt-2); }
.figuur { margin: 14px 0; } .figuur svg { width: 100%; height: auto; border-radius: 12px; }
.rijen { width: 100%; border-collapse: collapse; font-size: 15px; margin: 12px 0; background: var(--vlak); }
.rijen td { padding: 12px 10px; border-bottom: 1px solid var(--lijn); vertical-align: top; overflow-wrap: break-word; hyphens: auto;
            color: var(--inkt); font-weight: 600; }
.rijen tr:last-child td { border-bottom: 0; }
/* een label en een waarde: het label de helft; meer kolommen (een datum, een handeling, een stand): de eerste zo smal als kan */
.rijen td:first-child { color: var(--inkt-2); font-weight: 400; }
.rijen td:first-child:nth-last-child(2) { width: 50%; }
.rijen td:first-child:not(:nth-last-child(2)) { white-space: nowrap; }
/* antwoorden in zinnen (Wat er mag): het onderwerp smal, het antwoord breed en in gewone letter */
.rijen.antwoorden td:first-child:nth-last-child(2) { width: 30%; }
.rijen.antwoorden td:last-child { font-weight: 400; line-height: 1.55; }
.links { padding-left: 18px; font-size: 14px; }
.links li { margin: 4px 0; }
.stand { border-radius: 999px; padding: 2px 10px; font-family: "IBM Plex Sans", Arial, sans-serif; font-size: 12px;
         text-transform: none; letter-spacing: 0; font-weight: 600; }
.stand-ok { background: #ddf3e4; color: #14532d; } .stand-niets { background: var(--chip); color: var(--blauw-donker); }
.stand-fout { background: var(--rood-licht); color: var(--rood); } .stand-nieuw { background: var(--oranje-licht); color: #7a4700; }
.zekerheid { background: var(--achter); border-left: 4px solid var(--amber); border-radius: 10px; padding: 10px 14px; margin: 14px 0; }
.zekerheid h4 { margin: 0 0 4px; font-size: 14px; color: var(--nacht); }
/* het woord Bron(nen) onder een tegel en een sectie (26-10-2026, weergave/bron.py, static/bron.js): klein en grijs met
   een stippellijn; zonder script klapt de bron eronder open, met script zweeft ze in een rustig paneel */
.bron { display: block; width: fit-content; max-width: 100%; font-size: 12px; color: var(--zacht); }
.bron > summary { display: inline-block; list-style: none; cursor: pointer; padding: 2px 0; text-decoration: underline dotted;
                  text-underline-offset: 3px; text-decoration-color: currentColor; }
.bron > summary::-webkit-details-marker { display: none; }
.bron > summary:hover, .bron[open] > summary { color: var(--inkt-2); }
.bron-pop { display: block; margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--inkt-2); overflow-wrap: anywhere; }
.bron-pop > span { display: block; } .bron-meer > span { padding-left: 11px; text-indent: -11px; }
.bron-meer > span::before { content: "·"; display: inline-block; width: 11px; text-indent: 0; color: var(--zacht); }
.bron-meer > span + span { margin-top: 3px; }
.bron-zweeft .bron { position: relative; }
.bron-zweeft .bron-pop { position: absolute; top: 100%; left: 0; z-index: 30; width: max-content;
  max-width: min(340px, calc(100vw - 24px)); padding: 8px 11px; background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 29, 61, .08); }
.bron-zweeft .bron-boven .bron-pop { top: auto; bottom: 100%; margin: 0 0 4px; }
.bronnen { margin-top: 14px; }

.meld { margin-top: 6px; border: 0; background: none; color: var(--blauw); font: inherit; font-size: 14px;
        text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 0; }
.verder { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--lijn); }
.verder a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 40px; padding: 0 16px;
            border-radius: 999px; font-size: 14px; text-decoration: none; color: var(--nacht); background: var(--vlak);
            border: 1px solid #d5dfea; }
.verder a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verder a.volgende { margin-left: auto; color: #fff; font-weight: 600; background: var(--nacht); border-color: var(--nacht); }
.verder a:hover { filter: brightness(.96); }
.verder a.home { color: var(--nacht); }
/* pijltjes met Home bovenaan elke sectie (13-10-2026) */
.pijlen { display: inline-flex; gap: 4px; margin-left: auto; letter-spacing: 0; text-transform: none; }
.pijlen .pijl { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 32px; height: 32px;
  padding: 0 9px; border-radius: 999px; border: 1px solid #d5dfea; color: var(--nacht); background: var(--vlak);
  font-size: 15px; text-decoration: none; }
.pijlen .pijl span { font-size: 12px; } .pijlen .pijl.leeg { opacity: .35; }
.pijlen a.pijl:hover { background: var(--achter); }
/* de vergelijkende tabel van Wat er staat en wat er mag (gs-4) */
.vergelijkvak { overflow-x: auto; margin: 6px 0 14px; }
.vergelijk { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.vergelijk th, .vergelijk td { padding: 11px 10px; border-bottom: 1px solid var(--lijn); text-align: right; vertical-align: top; }
.vergelijk thead th { font-size: 12.5px; color: var(--zacht); font-weight: 400; border-bottom: 1px solid var(--lijn); }
.vergelijk tbody th { text-align: left; font-weight: 400; color: var(--inkt-2, #3b4c63); }
.vergelijk td { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vergelijk td:last-child { color: var(--blauw-donker); background: var(--achter); }
.stand.beta { background: var(--amber); color: var(--nacht); font-weight: 700; letter-spacing: .04em; }
.beta-uitleg { font-size: 14px; color: var(--zacht); }
.voet { font-size: 13px; color: var(--zacht); padding: 8px 4px 40px; }
.voet p { color: var(--zacht); }
.melding { border: 0; border-radius: var(--rond); padding: 0; width: min(520px, calc(100vw - 32px));
           box-shadow: 0 18px 40px rgba(0, 26, 58, .25); }
.melding::backdrop { background: rgba(0, 26, 58, .5); }
.melding-form { padding: 20px 22px; } .melding-form label { display: block; margin: 10px 0; font-size: 14px; }
.melding-form h3 { font-family: var(--kop); font-weight: 700; color: var(--nacht); margin: 0 0 6px; }
.melding-form textarea { width: 100%; margin-top: 4px; border: 1px solid #d5dfea; border-radius: 10px; padding: 8px; font: inherit; }
.melding-knoppen { display: flex; gap: 8px; justify-content: flex-end; }
.melding-knoppen .knop { color: var(--nacht); border-color: #d5dfea; }
.melding-knoppen .knop.accent { border-color: var(--amber); }

/* met script: de kaart en één sectie tegelijk (de inhoudstafel en vorige/volgende wisselen ze) */
body.met-kaart .kaart { display: block; }
body.met-kaart .sectie { display: none; }
body.met-kaart .sectie.actief { display: block; }

/* met script, op een breed scherm: drie kolommen onder de kop; de inhoudstafel en de sectie scrollen apart,
   de sectie staat op de lichte achtergrond met witte rijen en tegels (zoals het Straatwand-rapport) */
@media (min-width: 1024px) {
  body.met-kaart { overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100vh;
                   grid-template-columns: var(--tafelbreed) minmax(0, var(--leesbreed)) minmax(0, 1fr); }
  body.met-kaart .balk { grid-column: 1 / -1; grid-row: 1; }
  body.met-kaart .rapportvak { display: contents; }
  body.met-kaart .inhoud { grid-column: 1; grid-row: 2; margin: 0; border-radius: 0; overflow-y: auto; scrollbar-width: thin; }
  body.met-kaart .paneel { grid-column: 2; grid-row: 2; min-width: 0; overflow-y: auto; scrollbar-width: thin; padding: 30px 34px 0; }
  body.met-kaart .kaart { grid-column: 3; grid-row: 2; position: relative; min-height: 0; }
  body.met-kaart .sectie { margin: 0; padding: 0; border-radius: 0; background: none; }
  body.met-kaart .tegel, body.met-kaart .zekerheid { background: var(--vlak); }
  body.met-kaart .rijen { border-radius: var(--rond); overflow: hidden; }
  body.met-kaart .rijen td:first-child { padding-left: 18px; }
  body.met-kaart .rijen td:last-child { padding-right: 18px; }
  body.met-kaart .voet { padding: 24px 0 28px; }
}

/* met script, op een smal scherm: de kaart boven, de inhoudstafel als strook die bovenaan blijft staan */
@media (max-width: 1023px) {
  body.met-kaart .kaart { position: relative; height: 42vh; min-height: 240px; }
  body.met-kaart .rapportvak { max-width: none; padding: 0; }
  body.met-kaart .inhoud { position: sticky; top: 0; z-index: 6; display: flex; gap: 6px; margin: 0; padding: 10px 16px;
                           border-radius: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  body.met-kaart .inhoud::-webkit-scrollbar { display: none; }
  body.met-kaart .inhoud-kop, body.met-kaart .groep { display: none; }
  body.met-kaart .inhoud ol { display: contents; }
  body.met-kaart .inhoud li { flex: 0 0 auto; }
  body.met-kaart .inhoud a { align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; white-space: nowrap;
                             font-size: 13px; background: rgba(255, 255, 255, .06); }
  body.met-kaart .inhoud a[aria-current="true"] { background: var(--amber); color: var(--nacht); }
  body.met-kaart .inhoud a[aria-current="true"] .i-nr { color: inherit; }
  body.met-kaart .i-nr { flex: 0 0 auto; padding: 0; }
  body.met-kaart .i-stip { margin-top: 0; }
  body.met-kaart .paneel { padding: 16px 16px 0; }
  body.met-kaart .sectie { margin: 0; padding: 20px 18px; scroll-margin-top: 64px; }
  body.met-kaart .voet { padding: 12px 4px 40px; }
}
@media (max-width: 480px) {
  .balk { padding: 12px 16px; }
  h2 { font-size: 22px; }
  .boven .groepnaam { display: none; }
  .verder { flex-wrap: nowrap; gap: 6px; }
  .verder a { flex: 1 1 0; min-width: 0; padding: 0 10px; } .verder a.volgende { margin-left: 0; }
  .verder a.home { flex: 0 0 44px; justify-content: center; padding: 0; } .verder a.home span { display: none; }
}
.leaflet-container { font: inherit; background: #dbe4ee; }
/* de GRB-kaart in grijsblauw (marine), zodat het perceel en het gebouw in hun kleur eruit springen; de luchtfoto blijft echt */
.leaflet-layer.basis { filter: grayscale(1) sepia(.18) hue-rotate(180deg) brightness(1.05) contrast(.9); }
.etiket { background: rgba(255, 255, 255, .95); border: 0; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); font-size: 12px; }
/* de rekenmodule (10-10-2026): een gewoon formulier met witte velden, de uitkomst er meteen boven */
.reken .tegels { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.reken .getal { font-size: 21px; white-space: nowrap; }
.reken-form { margin: 16px 0 8px; }
.reken-groep { border: 1px solid var(--lijn); border-radius: 12px; padding: 6px 14px 10px; margin: 0 0 14px; background: var(--vlak); }
.reken-groep legend { font-family: var(--kop); font-weight: 700; color: var(--nacht); padding: 0 6px; }
.reken-pand p { font-size: 14px; }
.reken-veld { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0;
              border-bottom: 1px solid var(--lijn); font-size: 14px; color: var(--inkt-2); }
.reken-groep .reken-veld:last-child { border-bottom: 0; }
.reken-invoer { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.reken-invoer input, .reken-invoer select { width: 124px; min-height: 36px; border: 1px solid #c9d6e4; border-radius: 8px;
                                           padding: 4px 8px; font: inherit; color: var(--inkt); background: #fff; text-align: right; }
.reken-invoer select { text-align: left; }
.reken-schuif { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.reken-schuif input[type=range] { width: 160px; accent-color: var(--blauw); }
.reken-schuif small { font-size: 12px; color: var(--zacht); }
.reken-schuif output { min-width: 40px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.reken-invoer input[aria-invalid="true"] { border-color: var(--rood); background: var(--rood-licht); }
.reken-invoer small { flex: 0 0 112px; font-size: 12px; line-height: 1.25; color: var(--zacht); }
.reken-akkoord { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--inkt-2); margin: 6px 0 12px; }
.reken-akkoord input { margin-top: 4px; }
.reken-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.reken-knoppen .knop { color: var(--nacht); border-color: #d5dfea; background: var(--vlak); }
.reken-knoppen .knop.accent { border-color: var(--amber); background: var(--amber); }
.reken-stand { font-size: 14px; min-height: 1.6em; }
.reken-rekening td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .reken-veld { flex-wrap: wrap; }
  .reken-invoer, .reken-schuif { width: 100%; }
  .reken-schuif input[type=range] { flex: 1 1 auto; width: auto; }
  .reken-invoer input, .reken-invoer select { flex: 1 1 auto; width: auto; }
}

/* de potentiële hindernissen als kaartjes (11-10-2026): de zwaarte als band links, een link naar de sectie */
.hindernissen { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.hindernis { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: start;
             background: var(--vlak); border: 1px solid var(--lijn); border-left: 5px solid #94a3b8;
             border-radius: 0 12px 12px 0; padding: 10px 14px; }
.h-ernst { grid-column: 1; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--zacht); }
.h-tekst { grid-column: 1; color: var(--inkt); line-height: 1.5; }
.h-naar { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; font-size: 13px;
          text-decoration: none; color: var(--blauw); }
.h-zwaar { border-left-color: var(--rood); } .h-zwaar .h-ernst { color: var(--rood); }
.h-aandacht { border-left-color: var(--amber); } .h-aandacht .h-ernst { color: var(--amber-donker); }
/* Wat er mag: per onderwerp de kern, de wettekst klapt open */
.antwoorden { display: grid; gap: 8px; margin: 14px 0; }
.antwoord { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; }
.antwoord summary, .antwoord.kort { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); gap: 4px 16px;
                                    padding: 12px 16px; cursor: pointer; list-style: none; }
.antwoord.kort { cursor: default; }
.antwoord summary::-webkit-details-marker { display: none; }
.antwoord summary::after { content: "+"; grid-column: 2; justify-self: end; margin-top: -1.4em; color: var(--blauw);
                           font-weight: 600; }
.antwoord[open] summary::after { content: "–"; }
.a-onderwerp { color: var(--inkt-2); font-size: 14px; }
.a-kern { color: var(--inkt); font-weight: 600; line-height: 1.5; padding-right: 18px; }
.antwoord > p { margin: 0; padding: 0 16px 14px calc(30% + 32px); line-height: 1.6; font-size: 15px; }
/* het blok over het rapport: één keer, bij de verantwoording (rapport.js zet toon-voet) */
body.met-kaart .voet { display: none; }
body.met-kaart.toon-voet .voet { display: block; }
/* de lagen van het register op de kaart */
.lagenvak { background: rgba(255, 255, 255, .97); border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 26, 58, .18);
            max-width: 260px; font-size: 13px; color: var(--inkt); }
.lagen-kop { display: block; width: 100%; border: 0; background: none; padding: 9px 12px; font: inherit; font-weight: 600;
             text-align: left; color: var(--nacht); cursor: pointer; }
.lagen-kop::after { content: "▾"; float: right; color: var(--zacht); }
.lagen-kop[aria-expanded="false"]::after { content: "▸"; }
.lagen-lijf { padding: 0 12px 10px; max-height: 52vh; overflow-y: auto; }
.laag-rij { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; line-height: 1.3; cursor: pointer; }
.laag-rij input { margin-top: 2px; }
.laag-legende { display: block; max-width: 100%; height: auto; margin: 2px 0 6px 24px; }
.laag-noot { margin: 6px 0; font-size: 12px; line-height: 1.4; color: var(--inkt-2); }
.laag-bron { margin: 6px 0 0; font-size: 12px; color: var(--zacht); }
.infopop .leaflet-popup-content { margin: 10px 12px; font-size: 13px; line-height: 1.4; }
.info-item { display: grid; gap: 1px; padding: 6px 0; border-top: 1px solid var(--lijn); }
.info-item:first-of-type { border-top: 0; }
.info-laag { font-size: 11px; color: var(--zacht); } .info-uitleg { color: var(--inkt-2); }
.info-stand { margin: 0; color: var(--inkt-2); }
@media (max-width: 1023px) {
  body.met-kaart .kaart { height: 30vh; min-height: 200px; }
  .lagenvak { max-width: 220px; }
}
@media (max-width: 640px) {
  .balk { gap: 8px 12px; padding: 10px 14px; min-height: 0; }
  .merk img { height: 20px; } .merk b { font-size: 15px; padding-left: 10px; }
  .adres { flex-basis: 100%; font-size: 16px; }
  .acties { gap: 6px; } .knop { min-height: 34px; padding: 0 12px; font-size: 13px; }
  .antwoord summary, .antwoord.kort { grid-template-columns: 1fr; }
  .antwoord summary::after { grid-column: 1; margin-top: -1.4em; }
  .antwoord > p { padding-left: 16px; }
  .hindernis { grid-template-columns: 1fr; } .h-naar { grid-column: 1; grid-row: auto; justify-self: start; }
}
.laag-symbool { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }

/* de opening (11-10-2026): het antwoord, de kerncijfers, de hindernissen en in het kort, voor de regels zelf */
.opening { display: grid; gap: 14px; margin: 4px 0 26px; }
.antwoordblok { background: var(--nacht); color: #fff; border-radius: var(--rond); padding: 18px 20px; }
.ab-label { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.ab-zone { margin: 6px 0 0; font-family: var(--kop); font-stretch: 108%; font-weight: 700; font-size: 22px; line-height: 1.2;
           color: #fff; }
.ab-plan { margin: 6px 0 0; color: var(--op-donker); font-size: 15px; }
.tegels.kern { margin: 0; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.tegels.kern .tegel { background: var(--vlak); border: 1px solid var(--lijn); }
.tegels.kern .getal { font-size: 22px; white-space: nowrap; }
.hindernisblok { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 14px 16px; }
.hb-kop { display: block; font-family: var(--kop); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--nacht);
          text-decoration: none; }
.hb-kop b { color: var(--blauw); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px;
        text-decoration: none; background: var(--achter); color: var(--inkt); border: 1px solid var(--lijn); }
.chip.c-zwaar { background: var(--rood-licht); color: var(--rood); border-color: #f5c2bd; }
.chip.c-aandacht { background: var(--oranje-licht); color: #7a4700; border-color: #f6d9a4; }
.kort-kop, .regels-kop { margin: 6px 0 0; font-family: var(--kop); font-weight: 700; font-size: 15px; color: var(--nacht); }
.regels-kop { margin: 0 0 4px; }
.kort { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 8px; }
.kort a { display: grid; gap: 2px; height: 100%; padding: 10px 12px 10px 14px; border-radius: 12px; background: var(--vlak);
          border: 1px solid var(--lijn); border-left: 4px solid #cbd5e1; text-decoration: none; }
.kort a:hover { border-color: #cbd5e1; }
.k-titel { font-size: 12px; color: var(--zacht); }
.k-kop { font-size: 14px; line-height: 1.35; color: var(--inkt); font-weight: 600; }
.kort .k-zwaar a { border-left-color: var(--rood); }
.kort .k-aandacht a { border-left-color: var(--amber); }
.kort .k-weten a { border-left-color: #94a3b8; }
.kort .k-geen a { border-left-color: #86c79a; }
.kort .k-fout a { border-left-color: var(--rood); border-style: solid solid solid dashed; }
@media (max-width: 640px) {
  /* de opening: het adres staat al in de kop; de titel blijft voor schermlezers */
  .sectie[data-id="toelaten"] > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ab-zone { font-size: 20px; }
}

/* ronde 2 (11-10-2026): de legende van het gewestplan, wat overal geldt, verordeningen per niveau, bronnen als lijst */
.laag-kleuren { list-style: none; margin: 2px 0 8px 24px; padding: 0; display: grid; gap: 3px; font-size: 12px; }
.laag-kleuren li { display: flex; gap: 6px; align-items: center; line-height: 1.25; }
.kleurblok { flex: 0 0 14px; height: 10px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, .15); }
.altijd { margin: 10px 0 0; }
.altijd > summary { cursor: pointer; padding: 10px 14px; border-radius: 12px; background: var(--chip); color: var(--blauw-donker);
                    font-size: 14px; font-weight: 600; list-style: none; }
.altijd > summary::-webkit-details-marker { display: none; }
.altijd > summary::before { content: "+ "; } .altijd[open] > summary::before { content: "– "; }
.altijd .antwoord { margin-top: 8px; }
.niveaus { display: grid; gap: 8px; margin: 12px 0; }
.niveau { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; }
.niveau > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: var(--nacht); list-style: none; }
.niveau > summary::-webkit-details-marker { display: none; }
.niveau > summary span { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--chip);
                         color: var(--blauw-donker); font-size: 12px; }
.niveau .lijstrijen { margin: 0 0 6px; }
.lijstrijen { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 0; background: var(--vlak); border-radius: 12px;
              border: 1px solid var(--lijn); overflow: hidden; }
.niveau .lijstrijen { border: 0; border-top: 1px solid var(--lijn); border-radius: 0; }
.lijstrijen li { display: grid; gap: 2px; padding: 10px 16px; border-top: 1px solid var(--lijn); overflow-wrap: anywhere; }
.lijstrijen li:first-child { border-top: 0; }
.lr-label { font-size: 13px; color: var(--inkt-2); }
.lr-waarde { color: var(--inkt); font-weight: 600; line-height: 1.45; }
.lr-meer { font-size: 12px; color: var(--zacht); line-height: 1.4; }
/* een artikel van de bouwcode: de titel op één regel, het plusteken ernaast, de tekst over de volle breedte */
.antwoord.artikel summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.antwoord.artikel summary::after { margin-top: 0; }
.antwoord.artikel .a-kern { padding-right: 0; }
.antwoord.artikel > p { padding: 0 16px 14px; }

/* de rekening in twee delen (11-10-2026): een rij zonder bedrag is de kop van een deel */
.reken-rekening tr:has(td:last-child:empty) td { padding-top: 16px; font-family: var(--kop); font-weight: 700; color: var(--nacht);
                                                 background: var(--achter); }
/* de huisstijl van een kantoor (12-10-2026): het logo op een wit vlak (elk logo leesbaar op elke kleur), klein "met
   Perceelscan" erbij, en het contact onderaan; de kleuren zelf komen uit /r/<link>/huisstijl.css */
.kantoor-merk { gap: 10px; }
.kantoor-merk .kantoorlogo { display: block; height: 34px; width: auto; max-width: 180px; object-fit: contain;
  background: #fff; border-radius: 6px; padding: 3px 7px; }
.kantoor-merk b { border-left: 0; padding-left: 0; }
.met-perceelscan { font-size: 11px; opacity: .8; white-space: nowrap; }
.kantoor { margin: 18px 0 8px; padding: 16px 18px; border: 1px solid var(--lijn, #e2e8f0); border-radius: 12px;
  background: #fff; }
.kantoor h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); margin: 0 0 6px; }
.kantoor-naam { font-weight: 700; font-size: 17px; margin: 0 0 8px; }
.kantoor ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.kantoor li { display: flex; gap: 10px; font-size: 14px; }
.kantoor li span { min-width: 72px; color: var(--zacht); }
.gemaakt-met { font-size: 12px; color: var(--zacht); margin: 0; }
@media (max-width: 700px) { .kantoor-merk .kantoorlogo { height: 28px; max-width: 130px; } .met-perceelscan { display: none; } }
.keuze-regel { font-size: 12px; color: var(--zacht); }
/* mobiel (14-10-2026, Lout: "het is nog iets te onduidelijk dat er verschillende secties zijn"): 1/13 boven elke sectie,
   onder de strook hoe ver je bent, de strook vervaagt waar nog hoofdstukken staan, en vegen wisselt van sectie (rapport.js:
   de sectie volgt de vinger en de volgende schuift binnen); de eerste keer een hint en een duwtje */
.van { opacity: .7; }
@media (max-width: 1023px) {
  body.met-kaart .inhoud { background-image: linear-gradient(var(--amber), var(--amber)); background-repeat: no-repeat;
                           background-position: left bottom; background-size: var(--voortgang, 0%) 3px; }
  body.met-kaart .inhoud.meer-rechts { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
                                       mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  body.met-kaart .inhoud.meer-links { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
                                      mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
  body.met-kaart .inhoud.meer-links.meer-rechts {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
  body.met-kaart .paneel { touch-action: pan-y pinch-zoom; overflow-x: clip; }
  body.met-kaart .sectie.actief { transition: transform .22s ease; }
  body.met-kaart .sectie.in-volgende { animation: in-rechts .28s cubic-bezier(.2, .7, .2, 1); }
  body.met-kaart .sectie.in-vorige { animation: in-links .28s cubic-bezier(.2, .7, .2, 1); }
  body.met-kaart .sectie.duw { animation: duw 1.1s ease-in-out .2s 1; }
}
@keyframes in-rechts { from { transform: translateX(40%); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes in-links { from { transform: translateX(-40%); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes duw { 0%, 100% { transform: none; } 35% { transform: translateX(-34px); } 60% { transform: translateX(6px); } }
.veeg-hint { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 40; transform: translateX(-50%);
             display: inline-flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 48px);
             padding: 11px 18px; border-radius: 999px; background: var(--nacht); color: #fff; font-size: 14px; font-weight: 600;
             box-shadow: 0 10px 28px rgba(0, 26, 58, .35); transition: opacity .3s ease; cursor: pointer; }
.veeg-hint.weg { opacity: 0; }
.veeg-pijl { display: inline-block; color: var(--amber); font-size: 18px; line-height: 1; animation: wijs 1.2s ease-in-out infinite; }
@keyframes wijs { 50% { transform: translateX(-6px); } }
@media (prefers-reduced-motion: reduce) {
  body.met-kaart .sectie.in-volgende, body.met-kaart .sectie.in-vorige, body.met-kaart .sectie.duw, .veeg-pijl { animation: none; }
}
/* het voorbeeldrapport van de site (14-10-2026): de strook in de kop, en op een gsm de knop naar de voorproef onderaan */
a.merk { color: #fff; text-decoration: none; }
.voorbeeld-strook { flex: 1 1 100%; margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08);
                    color: var(--op-donker); font-size: 14px; line-height: 1.45; }
.voorbeeld-strook b { color: var(--amber); margin-right: 4px; }
.voorbeeld-cta { display: none; }
@media (max-width: 1023px) {
  .voorbeeld-cta { display: flex; justify-content: center; margin: 0 16px 24px; min-height: 52px; font-size: 16px; }
  body.cta-js .voorbeeld-cta { position: fixed; left: 16px; right: 16px; z-index: 30; margin: 0;
                   bottom: max(12px, env(safe-area-inset-bottom)); box-shadow: 0 8px 24px rgba(0, 26, 58, .3);
                   visibility: hidden; opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s, visibility .2s; }
  body.cta-js.cta-aan .voorbeeld-cta { visibility: visible; opacity: 1; transform: none; }
}

/* mobiel, blok 2 (16-10-2026): het rapport op een gsm */
/* de vergelijkende tabel: op een smal scherm per maat een blok met de drie waarden onder elkaar, elk met de naam van
   zijn kolom */
@media (max-width: 560px) {
  .vergelijkvak { overflow-x: visible; }
  .vergelijk { min-width: 0; }
  .vergelijk thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vergelijk tbody tr { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
  .vergelijk tbody tr:last-child { border-bottom: 0; }
  .vergelijk tbody th { padding: 0 0 2px; border: 0; color: var(--nacht); font-weight: 600; }
  .vergelijk td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 12px;
                  border: 0; border-radius: 8px; white-space: nowrap; background: var(--achter); }
  .vergelijk td::before { content: attr(data-label); font-size: 13px; font-weight: 400; color: var(--inkt-2);
                          white-space: normal; text-align: left; }
}
/* de kop op een gsm: het merk en de knoppen op één regel, het adres eronder (het eerste scherm toont zo meer rapport) */
@media (max-width: 640px) {
  .merk { order: 0; } .acties { order: 1; margin-left: auto; } .adres { order: 2; } .voorbeeld-strook { order: 3; }
  .knop .lang { display: none; }
}
.knop .kort { display: none; }
@media (max-width: 640px) { .knop .kort { display: inline; } }
@media (max-width: 640px) { .leaflet-control-attribution { font-size: 10px; } }
@media (max-width: 480px) {
  .merk:not(.kantoor-merk) img { display: none; }
  .merk:not(.kantoor-merk) b { padding-left: 0; border-left: 0; }
  .pijlen .pijl.home span { display: none; }
}
/* de stand in woorden naast de kleur: in het kort en bij de hindernissen */
.k-ernst { font-weight: 600; } .k-ernst::before { content: " · "; font-weight: 400; color: var(--zacht); }
.k-zwaar .k-ernst, .k-fout .k-ernst { color: var(--rood); } .k-aandacht .k-ernst { color: var(--amber-donker); }
.chip.c-zwaar::before { content: "!"; display: inline-grid; place-items: center; flex: 0 0 16px; height: 16px; margin-right: 6px;
                        border-radius: 50%; background: var(--rood); color: #fff; font-size: 11px; font-weight: 700; }
/* een vinger is geen muis: alles om op te tikken minstens 44 px */
@media (pointer: coarse) {
  .knop, .verder a, .melding-knoppen .knop { min-height: 44px; }
  .pijlen .pijl { min-width: 44px; height: 44px; }
  body.met-kaart .inhoud a { min-height: 44px; }
  .chip { min-height: 40px; }
  .meld { display: inline-flex; align-items: center; min-height: 44px; }
  .h-naar { display: inline-flex; align-items: center; min-height: 44px; }
  .lagen-kop { min-height: 44px; }
  .laag-rij { min-height: 40px; align-items: center; }
  .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
}
@media (pointer: coarse) and (max-width: 1023px) {
  body.met-kaart .inhoud { padding-top: 6px; padding-bottom: 6px; }
}
/* iOS zoomt in op een veld met tekst kleiner dan 16 px */
@media (max-width: 1023px) {
  .reken-invoer input, .reken-invoer select, .melding-form textarea { font-size: 16px; }
}
/* met één vinger scrolt de pagina; een veeg over de kaart zegt hoe je ze verschuift */
.vinger-uitleg { position: absolute; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
                 background: rgba(0, 26, 58, .55); color: #fff; font-size: 15px; font-weight: 600; text-align: center;
                 opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.vinger-uitleg.zichtbaar { opacity: 1; }
/* de avvertenza van een Italiaans dossier achter een info-icoon (25-10-2026): een tik, een klik of Enter/spatie klapt
   haar open; de pdf toont ze voluit */
.avvertenza { margin: 14px 0; font-size: 14px; }
.avvertenza > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
                        min-height: 44px; padding: 4px 12px 4px 6px; border-radius: 999px; color: var(--inkt-2); }
.avvertenza > summary::-webkit-details-marker { display: none; }
.avvertenza > summary:hover, .avvertenza[open] > summary { background: var(--chip); }
.avvertenza .info-i { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
                      border: 1.5px solid var(--blauw); color: var(--blauw); font: 700 13px/1 Georgia, serif;
                      font-style: italic; }
.avvertenza[open] .info-i { background: var(--blauw); color: #fff; }
.avvertenza > p { margin: 8px 0 0; padding: 12px 14px; border-left: 3px solid var(--blauw); background: var(--vlak);
                  border-radius: 0 10px 10px 0; color: var(--inkt-2); font-size: 13px; line-height: 1.55; }
.voet .avvertenza > p { background: transparent; }
@media print { .avvertenza::details-content { content-visibility: visible; display: block; } }

/* de blokken van gs-6 (weergave/blok.py, 26-10-2026): tegels naast elkaar met het gewest, een tabel, invoer en berekening */
.bk { margin: 18px 0; }
.bk-kop { font-size: 15px; margin: 0 0 8px; }
.bk-naar { font-size: 12.5px; color: var(--blauw); text-decoration: none; font-weight: 600; }
.bk-noot { font-size: 13px; color: var(--zacht); }
.bk-tab, .bk-uitkomst { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--vlak); }
.bk-tab th, .bk-tab td, .bk-uitkomst th, .bk-uitkomst td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.bk-tab thead th { font-size: 12.5px; font-weight: 400; color: var(--zacht); }
.bk-tab .num, .vergelijk .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-uitkomst th { font-weight: 600; color: var(--inkt); }
.bk-uitkomst th small { display: block; font-weight: 400; color: var(--zacht); font-size: 12.5px; margin-top: 2px; }
.bk-uitkomst td { white-space: nowrap; font-weight: 600; color: var(--marine); text-align: right; font-size: 15px; }
.bk-invoer { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0 0 12px; }
.bk-veld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--inkt-2); }
.bk-in { display: flex; align-items: center; gap: 6px; }
.bk-in input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 10px; }
.bk-tarieven { margin: 10px 0; }
.bk-tarieven summary { cursor: pointer; font-weight: 600; font-size: 14px; }
@media (max-width: 560px) {
  .bk-uitkomst th, .bk-uitkomst td { display: block; text-align: left; border: 0; padding: 4px 0; white-space: normal; }
  .bk-uitkomst tr { display: block; border-bottom: 1px solid var(--lijn); padding: 6px 0; }
  .bk-tab:not(.tk) thead { display: none; }
  .bk-tab:not(.tk) tr { display: block; border-bottom: 1px solid var(--lijn); padding: 6px 0; }
  .bk-tab:not(.tk) td { display: block; border: 0; padding: 2px 0; }
  .bk-tab:not(.tk) td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; color: var(--zacht); font-size: 12px; }
}

/* rustiger en overal hetzelfde (26-10-2026): de tegels van de drie landen (overzicht.tegel), het cijfer zelf in zijn kleur
   met een symbool (▲ gunstiger, ● rond het gemiddelde, ▼ minder gunstig; contrast minstens AA op wit en op de tegel), één
   legende per blok, Uitleg en Bron in de voet van het blok, een ontbrekend cijfer als streepje. 24 px tussen blokken, 8 px
   binnen een blok; geen randen links, geen schaduw. */
.ov-blok, .bk { margin: 24px 0; }
.tg-rij { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
          grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tg { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--achter); }
@media (min-width: 1024px) { body.met-kaart .tg { background: var(--vlak); } }
.blok-voet .uitleg, .blok-voet .bron { margin-top: 0; }
.tg-label { font-size: 13px; line-height: 1.35; color: var(--inkt-2); }
.tg-getal { font-family: var(--kop); font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--nacht);
            font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tg-getal small { font-family: "IBM Plex Sans", Arial, sans-serif; font-size: 13px; font-weight: 400; margin-left: 3px; }
.tg-naast { font-size: 12.5px; color: var(--inkt-2); }
.tg-onder { font-size: 12px; line-height: 1.35; color: var(--zacht); }
.kc { white-space: nowrap; }
.kc i { font-style: normal; font-size: .62em; margin-right: 4px; vertical-align: .14em; }
.kl-beter { color: var(--groen); } .kl-gemiddeld { color: var(--amber-donker); } .kl-minder { color: var(--rood); }
.blok-voet { margin-top: 8px; } .blok-voet::after { content: ""; display: block; clear: both; }
.bv-woorden { float: right; display: flex; flex-wrap: wrap; gap: 2px 18px; margin-left: 16px; max-width: 100%; }
.bv-woorden:has(.uitleg[open]) { float: none; margin: 0 0 4px; }
.legende { margin: 0; font-size: 12px; line-height: 1.45; color: var(--zacht); }
.geen { color: var(--zacht); font-weight: 400; }
.lu { display: inline-flex; flex-direction: column; }
.lu-cijfer { display: block; font-weight: 600; } .lu-bij { display: block; font-size: 12.5px; font-weight: 400; color: var(--zacht); }
.regels-kop, .bk-kop, .vz-kop { font-weight: 600; }
.ov-blok > .regels-kop, .bk > .bk-kop { margin: 0 0 8px; }
.tegels + .blok-voet { margin-top: -6px; }
@media (max-width: 560px) {
  .tg-rij { grid-template-columns: 1fr 1fr; }
  .tg { padding: 10px 12px; }
  .tg-getal { font-size: 19px; }
}
/* calcolo indicativo (it-2) */
.calcolo{margin:18px 0 8px;padding:14px;border:1px solid var(--lijn);border-radius:12px;background:var(--vlak)}
.calcolo form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.calcolo label{display:grid;gap:4px;font-size:14px}.calcolo input{font:inherit;padding:8px;border:1px solid var(--lijn);border-radius:8px}
.calcolo td:nth-child(3){white-space:normal;font-weight:400;font-size:13px;text-align:left}
/* overzichtelijker (26-10-2026, weergave/overzicht.py): een opsomming als lijst (naam links, kenmerk klein en grijs,
   afstand rechts; de telling als kop; vanaf zes de eerste vijf en "Toon alle"), de voorzieningen als raster, de rijen
   van de leefomgeving per groep onder een kleine tussenkop, en de uitleg achter het woord Uitleg zoals het woord Bron.
   Geen randen links, geen schaduw: rustig. Namen worden nooit midden in het woord afgebroken. */
.ov-lijst { font-weight: 400; hyphens: none; overflow-wrap: normal; word-break: normal; }
.ov-kop { margin: 0 0 4px; font-weight: 600; color: var(--inkt); }
.ov-items { list-style: none; margin: 0; padding: 0; }
.ov-items li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0;
               border-bottom: 1px solid var(--lijn); font-size: 14px; line-height: 1.4; color: var(--inkt); }
.ov-items li:last-child { border-bottom: 0; }
.ov-naam { min-width: 0; }
.ov-naam small { margin-left: 4px; font-size: 12.5px; color: var(--zacht); }
.ov-maat { flex: none; color: var(--inkt-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-meer { margin: 2px 0 0; }
.ov-meer > summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; list-style: none;
                     font-size: 13.5px; font-weight: 600; color: var(--blauw-donker); }
.ov-meer > summary b { font-weight: 400; margin-left: 2px; }
.ov-meer > summary::-webkit-details-marker { display: none; }
.ov-meer .ov-minder, .ov-meer[open] .ov-toon { display: none; }
.ov-meer[open] .ov-minder { display: inline; }
.ov-groep { margin: 24px 0 8px; font-family: inherit; font-weight: 600; font-size: 15px; color: var(--nacht); }
.ov-rijen { margin: 0; }
.ov-rij { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 16px; padding: 10px 0;
          border-bottom: 1px solid var(--lijn); }
.ov-rij:last-child { border-bottom: 0; }
.ov-rij dt { color: var(--inkt-2); font-size: 14.5px; line-height: 1.4; }
.ov-rij dd { margin: 0; font-weight: 600; font-size: 14.5px; line-height: 1.45; color: var(--inkt); overflow-wrap: break-word; }
.ov-rij dd + dd { grid-column: 2; }
.ov-voorz { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 8px;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ov-voorz li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--achter);
               hyphens: none; overflow-wrap: normal; }
.ov-v-naam { font-size: 13px; color: var(--inkt-2); line-height: 1.3; }
.ov-v-getal { font-family: var(--kop); font-weight: 700; font-size: 20px; color: var(--nacht); line-height: 1.15;
               font-variant-numeric: tabular-nums; }
.ov-v-onder { font-size: 12.5px; color: var(--zacht); line-height: 1.35; }
.ov-voorz li.ov-nul { background: transparent; box-shadow: inset 0 0 0 1px var(--lijn); }
.ov-nul .ov-v-getal, .ov-nul .ov-v-naam, .ov-nul .ov-v-onder { color: var(--zacht); font-weight: 400; }
.ov-noot { font-size: 13px; color: var(--zacht); margin: 6px 0; }
.ov-voorz + .ov-meer > summary { margin-top: 2px; }
.ov-rijen + .regels-kop, .ov-rijen + .bk, .ov-rijen + .vergelijkvak { margin-top: 24px; }
.sectie-voet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin-top: 14px; }
.sectie-voet .bronnen { margin-top: 0; }
.uitleg { display: block; width: fit-content; max-width: 100%; font-size: 12px; color: var(--zacht); }
.uitleg > summary { display: inline-block; list-style: none; cursor: pointer; padding: 2px 0; text-decoration: underline dotted;
                    text-underline-offset: 3px; text-decoration-color: currentColor; }
.uitleg > summary::-webkit-details-marker { display: none; }
.uitleg > summary:hover, .uitleg[open] > summary { color: var(--inkt-2); }
.uitleg[open] { flex-basis: 100%; width: auto; }
.uitleg > .uitleg-tekst { margin: 6px 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--inkt-2); }
.bk .uitleg { margin-top: 8px; }
@media (pointer: coarse) {
  .uitleg > summary, .bron > summary, .ov-meer > summary { min-height: 44px; display: inline-flex; align-items: center;
    padding: 0 10px 0 0; margin: -6px 0; }
}
@media (max-width: 640px) {
  .ov-rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 12px; padding: 6px 0; }
  .ov-rij dt, .ov-rij dd { font-size: 14px; }
  .ov-rij.ov-met-lijst { grid-template-columns: 1fr; }
  .ov-rij dd + dd, .ov-rij.ov-met-lijst dd { grid-column: 1 / -1; }
  .rijen tr.ov-met-lijst td { display: block; width: auto !important; }
  .rijen tr.ov-met-lijst td:first-child { padding-bottom: 0; border-bottom: 0; }
}
@media (max-width: 480px) { .ov-voorz { grid-template-columns: 1fr 1fr; } .ov-v-getal { font-size: 18px; } }
/* de plakkende sectiebalk op een gsm (26-10-2026, static/sectiebalk.js): "14/16 · Ligging ▾" opent de inhoudstafel als
   blad, vorige en volgende ernaast; zonder script blijft de strook van vroeger */
.sb { display: none; }
@media (max-width: 1023px) {
  body.met-kaart .inhoud.met-sb { display: block; padding: 2px 6px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  body.met-kaart .met-sb .sb { display: flex; align-items: center; gap: 2px; }
  .met-sb .sb button { min-height: 44px; border: 0; background: none; color: var(--op-donker); font: inherit; cursor: pointer;
                       border-radius: 10px; }
  .met-sb .sb-pijl { flex: 0 0 44px; font-size: 22px; line-height: 1; }
  .met-sb .sb-pijl:disabled { opacity: .3; cursor: default; }
  .met-sb .sb-wat { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px;
                    font-size: 14px; font-weight: 600; color: #fff; }
  .met-sb .sb-wat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .met-sb .sb-wat b { flex: none; color: var(--amber); font-family: var(--mono); font-weight: 500; }
  body.met-kaart .met-sb .sb-blad { display: none; }
  body.met-kaart .inhoud.met-sb.open { z-index: 51; }
  body.met-kaart .met-sb.open .sb-blad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: block;
    max-height: 72vh; overflow-y: auto; padding: 14px 10px max(16px, env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0; background: var(--tafel); }
  body.met-kaart .met-sb .sb-blad .inhoud-kop, body.met-kaart .met-sb .sb-blad .groep { display: flex; }
  body.met-kaart .met-sb .sb-blad .groep { margin: 10px 10px 2px; }
  body.met-kaart .met-sb .sb-blad ol { display: block; }
  body.met-kaart .met-sb .sb-blad a { white-space: normal; border-radius: 10px; background: none; }
  body.met-kaart .met-sb .sb-blad a[aria-current="true"] { background: rgba(245, 165, 36, .16); color: #fff; }
  .sb-doek { position: fixed; inset: 0; z-index: 49; background: rgba(0, 26, 58, .45); }
  .verder a { min-height: 44px; }
}
/* een tabel met cijfers op een gsm (26-10-2026, de klasse tk: Nederland en de tabellen van een blok): per rij één regel,
   het label links, het hoofdcijfer groot rechts, de referenties klein eronder; de kop blijft voor een schermlezer */
@media (max-width: 560px) {
  .tk thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tk tbody tr, .vergelijk.tk tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; padding: 5px 0;
                                         border-bottom: 1px solid var(--lijn); }
  .tk tbody tr > :first-child { flex: 1 1 calc(100% - 120px); min-width: 0; padding: 0; border: 0; font-size: 14px;
                                color: var(--inkt); text-align: left; }
  .tk td, .vergelijk.tk td { display: block; padding: 0; border: 0; background: none; }
  .vergelijk.tk td::before, .tk td::before { content: none; }
  .tk td.hoofd { flex: 0 0 auto; margin-left: auto; padding-left: 10px; font-size: 16px; font-weight: 600; text-align: right; }
  .tk td.ref { order: 3; font-size: 12px; font-weight: 400; color: var(--zacht); }
  .tk tbody td.ref::before { content: attr(data-label) " "; }
  .tk tbody td.ref ~ td.ref::before { content: " · " attr(data-label) " "; }
  .tk tbody tr::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
}