/* Vastimi — uitgifteplatform van Van Ameyde Waarderingen.
   Vormgeving volgt het Van Ameyde Brand Book (maart 2025) en de look van
   vanameydewaarderingen.com: Navy Blue #07017E als hoofdkleur en tekstkleur,
   Turquoise #00D8B9 als accent (knoppen, iconen, uitgelichte woorden), de
   tinten #E6E5F2 en 5% navy als achtergrond, Noto Serif Bold voor koppen,
   Open Sans voor tekst, rechte hoeken en zachte schaduwen. De iconen staan in
   assets/iconen/ en komen uit hetzelfde brandbook. */

:root{
  --bg:#F3F2F9;--bg2:#fff;--bg3:#E6E5F2;--bg4:#D6D4EA;
  --text:#07017e;--text2:#2A2775;--text3:#6F6DA0;
  --accent:#07017e;--accent2:#050158;--accent3:#0a05a0;
  --teal:#00D8B9;--teal2:#00AF96;--al:#E9E8F9;
  --green:#157539;--gbg:#E2F2E8;--red:#B23A28;--rbg:#F8E6E1;
  --amber:#805700;--abg:#FFF1CC;
  --border:rgba(7,1,126,.13);--border2:rgba(7,1,126,.07);
  --sh:0 12px 34px rgba(7,1,126,.08);
  --sh2:0 18px 48px rgba(7,1,126,.14);
  --r:0;--rl:0;
  --ease:cubic-bezier(.32,.72,.28,1);
  --f:'Open Sans',sans-serif;--fs:'Noto Serif',serif;
  --breed:1760px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
*:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--bg);color:var(--text2);font-size:15px;line-height:1.65;
  min-height:100vh;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
img,svg,video,canvas{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5{font-family:var(--fs);color:var(--text);font-weight:700;line-height:1.2}
.hidden,[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-48px;z-index:2000;background:var(--accent);color:#fff;padding:8px 14px;border-radius:var(--r);font-size:13px;transition:top .15s}
.skip-link:focus{top:8px}

/* ── LAYOUT ── */
/* Paginavullend, met wat lucht links en rechts (beheerder 05-10-2026). */
.wrap{width:100%;max-width:var(--breed);margin:0 auto;padding:0 clamp(24px,4vw,72px)}
.sectie{padding:56px 0}
.sectie-wit{background:var(--bg2)}
.sectie-lav{background:var(--bg3)}
.sectie-kop{max-width:720px;margin-bottom:32px}
.sectie-kop h2{font-size:32px;margin-bottom:10px}
.sectie-kop p{font-size:17px;color:var(--text2)}
.rij{display:flex;gap:40px;align-items:center;flex-wrap:wrap}
.rij>*{flex:1 1 320px;min-width:0}

/* ── KNOPPEN ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 20px;
  border-radius:var(--r);font-family:var(--f);font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid transparent;transition:all .2s var(--ease);white-space:nowrap;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2);color:#fff}
.btn-secondary{background:var(--bg2);color:var(--accent);border-color:var(--border)}
.btn-secondary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-teal{background:var(--teal);color:var(--accent2)}
.btn-teal:hover{background:var(--teal2);color:#fff}
.btn-licht{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-licht:hover{background:#fff;color:var(--accent);border-color:#fff}
.btn-ghost{background:transparent;color:var(--text2);padding:8px 12px}
.btn-ghost:hover{background:var(--bg3);color:var(--text)}
.btn-sm{padding:7px 14px;font-size:13px}
.btn-blok{width:100%}
.btn[disabled],.btn.bezig{opacity:.55;pointer-events:none}
.link-pijl{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--accent)}

/* ── HEADER ── */
.topbar{background:var(--accent2);color:rgba(255,255,255,.86);font-size:13px}
.topbar .wrap{display:flex;justify-content:flex-end;gap:26px;padding-top:9px;padding-bottom:9px}
.topbar a{color:inherit}
.topbar a:hover{color:var(--teal);text-decoration:none}
.kop{position:sticky;top:0;z-index:60;background:var(--bg2);box-shadow:var(--sh)}
.kop .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px}
.merk{display:flex;flex-direction:column;line-height:1.15}
.merk:hover{text-decoration:none}
.merk-naam{font-family:var(--fs);font-size:24px;font-weight:600;color:var(--accent)}
.merk-sub{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--text3)}
.hoofdnav{display:flex;align-items:center;gap:28px}
.hoofdnav a.navlink{color:var(--text);font-size:14.5px;font-weight:600;padding:6px 0;border-bottom:2px solid transparent}
.hoofdnav a.navlink:hover{color:var(--accent);text-decoration:none}
.hoofdnav a.navlink.actief{color:var(--accent);border-color:var(--teal)}
.kop-acties{display:flex;align-items:center;gap:10px}

/* Afdelingen in de balk klappen open. Op de muis met hover, met het toetsenbord
   via focus, en op een aanraakscherm met het pijltje ernaast — daar bestaat
   hover niet en zou het menu anders onbereikbaar zijn. */
.hoofdnav .navgroep{position:relative;display:flex;align-items:center;gap:2px}
.navpijl{background:none;border:none;padding:4px 0 4px 2px;color:var(--text3);cursor:pointer;
  display:flex;align-items:center;line-height:0}
.navgroep:hover .navpijl,.navgroep.open .navpijl{color:var(--accent)}
.navgroep.open .navpijl svg{transform:rotate(180deg)}
.navpijl svg{transition:transform .15s ease}
.navmenu{position:absolute;top:calc(100% + 12px);left:-14px;min-width:216px;background:var(--bg2);
  border:1px solid var(--border);border-radius:var(--rl);box-shadow:0 12px 28px rgba(16,16,42,.13);
  padding:7px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .13s ease,
  transform .13s ease;z-index:60}
.navgroep:hover .navmenu,.navgroep:focus-within .navmenu,.navgroep.open .navmenu{
  opacity:1;visibility:visible;transform:translateY(0)}
/* Onzichtbare brug naar het menu, anders valt het dicht zodra de muis de gap in gaat. */
.navgroep:hover .navmenu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.navmenu a{display:block;padding:9px 12px;border-radius:var(--r);font-size:14px;font-weight:600;
  color:var(--text2);white-space:nowrap}
.navmenu a:hover{background:var(--bg3);color:var(--accent);text-decoration:none}
.navmenu a.actief{color:var(--accent);background:var(--al)}
.nav-inzage{display:inline-block;margin-left:7px;background:var(--abg);color:var(--amber);
  border-radius:99px;padding:1px 7px;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  vertical-align:middle;text-transform:lowercase}
.mobielmenu .mm-groep{border-bottom:1px solid var(--border2);padding:6px 0 8px}
.mobielmenu .mm-kop{display:block;padding:9px 0 3px;font-size:12px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.06em}
/* :not(.btn) erbij zodat deze regel het wint van .mobielmenu a:not(.btn)
   verderop; anders vallen de inspringing en het weglaten van de scheidingslijn
   weg, en is niet meer te zien dat deze drie onder het kopje horen. */
.mobielmenu .mm-groep a:not(.btn){padding:9px 0 9px 14px;border-bottom:none;font-weight:600}

/* Het eigen dashboard op de homepage. */
.eigen-dashboard{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  background:var(--bg2);border:1px solid var(--border);border-left:4px solid var(--teal);
  border-radius:var(--rl);padding:24px 26px;box-shadow:var(--sh)}
.eigen-dashboard h2{font-size:22px;margin-bottom:4px}
.eigen-dashboard p{color:var(--text2);margin:0;max-width:62ch}
.eigen-dashboard-knoppen{display:flex;gap:10px;flex-wrap:wrap}
.hamburger{display:none;background:none;border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;cursor:pointer;color:var(--accent)}
.mobielmenu{display:none;background:var(--bg2);border-top:1px solid var(--border2);box-shadow:var(--sh)}
.mobielmenu.open{display:block}
/* display:block hoort hier expliciet te staan. Deze .wrap zit binnen .kop, en
   .kop .wrap is flex met dezelfde specificiteit; zonder deze regel erven de
   menu-items die flex en komen ze naast elkaar te staan, half buiten beeld.
   Het menu kan ook langer worden dan het scherm zodra er meer afdelingen open
   gaan, dus het schuift mee in plaats van onderaan af te breken. */
.mobielmenu .wrap{display:block;padding-top:16px;padding-bottom:0;
  max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain}
/* :not(.btn) — anders wint deze regel van .btn-primary op kleur en padding, en
   staat "Inloggen" in donkerblauw op een donkerblauwe knop. */
.mobielmenu a:not(.btn){display:block;padding:11px 0;font-weight:600;color:var(--text);
  border-bottom:1px solid var(--border2)}
/* Registreren en Inloggen blijven onderaan het menu staan. Met drie afdelingen
   is de lijst langer dan een telefoonscherm (808 px inhoud op een venster van
   780), en vielen deze twee eronder: je moest binnen het menu scrollen om ze te
   vinden, zonder dat iets liet zien dat daar nog iets zat. Vandaar sticky en
   niet gewoon onderaan de lijst — dat blijft goed gaan als er een vierde
   afdeling bij komt. De rand bovenlangs laat zien dat de lijst erachter
   doorloopt. Past het menu wel op het scherm, dan doet sticky niets. */
.mobielmenu .mm-acties{display:flex;gap:10px;position:sticky;bottom:0;
  margin-top:16px;padding:14px 0 18px;background:var(--bg2);
  border-top:1px solid var(--border2)}
.mobielmenu .mm-acties .btn{flex:1}

/* ── HERO ── */
.hero{position:relative;background:linear-gradient(160deg,var(--accent2) 0%,var(--accent) 55%,var(--accent3) 100%);color:#fff;overflow:hidden}
.hero::after{content:'';position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:72px 72px;transform:skewY(-6deg);transform-origin:top left}
.hero .wrap{position:relative;z-index:1;padding-top:72px;padding-bottom:72px}
.hero h1{color:#fff;font-size:46px;line-height:1.15;margin-bottom:14px}
.hero p.lead{color:rgba(255,255,255,.88);font-size:18px;max-width:620px}
.hero-mid{text-align:center}
.hero-mid p.lead{margin:0 auto}
/* Links in een donkere balk: het gewone donkerblauw valt daar weg. */
.hero p a{color:#fff;text-decoration:underline}
.hero-klein .wrap{padding-top:48px;padding-bottom:48px}
.hero-klein h1{font-size:36px}

/* ── BANNER MET LUCHTFOTO ──
   De luchtfoto's komen van PDOK (Beeldmateriaal Nederland, open data) en staan
   als geoptimaliseerde JPEG in assets/beeld/, zodat de banner niet afhankelijk
   is van een externe dienst. Twee varianten:
   .hero-panorama — foto over de volle breedte met een blauwe sluier eroverheen
   .hero-mozaiek  — de gewone blauwe banner met vier luchtfoto's rechts */
.hero-foto{isolation:isolate}
.hero-foto::after{display:none}
.hero-foto>.foto{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block}
.hero-foto>.sluier{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-foto .wrap{z-index:2}
.beeldbron{position:absolute;right:14px;bottom:9px;z-index:3;font-size:10.5px;
  letter-spacing:.02em;color:rgba(255,255,255,.6)}

.hero-panorama>.sluier{background:linear-gradient(100deg,
  rgba(5,1,88,.94) 0%,rgba(5,1,88,.86) 34%,rgba(7,1,126,.44) 62%,rgba(7,1,126,.14) 100%)}
.hero-panorama .wrap{padding-top:82px;padding-bottom:82px}
.hero-panorama h1{max-width:15ch}
.hero-streep{width:54px;height:3px;background:var(--teal);border-radius:2px;margin-bottom:20px}

.mozaiek{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mozaiek figure{position:relative;border-radius:var(--rl);overflow:hidden;aspect-ratio:1/1;
  box-shadow:0 12px 34px rgba(2,0,40,.34)}
.mozaiek figure:nth-child(1){transform:translateY(-14px)}
.mozaiek figure:nth-child(4){transform:translateY(14px)}
.mozaiek img{display:block;width:100%;height:100%;object-fit:cover}
.mozaiek svg{position:absolute;inset:0;width:100%;height:100%}

/* ── ZOEKBALK ── */
.zoekbalk{margin-top:30px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--rl);padding:18px;display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;
  backdrop-filter:blur(6px)}
.hero-mid .zoekbalk{justify-content:center;text-align:left}
.zoekbalk label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:5px}
.zoekbalk .zv{flex:1 1 150px;min-width:0}
.zoekbalk .zv-kort{flex:0 1 130px}
.zoekbalk input,.zoekbalk select{width:100%;padding:11px 13px;border:1px solid transparent;border-radius:var(--r);
  background:#fff;font-family:var(--f);font-size:15px;color:var(--text);outline:none}
.zoekbalk input:focus,.zoekbalk select:focus{box-shadow:0 0 0 3px rgba(0,216,185,.45)}
.zoekbalk .zv-knop{flex:0 0 auto}

/* ── FORMULIEREN ── */
.fg{margin-bottom:14px}
.fg label,.lbl{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:5px;letter-spacing:.05em;text-transform:uppercase}
.fg input,.fg select,.fg textarea,.inp{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--bg2);font-family:var(--f);font-size:15px;color:var(--text);outline:none;transition:border-color .15s;-webkit-appearance:none}
.fg input:focus,.fg select:focus,.fg textarea:focus,.inp:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(7,1,126,.10)}
.fg textarea{resize:vertical;min-height:120px;line-height:1.6}
.fg select,select.inp{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2307017e'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.fg-err{font-size:12px;color:var(--red);margin-top:4px}
.fg-hint{font-size:12px;color:var(--text3);margin-top:4px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.fg-full{grid-column:1/-1}
.check{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--text2);cursor:pointer;margin-bottom:14px}
.check input{margin-top:3px;flex-shrink:0;width:16px;height:16px;accent-color:var(--accent)}
.melding{border-radius:var(--r);padding:11px 14px;font-size:13.5px;margin-bottom:16px;line-height:1.55}
.melding-fout{background:var(--rbg);color:var(--red);border:1px solid rgba(178,58,40,.2)}
.melding-ok{background:var(--gbg);color:var(--green);border:1px solid rgba(21,117,57,.2)}
.melding-info{background:var(--al);color:var(--accent);border:1px solid rgba(7,1,126,.18)}
.melding-waarschuwing{background:var(--abg);color:var(--amber);border:1px solid rgba(128,87,0,.2)}

/* ── KAARTEN / CARDS ── */
.card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);box-shadow:var(--sh)}
.card-body{padding:22px 24px}
.smal{max-width:520px;margin:0 auto}
.matig{max-width:820px;margin:0 auto}

/* ── KAVELKAARTEN ── */
.kavelgrid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.kavel{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);overflow:hidden;
  box-shadow:var(--sh);display:flex;flex-direction:column;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.kavel:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.kavel-beeld{position:relative;height:184px;background:var(--bg3);overflow:hidden}
.kavel-beeld img{width:100%;height:100%;object-fit:cover;display:block}
/* Luchtfoto met de kadastrale grens erop: de SVG ligt precies over de foto,
   dus beide vullen hetzelfde vlak. De grens krijgt een donkere onderrand,
   anders valt hij op een lichte akker weg. */
.perceelkaartje{position:relative;width:100%;height:100%;background:var(--bg3)}
.perceelkaartje img{width:100%;height:100%;object-fit:cover;display:block}
.perceelkaartje svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.perceelrand-onder{fill:none;stroke:#050158;stroke-width:6;stroke-opacity:.55;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.perceelrand{fill:rgba(7,1,126,.20);stroke:#00D8B9;stroke-width:2.5;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kavel-beeld .badge{position:absolute;right:14px;top:14px}
.kavel-body{padding:20px 22px;display:flex;flex-direction:column;gap:14px;flex:1}
.kavel-body h3{font-size:19px}
.kavel-plaats{font-size:13px;color:var(--text3);margin-top:2px}
.kavel-kenmerken{width:100%;font-size:13.5px;border-collapse:collapse}
.kavel-kenmerken td{padding:4px 0;vertical-align:top}
.kavel-kenmerken td:first-child{color:var(--text2);font-weight:600;width:48%;padding-right:10px}
.kavel-kenmerken td:last-child{color:var(--text)}
.kavel-data{background:var(--bg);border-radius:var(--r);padding:11px 14px;font-size:13px}
.kavel-data table{width:100%;border-collapse:collapse}
.kavel-data td{padding:2px 0}
.kavel-data td:first-child{color:var(--text2)}
.kavel-data td:last-child{text-align:right;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.kavel-voet{margin-top:auto}

/* Opdrachtgever bovenaan een kaartje of de objectpagina: logo, naam en klein
   het objectnummer. */
.og-kop{display:flex;align-items:center;gap:10px;min-height:28px;margin-bottom:6px}
.og-kop img{max-height:28px;max-width:190px;width:auto;height:auto;object-fit:contain}
.og-naam{font-size:13px;font-weight:700;color:var(--accent)}
.og-nummer{margin-left:auto;font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums;white-space:nowrap}
.og-kop-groot{margin-bottom:10px}
.og-kop-groot img{max-height:60px;max-width:340px}
.og-kop-groot .og-naam{font-size:15px}
.kavel-body h3.kavel-ligging{font-size:18px}
.kavel-kop{display:flex;align-items:stretch;justify-content:space-between;gap:14px;min-height:64px}
.kavel-adres{min-width:0;flex:1 1 auto}
.kavel-adres h3.kavel-ligging{margin:0;line-height:1.25}
.kavel-stad{font-size:15px;color:var(--text);margin-top:2px}
.kavel-adres .og-nummer{margin:6px 0 0;display:block}
.kavel-logo{flex:0 0 46%;max-width:46%;display:flex;align-items:center;justify-content:flex-end}
.kavel-logo img{display:block;width:100%;height:auto;max-height:72px;object-fit:contain;object-position:right center}
.kavel-logo .og-naam{text-align:right}

/* De rode pijl van de ontsluiting, op het statische kaartje. */
.ontsluiting-pijl{fill:#E02020;stroke:#fff;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:600;line-height:1.4}
.badge-open{background:var(--gbg);color:var(--green)}
.badge-gesloten{background:var(--abg);color:var(--amber)}
.badge-gegund{background:var(--al);color:var(--accent)}
.badge-concept{background:var(--bg3);color:var(--text2)}
.badge-ingetrokken{background:var(--rbg);color:var(--red)}
.badge-teal{background:rgba(0,216,185,.16);color:var(--teal2)}

/* ── FILTERS ── */
/* De filterbalk boven het aanbod (afdeling, opdrachtgever, provincie, fase) is
   vervallen: het aanbod wordt nu eerst per soort gesplitst en daarbinnen wordt
   op provincie en project geselecteerd, in de zoekbalk (beheerder 08-09-2026).
   Wat ervan over is, is de regel met de telling boven de lijst. */
.aanbod-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin:26px 0 16px}
.filter-telling{font-size:13px;color:var(--text3)}

/* ── BESCHIKBAARHEIDSSTROOK ──
   De strook op de storingenpagina. Drie toestanden, en ze verschillen niet
   alleen in kleur: een storing is een blokje van volle hoogte met arcering,
   goed is een laag balkje, niet gemeten is leeg met een stippellijn eronder.
   Groen en rood liggen voor wie kleurenblind is dicht bij elkaar, dus de vorm
   moet het verhaal ook zonder kleur vertellen. */
.st-blok{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);
  box-shadow:var(--sh);padding:20px 22px}
.st-kop{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin-bottom:14px}
.st-kop h3{font-size:18px}
.st-legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--text2)}
.st-legenda-item{display:inline-flex;align-items:center;gap:6px}
.st-legenda .st-vak{flex:0 0 10px;width:10px;height:14px}
.st-rij{display:flex;align-items:flex-end;gap:12px;margin-bottom:10px}
.st-naam{flex:0 0 78px;font-size:12.5px;color:var(--text2);padding-bottom:2px}
.st-strook{flex:1;display:flex;align-items:flex-end;gap:2px;height:44px;min-width:0}
.st-vak{flex:1 1 0;min-width:2px;border-radius:2px 2px 0 0}
.st-vak-goed{height:12px;background:var(--green)}
.st-vak-fout{height:100%;background:var(--red);
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.45) 0 2px,transparent 2px 5px)}
.st-vak-leeg{height:12px;background:transparent;border-bottom:2px dotted var(--text3);border-radius:0}
.st-as{display:flex;justify-content:space-between;font-size:12px;color:var(--text3);
  margin-left:90px;margin-top:2px}

/* ── VOORDELEN / KOLOMMEN ── */
.voordelen{background:var(--accent);color:#fff}
.voordelen h2{color:#fff;text-align:center;margin-bottom:38px;font-size:30px}
.voordeel-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.voordeel{text-align:center}
.voordeel svg{width:42px;height:42px;margin-bottom:10px;color:var(--teal)}
.voordeel h3{color:#fff;font-size:17px}
/* Van Ameyde Waarderingen op de startpagina: logo, korte introductie en de
   diensten van de moedersite. */
.vaw-blok{background:var(--accent);color:#fff}
.vaw-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
.vaw-logo img{display:block;width:320px;max-width:100%;height:auto;margin-bottom:22px}
.vaw-intro h2{color:#fff;font-size:30px;margin-bottom:12px}
.vaw-intro p{color:rgba(255,255,255,.82);margin-bottom:22px}
.vaw-diensten h3{color:#fff;font-size:17px;margin:0 0 12px}
.vaw-diensten ul+h3{margin-top:24px}
.vaw-diensten ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.vaw-diensten a{display:inline-block;padding:8px 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;
  color:#fff;font-size:14px;text-decoration:none}
.vaw-diensten a:hover{background:#fff;color:var(--accent);border-color:#fff}
@media (max-width:900px){.vaw-grid{grid-template-columns:1fr;gap:30px}}
.stappen{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:8px}
.stap{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);padding:22px 24px;box-shadow:var(--sh)}
.stap-nr{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--al);color:var(--accent);font-family:var(--fs);font-weight:700;font-size:16px;margin-bottom:12px}
.stap h3{font-size:18px;margin-bottom:8px}
.stap p+p{margin-top:10px}
/* Registreren en inschrijven als processchema: genummerde stappen op een
   doorlopende lijn, op de donkere band. Op een smal scherm staat de lijn links. */
.processectie .sectie-kop h2{color:#fff;text-align:left;margin-bottom:10px}
.processectie .sectie-kop p{color:rgba(255,255,255,.82)}
.processectie a:not(.btn){color:var(--teal)}
.processchema{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:none}
.processtap{position:relative;padding-top:58px}
.processtap .stap-nr{position:absolute;top:0;left:0;width:44px;height:44px;margin:0;font-size:18px;
  background:var(--teal);color:var(--accent2);z-index:1;box-shadow:0 0 0 6px var(--accent)}
.processtap::before{content:"";position:absolute;top:21px;left:44px;right:-26px;height:2px;background:rgba(255,255,255,.35)}
.processtap:last-child::before{display:none}
.processtap::after{content:"";position:absolute;top:16px;right:-20px;border:6px solid transparent;border-left:9px solid rgba(255,255,255,.6)}
.processtap:last-child::after{display:none}
.processtap h3{color:#fff;font-size:18px;margin-bottom:8px}
.processtap p{color:rgba(255,255,255,.8);font-size:14.5px;line-height:1.6}
.processtap p+p{margin-top:10px}
@media (max-width:900px){
  .processchema{grid-template-columns:1fr;gap:22px}
  .processtap{padding:0 0 0 64px;min-height:44px}
  .processtap::before{top:44px;bottom:-22px;left:21px;right:auto;width:2px;height:auto}
  .processtap::after{top:auto;bottom:-20px;right:auto;left:16px;border:6px solid transparent;border-top:9px solid rgba(255,255,255,.6)}
}
.blokken{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.blok h3{font-size:18px;margin-bottom:6px}

/* ── CIJFERS ── */
.cijfers{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.cijfer-val{font-family:var(--fs);font-size:42px;font-weight:700;color:var(--accent);line-height:1.1}
.cijfer-lbl{font-size:14px;color:var(--text2);margin-top:2px}

/* ── LOGOSTROOK ── */
.logos{display:flex;flex-wrap:wrap;gap:34px;align-items:center;justify-content:center}
.logos img{max-height:52px;width:auto;opacity:.8;filter:grayscale(1);transition:opacity .2s,filter .2s}
.logos img:hover{opacity:1;filter:none}

/* ── FAQ ── */
.faq-cat{margin-bottom:30px}
.faq-cat>h3{font-size:20px;margin-bottom:14px}
.faq-item{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);margin-bottom:8px;box-shadow:var(--sh);overflow:hidden}
.faq-item>summary{list-style:none;cursor:pointer;padding:15px 20px;font-weight:600;color:var(--text);
  display:flex;align-items:flex-start;gap:12px;font-size:15px}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary:hover{background:var(--bg)}
.faq-pijl{margin-left:auto;flex-shrink:0;color:var(--accent);transition:transform .2s var(--ease);line-height:1;font-size:13px}
.faq-item[open] .faq-pijl{transform:rotate(90deg)}
.faq-antwoord{padding:0 20px 18px;color:var(--text2);font-size:14.5px}
.faq-antwoord p+p{margin-top:10px}

/* ── DETAILPAGINA KAVEL ── */
.kruimels{font-size:13px;color:var(--text3);margin-bottom:12px}
.kruimels a{color:var(--text3)}
.kruimels span{margin:0 7px;color:var(--border)}
.detail-kop h1{font-size:40px;margin-bottom:4px}
.detail-kop p.plaats{font-size:17px;font-weight:600;color:var(--text2)}
.detail-boven{display:grid;grid-template-columns:2fr 1fr;gap:28px;margin-top:22px;align-items:start}
#kaart{height:420px;border-radius:var(--rl);overflow:hidden;border:1px solid var(--border2);box-shadow:var(--sh);background:var(--bg3)}
.detail-paneel{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);box-shadow:var(--sh);padding:22px 24px}
.detail-paneel+.detail-paneel{margin-top:18px}
.detail-datums{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.detail-datums .lbl{margin-bottom:2px}
.detail-datums strong{font-family:var(--fs);font-size:16px;color:var(--text);font-weight:600}
.aftellen{background:var(--al);border-radius:var(--r);padding:10px 13px;font-size:13px;color:var(--accent);font-weight:600;margin-bottom:14px}
.vragenblokken{display:grid;gap:18px;grid-template-columns:1fr 1fr;max-width:1060px;margin:30px 0 0}
.vragenblokken .detail-paneel+.detail-paneel{margin-top:0}
.vragenblokken:has(.detail-paneel:only-child){grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}
.kenmerkenbalk{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);box-shadow:var(--sh);padding:22px 26px;margin-top:26px}
/* Dezelfde kenmerken, maar in een regel: kadastraal, oppervlakte, gebruik,
   gebruiksbeperking. Op een smal scherm lopen ze door naar de volgende regel. */
.kenmerkenregel{display:flex;flex-wrap:wrap;gap:12px 34px;background:var(--bg2);border:1px solid var(--border2);
  border-radius:var(--rl);box-shadow:var(--sh);padding:16px 24px;margin-top:20px}
.kenmerkenregel .kenmerk strong{font-size:16px}
.kenmerk-link{display:block;color:inherit}
.kenmerk-link:hover{text-decoration:none}
.kenmerk-link:hover strong{color:var(--accent);text-decoration:underline}
.kenmerk-meer{display:block;font-size:12px;color:var(--accent);margin-top:1px}
.detail-tekst section{scroll-margin-top:96px}
.detail-kop .objectnummer{font-size:12px;color:var(--text3);margin-top:2px}
.detail-tekst h3.subkop{font-size:17px;margin:16px 0 6px}
table.data .rechts{text-align:right;font-variant-numeric:tabular-nums}
.kenmerk .lbl{margin-bottom:3px}
.kenmerk strong{font-family:var(--fs);font-size:20px;color:var(--text);font-weight:600;display:block;line-height:1.3}
.detail-tekst{max-width:1060px;margin:44px 0 0}
.detail-tekst section{margin-bottom:32px}
.detail-tekst h2{font-size:24px;margin-bottom:12px}
.detail-tekst p+p{margin-top:12px}
.detail-tekst ul{margin:10px 0 0 20px}
.detail-tekst li{margin-bottom:6px}
.detail-tekst ul.punten{list-style:disc}
.detail-tekst ul.doclijst{margin-left:0}
a[href^="tel:"]{white-space:nowrap}
.tabelkader{border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;background:var(--bg2)}
.tabelkader .schuif{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data thead th{background:var(--accent);color:#fff;text-align:left;padding:12px 16px;font-size:12px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
table.data td{padding:12px 16px;border-bottom:1px solid var(--border2);vertical-align:top}
table.data tbody tr:last-child td{border-bottom:none}
table.data tfoot td{padding:12px 16px;font-weight:700;background:var(--bg);color:var(--text)}
.doclijst{list-style:none;margin:0}
.doclijst li{margin-bottom:8px}
.doclijst a{display:inline-flex;align-items:center;gap:9px;background:var(--bg2);border:1px solid var(--border2);
  border-radius:var(--r);padding:11px 15px;box-shadow:var(--sh);font-weight:600;font-size:14px}
.doclijst a:hover{border-color:var(--accent);text-decoration:none}

/* ── PROFIEL / INSCHRIJVEN ── */
.paneelrij{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}
.zijnav{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);box-shadow:var(--sh);padding:10px;position:sticky;top:96px}
.zijnav a{display:block;padding:10px 14px;border-radius:var(--r);font-size:14px;font-weight:600;color:var(--text2)}
.zijnav a:hover{background:var(--bg3);color:var(--text);text-decoration:none}
.zijnav a.actief{background:var(--accent);color:#fff}
.gemeentelijst{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--al);color:var(--accent);
  border-radius:20px;padding:5px 12px;font-size:13px;font-weight:600}
.chip button{background:none;border:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0;opacity:.65}
.chip button:hover{opacity:1}
.stapbalk{display:flex;gap:6px;margin-bottom:26px;flex-wrap:wrap}
.stapbalk div{flex:1 1 120px;padding:9px 12px;border-radius:var(--r);font-size:12.5px;font-weight:600;
  text-align:center;background:var(--bg3);color:var(--text3);border:1px solid transparent}
.stapbalk div.actief{background:var(--accent);color:#fff}
.stapbalk div.klaar{background:var(--gbg);color:var(--green);border-color:rgba(21,117,57,.2)}
.leeg{text-align:center;padding:56px 24px;color:var(--text3)}
.leeg h3{color:var(--text2);margin-bottom:8px;font-size:19px}
.laad{text-align:center;padding:56px 24px;color:var(--text3);font-size:14px}

/* ── JURIDISCHE PAGINA'S ── */
.juridisch{max-width:820px;margin:0 auto}
.juridisch h2{font-size:22px;margin:32px 0 12px}
.juridisch h3{font-size:17px;margin:22px 0 8px}
.juridisch p+p{margin-top:12px}
.juridisch ul,.juridisch ol{margin:12px 0 12px 22px}
.juridisch li{margin-bottom:7px}

/* ── ILLUSTRATIE ── */
.illu{border-radius:var(--rl);overflow:hidden;box-shadow:var(--sh);background:var(--bg3);aspect-ratio:4/3}
.illu svg{display:block;width:100%;height:100%}

/* ── FOOTER ── */
.voet{background:var(--accent2);color:rgba(255,255,255,.72);padding:52px 0 26px;margin-top:0;font-size:14px}
.voet a{color:rgba(255,255,255,.82)}
.voet a:hover{color:var(--teal);text-decoration:none}
.voet-grid{display:grid;gap:34px;grid-template-columns:1.4fr 1fr 1fr;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.14)}
.voet-merk .merk-naam{color:#fff}
.voet-merk .merk-sub{color:rgba(255,255,255,.55)}
.voet-merk p{margin-top:12px;max-width:320px}
.voet-vaw{display:inline-block;margin-top:18px;opacity:.92;transition:opacity .14s ease}
.voet-vaw:hover{opacity:1}
.voet-vaw img{display:block;width:240px;max-width:100%;height:auto}
.voet h4{color:#fff;font-family:var(--fs);font-size:15px;margin-bottom:12px;font-weight:600}
.voet ul{list-style:none}
.voet li{margin-bottom:8px}
.voet-onder{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:20px;font-size:13px}
.voet-onder .voet-links{display:flex;gap:20px;flex-wrap:wrap}

/* ── KAART BOVEN HET AANBOD ── */
.aanbodkaart-kader{margin-bottom:22px}
.kaartfilters{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.kaartfilters .zv{flex:1 1 180px;max-width:260px}
.kaartfilters label{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);margin-bottom:5px}
.kaartfilters select{width:100%}
.kop-icoon{display:flex;align-items:center;gap:10px}
.kop-icoon svg{width:30px;height:30px;color:var(--accent);flex:0 0 auto}
#aanbodkaart{height:400px;border-radius:var(--rl);overflow:hidden;border:1px solid var(--border2);
  box-shadow:var(--sh);background:var(--bg3)}
.aanbodkaart-kader figcaption{margin-top:8px}
.leaflet-container{background:var(--bg)}
#aanbodkaart .leaflet-popup-content{font-family:var(--f);font-size:13.5px;line-height:1.55}
#aanbodkaart .leaflet-popup-content strong{font-family:var(--fs);font-size:15px;color:var(--text)}
#aanbodkaart .leaflet-control-attribution{font-size:10px}

/* ── VERANTWOORDING ── */
/* Een bedrag als "€ 18.635,40" past niet in een tegel van 150 px en brak over
   twee regels, met het euroteken alleen op de eerste. */
.vw-cijfers{grid-template-columns:repeat(auto-fit,minmax(184px,1fr))}
.vw-cijfers .stat-val{white-space:nowrap;font-size:25px}

.vw-legenda{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:14px;font-size:12.5px;color:var(--text2)}
.vw-legenda-item{display:inline-flex;align-items:center;gap:7px}
.vw-stip{width:11px;height:11px;border-radius:50%;display:inline-block;flex:0 0 auto}
.vw-lijn{width:22px;height:4px;border-radius:2px;background:var(--bg4);display:inline-block;flex:0 0 auto}
.hero-kop{padding-top:74px;padding-bottom:74px}
.hero-kop .lead{max-width:62ch}

/* ── AFDELINGEN ── */
/* Zolang alleen pacht aan staat, komt hiervan niets in beeld: het merkje op een
   kavelkaart verschijnt pas als er meer dan een afdeling is, want anders staat
   bij elk object hetzelfde woord. */
.kavel-afdeling{position:absolute;left:12px;top:12px;background:var(--bg2);color:var(--accent);
  border:1px solid var(--border);border-radius:99px;padding:3px 11px;font-size:11.5px;
  font-weight:600;letter-spacing:.02em;box-shadow:var(--sh)}
.detail-prijs{border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);
  padding:11px 14px;margin:12px 0}
.detail-prijs strong{display:block;font-family:var(--fs);font-size:23px;color:var(--accent);line-height:1.2}
.afdeling-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px}
.afdeling-kaart{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);
  padding:26px 24px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:10px}
.afdeling-kaart h3{font-size:20px}
.afdeling-kaart p{color:var(--text2);flex:1}
.afdeling-kaart .btn{align-self:flex-start}
.afdeling-uit{border:1px dashed var(--border);background:var(--bg);box-shadow:none}
.afdeling-uit h3,.afdeling-uit p{color:var(--text3)}

/* ── CONTRACTEN ── */
/* De bepalingen uit een contract als losse blokjes: leesbaar zonder het
   contract zelf open te slaan, en smal genoeg om in een tabelcel te passen. */
.ct-specs{display:flex;flex-wrap:wrap;gap:6px}
.ct-spec{display:inline-block;background:var(--bg3);color:var(--text2);border-radius:99px;
  padding:3px 10px;font-size:12px;line-height:1.5;white-space:nowrap}
.ct-kaart{border:1px solid var(--border2);border-radius:var(--rl);background:var(--bg2);
  padding:16px 18px;margin-bottom:12px}
.ct-kaart-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  flex-wrap:wrap;margin-bottom:10px}
.ct-regels{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:10px 22px;
  margin-bottom:12px}
.ct-regel dt{font-size:12px;color:var(--text3);margin-bottom:1px}
.ct-regel dd{font-size:14px;color:var(--text);margin:0}
.ct-vinkjes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 18px}
.ct-balk{height:8px;border-radius:4px;background:var(--bg3);overflow:hidden;min-width:64px}
.ct-balk span{display:block;height:100%;background:var(--accent3);border-radius:4px}

/* ── DASHBOARDTOEGANG ── */
.dt-rij{border:1px solid var(--border2);border-radius:var(--rl);padding:14px 16px;margin-bottom:10px;
  background:var(--bg2)}
.dt-rij-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:10px}
.dt-vinkjes{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:0 18px}
.dt-vinkjes .check{margin-bottom:9px}

table.data tfoot th{background:var(--bg3);color:var(--text);font-weight:700;padding:12px 16px;text-align:left;
  border-top:1px solid var(--border);white-space:nowrap}

/* ── WACHTWOORD EENMALIG TONEN ── */
.wachtwoordvak{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wachtwoordvak code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:17px;
  font-weight:600;letter-spacing:.02em;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r);padding:9px 13px;user-select:all;color:var(--text)}

/* ── MELDINGSBALK TWEEFACTOR ── */
.mfa-balk{background:var(--abg);border-bottom:1px solid rgba(128,87,0,.22);color:var(--amber)}
.mfa-balk .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.mfa-balk strong{display:block;font-size:14px;color:inherit}
.mfa-balk p{font-size:13px;margin-top:2px;max-width:70ch;color:inherit;opacity:.92}
.mfa-balk-acties{display:flex;gap:8px;flex-wrap:wrap}
.mfa-balk-verplicht{background:var(--accent2);border-bottom-color:var(--accent);color:#fff}
.mfa-balk-verplicht p{color:rgba(255,255,255,.82)}

/* ── TOAST ── */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:200;
  background:var(--text);color:#fff;padding:12px 20px;border-radius:var(--r);font-size:14px;
  box-shadow:var(--sh2);opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);max-width:min(92vw,460px)}
.toast.zichtbaar{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.fout{background:var(--red)}
.toast.ok{background:var(--green)}

/* ── RESPONSIEF ── */
@media (max-width:960px){
  .detail-boven{grid-template-columns:1fr}
  #aanbodkaart{height:300px}
  .vragenblokken{grid-template-columns:1fr}
  #kaart{height:320px}
  .paneelrij{grid-template-columns:1fr}
  .zijnav{position:static;display:flex;gap:6px;overflow-x:auto}
  .zijnav a{white-space:nowrap}
  .voet-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .hoofdnav,.topbar,.kop-acties{display:none}
  .hamburger{display:inline-flex}
  .hero h1{font-size:34px}
  .hero .wrap{padding-top:48px;padding-bottom:48px}
  .hero-panorama .wrap{padding-top:56px;padding-bottom:56px}
  .hero-panorama h1{max-width:none}
  .mozaiek figure:nth-child(1),.mozaiek figure:nth-child(4){transform:none}
  .sectie{padding:40px 0}
  .sectie-kop h2{font-size:26px}
  .detail-kop h1{font-size:30px}
  .form-grid{grid-template-columns:1fr}
  .cijfer-val{font-size:34px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .voet-grid{grid-template-columns:1fr}
  .detail-datums{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ── BEHEER ── */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.tabs-sub{border-bottom:1px solid var(--border);padding-bottom:12px;margin:-4px 0 22px}
.tabs-sub .tab{font-size:13px;padding:7px 13px}
.tab{padding:9px 15px;border-radius:var(--r);font-size:13.5px;font-weight:600;cursor:pointer;color:var(--accent);
  background:var(--bg2);border:1px solid var(--border);transition:all .2s var(--ease);white-space:nowrap}
.tab:hover{border-color:var(--accent);text-decoration:none}
.tab.actief{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--sh)}
.beheer-balk{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.beheer-balk h2{font-size:22px}
.beheer-zoek{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.beheer-zoek input,.beheer-zoek select{padding:8px 12px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--bg2);font-family:var(--f);font-size:14px;color:var(--text);outline:none}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.stat{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);padding:14px 18px;box-shadow:var(--sh)}
.stat-val{font-family:var(--fs);font-size:28px;font-weight:600;color:var(--accent);line-height:1.15}
.stat-lbl{font-size:12.5px;color:var(--text2);margin-top:2px}
.subrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) 40px;gap:10px;align-items:end;
  padding:12px;background:var(--bg);border-radius:var(--r);margin-bottom:10px}
.subrij .fg{margin-bottom:0}
.subrij input[type=checkbox]{width:20px;height:20px;margin:10px 0;padding:0;-webkit-appearance:checkbox;appearance:auto;accent-color:var(--accent)}
.subrij>.knop-weg{grid-column:-2/-1;width:40px;height:40px;padding:0;font-size:18px;align-self:end}
.standaard-keuze{display:block;width:100%;margin:0 0 8px;font-size:13px;padding:7px 10px;border:1px dashed var(--border2);
  border-radius:var(--r);background:var(--bg);color:var(--text2);font-family:var(--f);cursor:pointer}
.beheer-kaart{height:360px;border-radius:var(--rl);overflow:hidden;border:1px solid var(--border2);background:var(--bg3);cursor:crosshair}
.knop-weg{background:var(--rbg);color:var(--red);border:1px solid rgba(178,58,40,.2);border-radius:var(--r);
  padding:9px 11px;cursor:pointer;font-family:var(--f);font-size:13px;font-weight:600;line-height:1}
.knop-weg:hover{background:var(--red);color:#fff}
.velden-groep{border-top:1px solid var(--border2);margin-top:26px;padding-top:20px}
.velden-groep>h3{font-size:17px;margin-bottom:14px}
table.data td .fg-hint{margin-top:2px}
.rij-acties{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* ══ Van Ameyde huisstijl ════════════════════════════════════════════════════
   Laatste laag: knoppen, kop, banner, banden en voet zoals op
   vanameydewaarderingen.com. */

/* Knoppen: turkoois met navy tekst en een pijl, rechte hoeken. */
.btn{padding:12px 26px;font-size:15px;font-weight:600}
.btn-sm{padding:8px 16px;font-size:13px}
.btn-primary,.btn-teal{background:var(--teal);color:var(--accent);border-color:var(--teal)}
.btn-primary:hover,.btn-teal:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-secondary{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-secondary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-licht{border-color:#fff}
a.btn-primary:not(.btn-sm)::after,a.btn-teal:not(.btn-sm)::after,a.btn-licht:not(.btn-sm)::after{
  content:"\2192";font-size:1.1em;line-height:1;transition:transform .2s var(--ease)}
a.btn:hover::after{transform:translateX(3px)}

/* Kop: navy balk met witte navigatie. */
.topbar{background:var(--accent2)}
.kop{background:var(--accent);box-shadow:none;border-bottom:1px solid rgba(255,255,255,.12)}
.kop .merk-naam{color:#fff}
.kop .merk-sub{color:rgba(255,255,255,.62)}
.hoofdnav a.navlink{color:#fff}
.hoofdnav a.navlink:hover,.hoofdnav a.navlink.actief{color:var(--teal)}
.navpijl{color:rgba(255,255,255,.7)}
.navgroep:hover .navpijl,.navgroep.open .navpijl{color:var(--teal)}
.navmenu{border:none;box-shadow:var(--sh2)}
.kop .btn-secondary{color:#fff;border-color:rgba(255,255,255,.6)}
.kop .btn-secondary:hover{background:#fff;color:var(--accent);border-color:#fff}
.kop .btn-ghost{color:rgba(255,255,255,.85)}
.kop .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.hamburger{color:#fff;border-color:rgba(255,255,255,.5)}

/* Banner: luchtfoto met een navy verloop van links, tekst links uitgelijnd. */
.hero{background:linear-gradient(90deg,rgba(5,1,88,.96) 0%,rgba(5,1,88,.9) 45%,rgba(5,1,88,.78) 100%),
  url(/assets/beeld/hero-akkerland-2000.jpg) center/cover no-repeat,var(--accent)}
.hero::after{display:none}
.hero-mid{text-align:left}
.hero-mid p.lead{margin:0}
.hero h1{font-size:46px;line-height:1.12}
.hero p.lead{font-size:18px;color:rgba(255,255,255,.9)}
.hero-boven{display:block;color:rgba(255,255,255,.75);font-size:15px;font-weight:600;letter-spacing:.04em;margin-bottom:10px}
.hero-onder{display:block;font-size:19px;color:rgba(255,255,255,.85);margin:4px 0 0;max-width:620px}
.hero-knoppen{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero-mid .zoekbalk{justify-content:flex-start}
.uitgelicht{color:var(--teal)}

/* Rustige band onder de banner: lichte tint, turkoois alleen in de iconen. */
.band-turkoois{background:var(--bg3);color:var(--accent)}
.band-turkoois h2,.band-turkoois h3{color:var(--accent)}
.band-turkoois p{color:var(--accent)}
.band-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:48px;align-items:start}
.band-grid h2{font-size:30px;line-height:1.2}
.band-grid .band-tekst{font-size:17px;line-height:1.7}
.usp-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px;padding-top:34px;
  border-top:1px solid rgba(7,1,126,.18)}
.usp{display:flex;gap:16px;align-items:flex-start}
.usp img{width:44px;height:44px;flex:0 0 auto}
.usp h3{font-size:18px;margin-bottom:4px}
.usp p{font-size:15px;line-height:1.55}

/* Iconen uit het brandbook. */
.icoon{display:block;width:48px;height:48px;margin-bottom:14px}
.kop-icoon img{width:34px;height:34px;flex:0 0 auto}

/* Kaarten zonder rand, met een zachte schaduw. */
.card,.kavel,.stap,.eigen-dashboard{border-color:transparent}
.sectie-lav{background:var(--bg3)}

/* Van Ameyde Waarderingen-blok: wit, tussen de lichte sectie erboven en de
   lichte voet, zodat er geen harde kleurovergang is. */
.vaw-blok{background:var(--bg2);color:var(--accent)}
.vaw-intro h2{color:var(--accent)}
.vaw-intro p{color:var(--accent)}
.vaw-boven{display:block;font-size:15px;font-weight:600;letter-spacing:.02em;margin-bottom:6px}
.vaw-diensten h3{color:var(--accent)}
.vaw-diensten a{color:var(--accent);border-color:var(--border);border-radius:0;background:transparent}
.vaw-diensten a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Voet: licht, navy tekst, zoals op vanameydewaarderingen.com. */
.voet{background:var(--bg3);color:var(--text2)}
.voet a{color:var(--accent)}
.voet a:hover{color:var(--accent);text-decoration:underline}
.voet-grid{border-bottom-color:rgba(7,1,126,.14)}
.voet-merk .merk-naam{color:var(--accent)}
.voet-merk .merk-sub{color:var(--text3)}
.voet h4{color:var(--accent);font-weight:700}

/* Processchema: icoon in plaats van alleen een nummer. */
.processtap .stap-icoon{position:absolute;top:0;left:0;width:44px;height:44px;z-index:1;
  background:var(--accent);box-shadow:0 0 0 6px var(--accent)}
.processtap .stap-icoon~.stap-nr{top:-8px;left:32px;width:24px;height:24px;font-size:12px;box-shadow:0 0 0 3px var(--accent)}

@media (max-width:900px){
  .band-grid{grid-template-columns:1fr;gap:18px}
  .usp-rij{grid-template-columns:1fr;gap:20px}
  .hero h1{font-size:38px}
  .hero-onder{font-size:21px}
}

/* Foto's van vanameydewaarderingen.com. */
.hero-home{background:linear-gradient(90deg,rgba(5,1,88,.95) 0%,rgba(5,1,88,.86) 42%,rgba(5,1,88,.35) 75%,rgba(5,1,88,.15) 100%),
  url(/assets/beeld/vaw-landelijk-1600.webp) center/cover no-repeat,var(--accent)}
.hero-home .wrap{padding-top:96px;padding-bottom:96px}
.vaw-grid{grid-template-columns:.9fr 1.3fr;align-items:center}
.vaw-foto{margin:0}
.vaw-foto img{display:block;width:100%;height:auto}
.vaw-intro{margin-bottom:26px}
@media (max-width:900px){.hero-home{background:linear-gradient(90deg,rgba(5,1,88,.94),rgba(5,1,88,.8)),
  url(/assets/beeld/vaw-landelijk-960.webp) center/cover no-repeat,var(--accent)}
  .vaw-grid{grid-template-columns:1fr}
  .vaw-foto{max-width:360px}}

/* Documentrij met upload in Beheer. */
.bestandcel{display:flex;align-items:center;gap:12px;min-height:44px;flex-wrap:wrap}
.bestandcel a{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.bestandcel .bestandknop{cursor:pointer;text-transform:none;letter-spacing:0;margin:0;font-size:13px;color:var(--accent)}
.pr-publicatie{margin-top:16px;border-top:1px solid var(--border2);padding-top:14px}
.pr-publicatie summary{cursor:pointer;font-weight:700;color:var(--accent)}

/* Projectleden zien in Beheer geen knoppen die alleen een beheerder mag. */
.projectlid .alleen-beheer{display:none!important}
.ledenlijst{list-style:none;margin:0;padding:0}
.ledenlijst li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border2)}

/* Kadastrale gemeente: perceel kiezen op de kaart. */
.kadaster-kiezer .beheer-kaart{height:440px}
.kadaster-kiezer .beheer-kaart.kk-tekenen{cursor:crosshair}
.kk-zoek{position:relative;max-width:520px;margin-bottom:10px}
.kk-suggesties{position:absolute;left:0;right:0;top:100%;z-index:1000;list-style:none;margin:0;padding:4px 0;
  background:#fff;box-shadow:var(--sh2)}
.kk-suggesties button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 14px;
  font:inherit;color:var(--accent);cursor:pointer}
.kk-suggesties button:hover{background:var(--bg3)}
.kk-knoppen{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.kk-knoppen .kk-actief{background:var(--accent);color:#fff}
.kk-gegevens{margin-top:8px;font-size:14px}

/* Pagina van een opdrachtgever. */
.og-pagina-kop{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.og-pagina-logo{max-width:240px;max-height:110px;width:auto;height:auto;object-fit:contain}
.og-projecten{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* Drie puntjes met Bewerken en Verwijderen. */
.meer{position:relative;display:inline-block}
.meer-knop{background:transparent;border:1px solid var(--border);color:var(--accent);width:36px;height:34px;
  font-size:20px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.meer-knop:hover{background:var(--bg3)}
.meer-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:50;min-width:160px;background:#fff;box-shadow:var(--sh2);padding:6px 0}
.meer-menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 16px;
  font:inherit;font-size:14px;color:var(--accent);cursor:pointer}
.meer-menu button:hover{background:var(--bg3)}
.meer-menu .meer-weg{color:var(--red)}

/* Standaardteksten per hoofdstuk in Instellingen: per veld een knop, die
   opent de teksten eronder. */
.st-hoofdstuk{margin:22px 0 8px}
.st-hoofdstuk h4{font-size:17px;margin:0 0 12px;padding-bottom:6px;border-bottom:2px solid var(--teal)}
.st-knoppen{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.st-knop{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px 16px;
  background:#fff;border:1px solid var(--border);box-shadow:var(--sh);cursor:pointer;font:inherit;color:var(--accent);
  transition:border-color .15s ease,box-shadow .15s ease}
.st-knop:hover{border-color:var(--accent);box-shadow:var(--sh2)}
.st-knop.actief{background:var(--accent);border-color:var(--accent);color:#fff}
.st-knop-naam{font-weight:700;font-size:15px}
.st-knop-aantal{font-size:12.5px;opacity:.75}
.st-editor{margin-top:14px;padding:18px 20px;background:#fff;border-left:4px solid var(--teal);box-shadow:var(--sh)}
.st-editor-kop{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.st-editor-kop h5{font-family:var(--fs);font-size:18px;color:var(--accent);margin:0}
.st-optie{display:grid;grid-template-columns:1fr 2fr 40px;gap:12px;align-items:start;padding:12px;background:var(--bg);margin-bottom:10px}
.st-optie .fg{margin:0}
.st-optie .knop-weg{width:40px;height:40px;padding:0;font-size:18px;margin-top:22px}
@media (max-width:700px){.st-optie{grid-template-columns:1fr}}

/* Voorbeeld van een object in Beheer. */
.voorbeeld-venster{position:fixed;inset:0;z-index:2000;background:rgba(5,1,88,.55);display:flex;align-items:center;justify-content:center;padding:24px}
.voorbeeld-kader{background:var(--bg);width:min(1200px,100%);height:min(92vh,1000px);display:flex;flex-direction:column;padding:18px 22px;box-shadow:var(--sh2)}
.voorbeeld-kop{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:8px}
.voorbeeld-kop .tabs{margin:0}
.voorbeeld-kop [data-vb-dicht]{margin-left:auto}
.voorbeeld-inhoud{flex:1;min-height:0;overflow:auto}
.voorbeeld-kaartje{max-width:380px;margin:10px auto}
.voorbeeld-inhoud iframe{width:100%;height:100%;border:0;background:#fff}
/* De objectpagina als voorbeeld: niet inschrijven en een duidelijke strook. */
.is-voorbeeld .paneel .btn,.is-voorbeeld .detail-paneel .btn{pointer-events:none;opacity:.6}
.is-voorbeeld #pg-header,.is-voorbeeld #pg-footer{pointer-events:none}
.is-voorbeeld main::before{content:"Voorbeeld — zo komt het object op de site te staan";display:block;background:#FFC857;color:var(--accent);
  font-weight:700;text-align:center;padding:8px 12px;font-size:14px}

/* Live opslaan: de stand naast de opslaanknop. */
.live-status { display: inline-flex; align-items: center; margin-left: 12px; font-size: 13px; color: var(--text3); vertical-align: middle; }
.live-status[data-soort="ok"]::before { content: ""; width: 8px; height: 8px; margin-right: 7px; background: var(--teal); display: inline-block; }
.live-status[data-soort="fout"] { color: var(--red); }
.fg-hint-fout { color: var(--red); margin-top: 6px; }

/* Percelen in een aanbieding: per perceel een kaart met de kadastrale
   gegevens en een uitklapbare beschrijving. */
.perceelkaart { border: 1px solid var(--border); background: var(--bg2); margin-bottom: 14px; }
.perceelkaart-kop { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg3); }
.perceelkaart-nr { font-weight: 700; color: var(--text); }
.perceelkaart-naam { flex: 1; color: var(--text2); font-size: 14px; }
.perceelkaart-kop .knop-weg { width: 34px; height: 34px; padding: 0; font-size: 18px; }
.perceelkaart .subrij { padding: 14px; margin: 0; border: 0; }
.subrij-zonder-knop { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
.perceelkaart-beschrijving { padding: 0 14px 14px; }
.perceelkaart-beschrijving > summary { cursor: pointer; font-weight: 600; color: var(--text); padding: 6px 0 10px; }
.perceelkaart-beschrijving textarea { min-height: 70px; }

/* Objectpagina: beschrijving per perceel. */
.perceel-blokken { display: grid; gap: 14px; }
.perceel-blok { border: 1px solid var(--border); background: var(--bg2); padding: 16px 18px; }
.perceel-blok h3 { font-family: var(--fs); font-size: 17px; margin: 0 0 4px; color: var(--text); }
.perceel-blok .perceel-sub { font-size: 13px; color: var(--text3); margin-bottom: 10px; }
.perceel-blok dl { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 6px 16px; margin: 0; }
.perceel-blok dt { font-weight: 600; color: var(--text2); }
.perceel-blok dd { margin: 0; }
.perceel-blok dd p { margin: 0 0 6px; }
@media (max-width: 600px) { .perceel-blok dl { grid-template-columns: 1fr; } .perceel-blok dt { margin-top: 6px; } }
.perceel-blok dd .punten { margin: 0; } .perceel-blok dd .punten li:first-child { margin-top: 0; }

/* Genummerde blokken op de kaart: hetzelfde nummer als het perceel. */
.kk-nummer { box-sizing: border-box; width: 24px; height: 24px; background: var(--accent); color: #fff; text-align: center;
  font: 700 13px/20px var(--f); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.kk-nummer-klein { display: inline-block; width: 20px; height: 20px; font-size: 11px; line-height: 16px; margin-right: 8px;
  vertical-align: middle; box-shadow: none; }
.perceelkaart-blok { font-size: 12.5px; color: var(--text3); white-space: nowrap; }
@media (max-width: 600px) { .perceelkaart-kop { flex-wrap: wrap; } }

/* Een vaste waarde in een formulier (bijvoorbeeld datums die uit het project volgen). */
.fg-vast { padding: 11px 14px; background: var(--bg3); color: var(--text); font-weight: 600; border: 1px solid var(--border2); }
.perceel-gedeeltelijk { margin: 9px 0 0; }
.perceelkaart-uitleg { margin: -6px 14px 10px; }
.perceel-gedeeltelijk { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.perceel-gedeeltelijk span { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--text); }
.perceel-gedeeltelijk input[type=checkbox] { margin: 0 !important; }