:root {
  --blauw: #201F9E;
  --rood: #E5384A;
  --inkt: #191A46;
  --oranje: #E88A1A;
  --grijs: #7D7F99;
  --lijn: #E6E8F0;
  --vlak: #F3F4F8;
  --wit: #fff;
  --groen: #17894A;
  --paars: #9333EA; --paars-vlak: #F3E8FF; --paars-inkt: #6B21A8; /* status Op te volgen */
  /* plan 6 donkere modus: oppervlakken en vlakken als tokens (--wit blijft wit = tekst op gekleurde vlakken) */
  --kaart: #fff; --knop: #201F9E; --knop-druk: #191A46; --kop-bg: #201F9E; --toast-bg: #191A46;
  --uitleg-bg: #FFF4E5; --uitleg-rand: #F3D3A6; --reden-bg: #ECECF8; --druk: #F0F0FA; --kaart-vak: #E8EAF0;
  /* testversie 16/10 (Karel: "icoontjes met blauw gevulde cirkel, professioneel en modern") */
  --ic-bg: linear-gradient(150deg, #3534C6 0%, #201F9E 72%); /* blauwe cirkel achter een wit icoon */
  --ic-zacht: #E9EBFB;                                       /* lichtblauwe cirkel (niet-actieve tab) */
  --knop-zacht: #EEF0FD; --knop-zacht-druk: #E0E3FA;         /* tweede knop: lichtblauw vlak, geen rand */
  --rand-kaart: rgba(20,22,60,.06);
  --schaduw: 0 1px 2px rgba(20,22,60,.05), 0 4px 14px rgba(20,22,60,.06);
  --schaduw-hoog: 0 10px 32px rgba(20,22,60,.16);
  --tag-bg: #F1F2F7; --tag-inkt: #4B4D6B;
  --font-tekst: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-kop: Montserrat, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
  --tab-h: 64px;
  --veilig-onder: env(safe-area-inset-bottom, 0px);
}
/* Donkere modus zoals CV Planning (data-theme="dark", localStorage 'cv-theme'): Planning's donkere palet */
[data-theme="dark"] {
  --vlak: #0d0d0e;        /* Planning --bg */
  --kaart: #1c1c1e;       /* --card */
  --lijn: #2c2c2e;        /* --border */
  --inkt: #f0f0f2;        /* --text */
  --grijs: #aeaeb2;       /* --text-2 (leesbaarder dan --muted #636366 voor secundaire tekst) */
  --blauw: #5b7cf6;       /* --accent: tekst, links, randen */
  --knop: #3d5af1;        /* gevulde knoppen met witte tekst (contrast > 4.5) */
  --knop-druk: #2c44c4;
  --kop-bg: #1c1c1e;
  --toast-bg: #3a3a3c;    /* --border-2 */
  --groen: #34c26b;       /* tekstgroen; rood/oranje blijven (vlakken met witte tekst) */
  --paars: #b07cff; --paars-vlak: rgba(147,51,234,.22); --paars-inkt: #e2ccff;
  --uitleg-bg: rgba(234,108,0,.14); --uitleg-rand: rgba(234,108,0,.38);
  --reden-bg: rgba(91,124,246,.16); --druk: #1a1a1c; --kaart-vak: #1a1a1c;
  --ic-bg: linear-gradient(150deg, #6F8AFF 0%, #3D5AF1 75%); --ic-zacht: rgba(91,124,246,.2);
  --knop-zacht: rgba(91,124,246,.15); --knop-zacht-druk: rgba(91,124,246,.26);
  --rand-kaart: var(--lijn); --schaduw: none; --schaduw-hoog: 0 10px 32px rgba(0,0,0,.6);
  --tag-bg: #2a2a2e; --tag-inkt: #c9c9d1;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Plan 7: kop en tabbalk staan vast; enkel <main> scrolt (eigen scrollcontainer). De body zelf beweegt nooit, ook niet bij
   rubber-band scrollen of het in-/uitschuiven van de Safari-werkbalk. */
html, body { height: 100%; }
body {
  margin: 0; background: var(--vlak); color: var(--inkt);
  font: 15px/1.5 var(--font-tekst); letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  position: fixed; inset: 0; overflow: hidden; display: flex; flex-direction: column;
}
[hidden] { display: none !important; }
h1 { font: 800 21px/1.25 var(--font-kop); margin: 0; letter-spacing: -.02em; }
h2 { font: 700 17px/1.3 var(--font-kop); margin: 22px 0 8px; letter-spacing: -.015em; }
h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--grijs); margin: 26px 0 10px; }

/* ===== Icoontjes (testversie 16/10): wit lijnicoon in een blauwe cirkel (js/ico.js) ===== */
.ic {
  --ic: 28px; display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--ic); height: var(--ic);
  border-radius: 50%; background: var(--ic-bg); color: #fff; vertical-align: middle; line-height: 0;
  box-shadow: none; /* Karel 16/10: geen schaduw achter de icoontjes */
}
.ic svg { width: 54%; height: 54%; fill: none; stroke: currentColor; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }
.ic svg.vol { fill: currentColor; }
.ic-s { --ic: 20px; } .ic-s svg { width: 58%; height: 58%; stroke-width: 2.6; }
.ic-m { --ic: 34px; }
.ic-l { --ic: 44px; }
.ic-licht { background: var(--ic-zacht); color: var(--blauw); box-shadow: none; }
.ic-rood { background: linear-gradient(150deg, #F05A6B 0%, #D42A3E 75%); }
.ic-groen { background: linear-gradient(150deg, #2FB36A 0%, #17894A 75%); }
.ic-grijs { background: var(--tag-bg); color: var(--grijs); box-shadow: none; }
/* op een blauw vlak (hoofdknop, actieve chip, kop): witte cirkel met blauw icoon */
.knop-hoofd .ic, .chip.actief .ic, .brief-type.actief .ic, .knop-afhandelen .ic, .ic-wit { background: #fff; color: var(--knop); box-shadow: none; }
[data-theme="dark"] .knop-hoofd .ic, [data-theme="dark"] .chip.actief .ic, [data-theme="dark"] .knop-afhandelen .ic { color: var(--knop); }
a { color: var(--blauw); }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea {
  width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--kaart);
  font-size: 16px; /* geen iOS-zoom */ transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #A3A5BA; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blauw) 18%, transparent); }
label { display: block; font-size: 13px; font-weight: 600; color: var(--inkt); }
label > input, label > select, label > textarea { margin-top: 4px; font-weight: 400; }

/* Kop */
.kop {
  position: relative; flex: none; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px 16px; color: var(--wit);
  background: linear-gradient(120deg, #2B2ABA 0%, var(--kop-bg) 55%, #1A1985 100%); box-shadow: 0 2px 12px rgba(20,22,60,.18);
}
[data-theme="dark"] .kop { background: var(--kop-bg); box-shadow: none; }
.kop-merk { display: flex; align-items: center; gap: 10px; font: 800 16px/1 var(--font-kop); letter-spacing: -.01em; }
.kop-merk img { border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.kop-rechts { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kop-naam { font-size: 14px; font-weight: 600; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knop-link { background: none; border: 0; color: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; padding: 10px 0; cursor: pointer; }

/* Schermen */
main {
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
  padding-bottom: calc(var(--tab-h) + var(--veilig-onder) + 16px);
}
body:has(#tabbalk[hidden]) main { padding-bottom: 0; }
.scherm { padding: 16px; max-width: 720px; margin: 0 auto; }
.sub { color: var(--grijs); font-size: 13px; margin: 2px 0 0; }

/* Login */
.login { min-height: 100%; display: flex; align-items: center; justify-content: center; }
.login-kaart { width: 100%; max-width: 360px; background: var(--kaart); border-radius: 24px; padding: 32px 24px 26px; box-shadow: var(--schaduw-hoog); border: 1px solid var(--rand-kaart); text-align: center; }
.login-logo { border-radius: 20px; box-shadow: 0 8px 22px rgba(32,31,158,.28); }
.login-kaart h1 { margin-top: 14px; color: var(--blauw); font-size: 23px; }
.login-kaart form { text-align: left; margin-top: 20px; display: grid; gap: 14px; }
.fout { color: var(--rood); font-weight: 600; font-size: 14px; margin: 0; }
.melding { color: var(--groen); font-weight: 600; font-size: 14px; min-height: 1em; }

/* Knoppen */
.knop {
  min-height: 48px; padding: 10px 18px; border-radius: 14px; border: 0; font-weight: 650; font-size: 15px; letter-spacing: -.01em; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; transition: background-color .15s, box-shadow .15s, transform .08s;
}
.knop:active { transform: scale(.985); }
.knop-hoofd { background: var(--knop); color: var(--wit); box-shadow: 0 4px 14px rgba(32,31,158,.26); }
.knop-hoofd:active { background: var(--knop-druk); }
[data-theme="dark"] .knop-hoofd { box-shadow: none; }
.knop-tweede { background: var(--knop-zacht); color: var(--blauw); border: 0; }
.knop-tweede:active { background: var(--knop-zacht-druk); }
.knop .ic { margin-left: -6px; }
/* brede tweede knoppen (fiche: Eigenaar, Klant, Brief of mail, Schatting): rij met icoon links */
.knop-tweede.breed:has(> .ic) { justify-content: flex-start; padding-left: 12px; text-align: left; }
.knop-tweede.breed > .ic { margin-left: 0; }
.breed { width: 100%; margin-top: 22px; }
.knop-gevaar { background: color-mix(in srgb, var(--rood) 10%, var(--kaart)); color: var(--rood); border: 0; }
.bevestig .knop-gevaar, .knop-gevaar:active { background: var(--rood); color: var(--wit); }
.bevestig { margin-top: 14px; padding: 12px 14px; border: 1.5px solid var(--rood); border-radius: 14px; background: #FDECEE; }
.bevestig p { margin: 0 0 10px; font-weight: 600; }
.klant-form textarea { resize: vertical; min-height: 46px; }
.knoppenrij { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.knoppenrij .knop { flex: 1 1 150px; }

/* Mijn regio */
.regio-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.kiezer { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.kiezer select { margin: 0; width: auto; max-width: 190px; min-height: 40px; }
.uitleg { background: var(--uitleg-bg); border: 1px solid var(--uitleg-rand); border-radius: 12px; padding: 12px 14px; margin-top: 12px; font-size: 14px; }
.uitleg p { margin: 0; }
.filters { margin-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kans-chips { margin-top: 8px; align-items: center; }
.chips-label { font-size: 13px; font-weight: 600; color: var(--grijs); margin-right: 2px; }
.chip {
  min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--lijn); background: var(--kaart);
  font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--inkt); display: inline-flex; align-items: center; gap: 8px;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip:has(> .ic) { padding-left: 5px; }
.chip.actief { background: var(--knop); border-color: var(--knop); color: var(--wit); box-shadow: 0 3px 10px rgba(32,31,158,.22); }
.chips-klein { gap: 5px; }
.reden { display: inline-block; padding: 2px 9px; border-radius: 8px; background: var(--tag-bg); color: var(--tag-inkt); font-size: 12px; font-weight: 600; }
.meer-filters { margin-top: 10px; }
.meer-filters summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--blauw); padding: 8px 0; min-height: 36px; }
.filter-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 4px; }
.vink { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; font-weight: 600; min-height: 40px; cursor: pointer; }
.vink input { width: 22px; height: 22px; min-height: 0; margin: 0; flex: none; accent-color: var(--blauw); }
/* slider "minstens X maanden online" (0 = uit): groot tikvlak, waarde in het label */
.schuif { display: block; margin-top: 12px; }
.schuif-kop { display: block; font-size: 14px; font-weight: 600; }
.schuif-kop output { color: var(--blauw); font-weight: 800; }
.schuif input[type=range] { display: block; width: 100%; min-height: 44px; margin: 2px 0 0; padding: 0; border: 0; background: none; accent-color: var(--blauw); }
.schuif input[type=range]:focus { outline-offset: 2px; }
.schuif-schaal { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--grijs); margin-top: -6px; }
.lijst-status { color: var(--grijs); font-size: 13px; margin: 12px 0 8px; }
.lijst-meer { list-style: none; padding: 8px 0 24px; }
.lijst-meer .knop { width: 100%; }
.lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.leeg { text-align: center; color: var(--grijs); padding: 32px 16px; background: var(--kaart); border-radius: 18px; border: 1px solid var(--rand-kaart); box-shadow: var(--schaduw); }

/* Pandkaartje */
.pand {
  display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; width: 100%; text-align: left;
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: 18px; padding: 14px; cursor: pointer; color: inherit; font: inherit;
}
.pand:active { background: var(--druk); }
.score {
  width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--wit); font: 800 16px/1 var(--font-kop); flex: none; background: var(--grijs);
}
.score.hoog { background: var(--rood); }
.score.mid { background: var(--oranje); }
.score.laag { background: var(--grijs); }
.pand-tekst { min-width: 0; }
.pand-titel { font-weight: 700; font-size: 16px; letter-spacing: -.015em; overflow-wrap: anywhere; }
.pand-adres { color: var(--grijs); font-size: 13.5px; overflow-wrap: anywhere; }
.pand-adres.onbekend { font-style: italic; opacity: .75; }
.pand-info { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 13.5px; color: var(--inkt); }
.pand-prijs { font-weight: 800; color: var(--blauw); font-family: var(--font-kop); letter-spacing: -.01em; }
.pand-redenen { margin-top: 8px; }
.pand-notaris { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--inkt); }
.badges { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: 2px; }
.badge { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; line-height: 1.4; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.badge-nieuw { background: var(--knop); color: var(--wit); }
.badge-zm { background: var(--ic-zacht); color: var(--blauw); }
.badge-prijs { background: var(--rood); color: var(--wit); }
.badge-4mnd { background: var(--oranje); color: var(--wit); }
.opv { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--grijs); }
.opv.actief { color: var(--groen); }
/* plan 6: kaartje = kaartknop + voetregel met de Opvolgen-knop (geen knop in een knop) */
.pand-kaart { background: var(--kaart); border: 1px solid var(--rand-kaart); border-radius: 18px; overflow: hidden; box-shadow: var(--schaduw); }
.pand-kaart .pand { border: 0; border-radius: 0; }
.pand-voet { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px 72px; }
.knop-opvolg {
  min-height: 44px; padding: 0 16px 0 6px; border-radius: 999px; border: 0; background: var(--knop-zacht); color: var(--blauw);
  font-size: 14px; font-weight: 650; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.knop-opvolg:active { background: var(--knop-zacht-druk); }
.knop-opvolg.mijn { background: var(--knop-zacht); color: var(--blauw); }
.knop-opvolg.mijn .ic { background: linear-gradient(150deg, #2FB36A 0%, #17894A 75%); }
.knop-opvolg.ander { background: var(--tag-bg); color: var(--inkt); }
.knop-opvolg.ander .ic { background: var(--grijs); }
.knop-opvolg:disabled { opacity: .6; }
.fiche-opvolg { display: flex; flex: 1 1 140px; }
.fiche-opvolg .knop-opvolg { flex: 1; }
.onderkaart .knop-opvolg { width: 100%; }

/* Panelen */
.paneel { position: fixed; inset: 0 0 calc(var(--tab-h) + var(--veilig-onder)) 0; z-index: 40; background: rgba(20,22,60,.38); display: flex; justify-content: center; }
.paneel-blad { background: var(--kaart); width: 100%; max-width: 720px; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.paneel-kop {
  position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--kaart) 92%, transparent); border-bottom: 1px solid var(--lijn);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px;
}
.knop-terug {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--blauw); font-weight: 650; font-size: 16px;
  padding: 6px 12px 6px 4px; min-height: 44px; cursor: pointer; border-radius: 999px;
}
.knop-terug:active { background: var(--knop-zacht); }
.paneel-inhoud { padding: 16px 16px 32px; }
.fiche-top { display: flex; gap: 12px; align-items: center; }
.fiche-top h2 { margin: 0; overflow-wrap: anywhere; font-size: 18px; }
.fiche-prijs { font: 800 26px/1.2 var(--font-kop); letter-spacing: -.02em; color: var(--blauw); margin: 14px 0 8px; }
.gegevens {
  display: grid; grid-template-columns: auto 1fr; gap: 0 16px; font-size: 14px; margin: 10px 0 14px; padding: 4px 14px;
  background: var(--vlak); border-radius: 14px;
}
.gegevens dt, .gegevens dd { padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.gegevens dt:last-of-type, .gegevens dd:last-of-type { border-bottom: 0; }
.gegevens dt { color: var(--grijs); }
.gegevens dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.grafiek svg { width: 100%; height: auto; display: block; }
.grafiek .leeg { padding: 14px; background: var(--vlak); }
.lijn-lijst { list-style: none; margin: 0; padding: 0; }
.lijn-lijst li { padding: 9px 0; border-bottom: 1px solid var(--lijn); font-size: 14px; overflow-wrap: anywhere; }
.lijn-lijst li:last-child { border-bottom: 0; }
.lijn-lijst .sub { display: block; }
.lijn-lijst a { font-weight: 700; display: inline-block; padding: 4px 0; }

/* Klantformulier */
.klant-form fieldset { border: 1px solid var(--lijn); border-radius: 14px; padding: 12px 14px 14px; margin: 14px 0 0; display: grid; gap: 12px; min-width: 0; }
.klant-form legend { font-weight: 800; font-size: 13px; color: var(--blauw); padding: 0 6px; text-transform: uppercase; letter-spacing: .05em; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.segment { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--blauw); border-radius: 12px; overflow: hidden; margin-top: 12px; }
.segment label { margin: 0; }
.segment input { position: absolute; opacity: 0; pointer-events: none; width: 1px; min-height: 0; }
.segment span { display: flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 700; color: var(--blauw); cursor: pointer; }
.segment input:checked + span { background: var(--knop); color: var(--wit); }
.segment input:focus-visible + span { outline: 2px solid var(--rood); outline-offset: -3px; }
.gdpr { align-items: flex-start; margin-top: 16px; font-weight: 600; background: var(--uitleg-bg); border-radius: 12px; padding: 12px; }
.gdpr input { margin-top: 1px; }

.klant { background: var(--kaart); border: 1px solid var(--rand-kaart); border-radius: 18px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; justify-content: space-between; box-shadow: var(--schaduw); }
.klant-tekst { min-width: 0; }
.klant-naam { font-weight: 700; overflow-wrap: anywhere; }
.klant-soort { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 1px 7px; border-radius: 6px; margin-right: 6px; vertical-align: middle; }
.klant-soort.verkoper { background: var(--rood); color: var(--wit); }
.klant-soort.koper { background: var(--knop); color: var(--wit); }
.klant .knop { min-height: 40px; padding: 6px 12px; font-size: 13px; flex: none; }

/* Admin */
.tabel-wrap { overflow-x: auto; background: var(--kaart); border-radius: 14px; border: 1px solid var(--lijn); }
.tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel th, .tabel td { padding: 9px 8px; text-align: right; border-bottom: 1px solid var(--lijn); }
.tabel th:first-child, .tabel td:first-child { text-align: left; }
.tabel th { font-size: 11px; text-transform: uppercase; color: var(--grijs); letter-spacing: .04em; }
.tabel tr:last-child td { border-bottom: 0; }
.kleurstip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.bronnen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bronnen li { background: var(--kaart); border: 1px solid var(--lijn); border-left: 5px solid var(--groen); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.bronnen li.waarschuwing { border-left-color: var(--rood); background: #FDECEE; }
.bronnen strong { font-size: 14px; }
.gewichten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; padding: 14px; }
.gewichten .knop { grid-column: 1 / -1; }
.kantoren { display: grid; gap: 10px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; padding: 14px; }
.kantoor-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--lijn); }
.kantoor-rij label { font-size: 13px; }
.kantoor-rij input[type=text], .kantoor-rij input[type=url], .kantoor-rij select { width: 100%; }
.kantoor-rij .actief { display: flex; align-items: center; gap: 6px; }
.kantoor-rij .knop { min-height: 40px; padding: 6px 12px; font-size: 13px; }
.kantoren .knoppenrij { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 520px) { .kantoor-rij { grid-template-columns: 1fr; } }

/* Tabbalk */
.tabbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: color-mix(in srgb, var(--kaart) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid var(--lijn); padding-bottom: var(--veilig-onder); box-shadow: 0 -6px 22px rgba(20,22,60,.07);
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}
.tabbalk button {
  flex: 1; min-height: var(--tab-h); border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; font-size: 11px; font-weight: 650; color: var(--grijs); cursor: pointer; position: relative; min-width: 0; padding: 0 2px;
  -webkit-tap-highlight-color: transparent;
}
.tab-badge {
  position: absolute; top: 5px; left: calc(50% + 7px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--rood); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--kaart);
}
/* niet-actief: lichtblauwe cirkel; actief: blauw gevulde cirkel met wit icoon */
.tabbalk .ic { --ic: 32px; background: var(--ic-zacht); color: var(--blauw); box-shadow: none; transition: background .15s, color .15s, transform .15s; }
.tabbalk button.actief { color: var(--blauw); }
.tabbalk button.actief .ic { background: var(--ic-bg); color: #fff; box-shadow: none; }

/* Kaart: volledig scherm tussen kop en tabbalk (safe-areas), overlays erboven */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#scherm-kaart {
  position: fixed; top: var(--kop-h, 60px); left: 0; right: 0; bottom: calc(var(--tab-h) + var(--veilig-onder));
  padding: 0; margin: 0; max-width: none; z-index: 1; overflow: hidden;
}
#kaart { position: absolute; inset: 0; margin: 0; background: var(--kaart-vak); }
#kaart > .leeg { margin: 16px; }
.scherm-kaart .leaflet-bar { border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(20,22,60,.22); }
.scherm-kaart .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; color: var(--blauw); }
.scherm-kaart .leaflet-bottom { bottom: 60px; } /* attributie boven het ingeklapte paneel */
.scherm-kaart .leaflet-top.leaflet-left { left: env(safe-area-inset-left, 0px); }
.scherm-kaart .leaflet-top.leaflet-right { right: env(safe-area-inset-right, 0px); }
.kaart-knoppen { display: grid; gap: 8px; }
.kaart-knop {
  width: 44px; height: 44px; min-height: 44px; border-radius: 50%; border: 0; background: var(--ic-bg); color: #fff; padding: 0;
  font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 0 0 3px rgba(255,255,255,.9); /* witte rand: leesbaar op de kaart, geen schaduw */
  display: inline-flex; align-items: center; justify-content: center;
}
.kaart-knop .ic { --ic: 44px; background: none; box-shadow: none; }
.kaart-knop:active { transform: scale(.95); }

/* markers: onzichtbaar tikvlak van 44 px rond een kleine stip / foto */
.pt { display: flex !important; align-items: center; justify-content: center; background: none; border: 0; }
.pt-stip { display: block; width: 24px; height: 24px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 5px rgba(25,26,70,.5); }
.pt.gekozen .pt-stip { width: 34px; height: 34px; border-width: 4px; box-shadow: 0 0 0 3px var(--inkt); }
/* notariële verkoop: vierkantje met donkere rand (blijft herkenbaar naast de bolletjes, ook in kleur hoog/mid/laag) */
.pt-stip.pt-notaris { border-radius: 4px; border-color: var(--inkt); width: 22px; height: 22px; }
.pt.gekozen .pt-stip.pt-notaris { width: 32px; height: 32px; }
.legende-rij .pt-stip.pt-notaris { width: 20px; height: 20px; border-width: 3px; }
.legende-rij .pt-stip { width: 20px; height: 20px; }
.pt-opv .opv-foto { border: 2px solid #fff; }
/* Karel 11/10: te koop zonder kans = klein grijs bolletje; panden zonder adres = één genummerd punt per plaats (tik = openwaaieren) */
.legende-rij .pt-stip.pt-rust { width: 14px; height: 14px; border-width: 2px; margin: 0 3px; }
.groep-bol {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%;
  background: var(--kaart); color: var(--inkt); border: 3px dashed var(--grijs); font-weight: 800; font-size: 14px;
  box-shadow: 0 1px 6px rgba(25,26,70,.45); cursor: pointer;
}
.groep-bol.open { background: #191A46; color: #fff; font-size: 20px; } /* vast donker, ook in donkere modus (--inkt is daar licht) */
.legende-rij .groep-bol.legende-groep { width: 30px; height: 30px; flex: none; font-size: 12px; border-width: 2px; border-color: var(--grijs); }
/* Ons aanbod: makelaarsfoto met CV-rand + huisje rechtsonder */
.aanbod-speld { position: relative; display: inline-flex; }
.aanbod-huis {
  position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--knop); color: #fff;
  font-size: 13px; line-height: 20px; text-align: center; font-weight: 800; border: 2px solid #fff;
}
.legende-rij .aanbod-huis { width: 14px; height: 14px; font-size: 9px; line-height: 14px; right: -3px; bottom: -3px; border-width: 1px; }
.pt-aanbod .avatar { border: 2px solid #fff; }
.pt-aanbod.gekozen .aanbod-speld { transform: scale(1.12); }
.aanbod-bol { background: var(--knop); color: #fff; font-size: 24px; }
.onderkaart-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--blauw); }
.pt-opv.gekozen .opv-foto { transform: scale(1.12); }
.legende-rij .pt-stip { flex: none; }
.cl { display: flex !important; align-items: center; justify-content: center; background: none; }
.cl-bol {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 800; font-size: 18px;
  border: 4px solid rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(25,26,70,.35);
}

/* onderpaneel (legende + filters) en onderkaart (gekozen pand) */
.kaart-paneel, .onderkaart {
  position: absolute; z-index: 1001; left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); bottom: 8px;
  max-width: 560px; margin: 0 auto; background: var(--kaart); border-radius: 20px; box-shadow: 0 10px 32px rgba(20,22,60,.24);
}
.kaart-paneel-knop {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 14px; border: 0; background: none;
  font-weight: 700; color: var(--blauw); cursor: pointer; text-align: left;
}
.kaart-telling { margin-left: auto; color: var(--grijs); font-size: 12px; font-weight: 600; }
.kaart-paneel .pijl { transition: transform .2s; }
.kaart-paneel.open .pijl { transform: rotate(180deg); }
.kaart-paneel-inhoud { max-height: min(52vh, calc(100dvh - var(--kop-h, 60px) - var(--tab-h) - 140px)); overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 14px; border-top: 1px solid var(--lijn); }
.kaart-paneel-inhoud .kiezer { margin: 12px 0 10px; }
.kaart-paneel-inhoud .kiezer select { flex: 1; max-width: none; min-height: 44px; }
.kaart-paneel-inhoud .chip { min-height: 44px; }
.kaart-lagen { border: 0; margin: 4px 0 0; padding: 0; display: grid; gap: 0; }
.kaart-lagen legend { padding: 0; margin: 10px 0 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--blauw); }
.kaart-lagen .vink { margin-top: 0; min-height: 44px; }
.kaart-legende h4 { margin: 14px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--blauw); }
.legende-uitleg { margin: 0 0 6px; font-size: 12px; color: var(--grijs); }
.legende-rij { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 13px; font-weight: 600; }
.score-schaal { height: 14px; border-radius: 7px; margin: 6px 0 2px; }
.score-schaal-getallen { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--grijs); margin-bottom: 4px; }
/* OSM-naamsvermelding: klein, na 5 s ingeklapt tot een ⓘ-knopje (tikvlak 44 px), tik = weer tonen */
.scherm-kaart .leaflet-control-attribution { font-size: 10px; line-height: 1.4; padding: 2px 6px; border-radius: 6px 0 0 0; }
.scherm-kaart .leaflet-control-attribution.ingeklapt {
  font-size: 0; width: 44px; height: 44px; padding: 0; background: none; box-shadow: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
/* ingeklapt: de (onzichtbare) link mag niet focusbaar zijn; visibility overleeft dat Leaflet de inhoud herschrijft */
.scherm-kaart .leaflet-control-attribution.ingeklapt > * { visibility: hidden; }
.scherm-kaart .leaflet-control-attribution.ingeklapt::before {
  content: "ⓘ"; font-size: 18px; line-height: 26px; width: 26px; height: 26px; text-align: center; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--blauw); box-shadow: 0 1px 4px rgba(25,26,70,.35);
}
.onderkaart { padding: 12px; display: grid; gap: 10px; }
.onderkaart-top { display: grid; grid-template-columns: 46px 1fr 44px; gap: 10px; align-items: start; }
.onderkaart-tekst { min-width: 0; }
.onderkaart-adres { font-weight: 700; overflow-wrap: anywhere; }
.onderkaart-opv { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 600; }
.onderkaart-ongeveer { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--grijs); }
.onderkaart-sluit {
  width: 44px; height: 44px; min-height: 44px; border: 0; border-radius: 50%; background: var(--vlak); color: var(--inkt);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.onderkaart .knop { width: 100%; min-height: 44px; }
.onderkaart-knoppen { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.onderkaart-knoppen .knop { margin: 0; }
.fiche-acties { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.fiche-acties .knop { flex: 1 1 140px; }
.lijstkeuze { background: var(--vlak); border-radius: 12px; padding: 4px 12px 12px; margin-bottom: 8px; }
.lijstkeuze h3 { margin-top: 10px; }
.nieuwe-lijst { display: flex; gap: 8px; margin: 10px 0; }
.nieuwe-lijst input { flex: 1; min-width: 0; }
.nieuwe-lijst .knop { flex: none; }
.regio-knoppen { margin-top: 10px; }
.lijst-rij { grid-template-columns: 46px 1fr; }
.lijst-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--reden-bg); color: var(--blauw); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.route-lijst { padding: 0; }
.route-stop { display: grid; grid-template-columns: 46px 1fr; gap: 6px 12px; align-items: start; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; padding: 12px; }
.stop-knoppen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.stop-knoppen .knop { min-height: 44px; flex: 1 1 auto; }
.knop-x { min-width: 44px; min-height: 44px; border: 1px solid var(--lijn); background: var(--kaart); border-radius: 12px; font-size: 22px; color: var(--grijs); cursor: pointer; }
.straat-form { grid-column: 1 / -1; display: flex; gap: 8px; }
.straat-form input { flex: 1; min-width: 0; }
.route-delen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.route-delen .uitleg-klein { flex-basis: 100%; margin: 0; }
.lijst-verwijder { margin-top: 24px; display: grid; gap: 8px; }
.route-pt { display: flex !important; align-items: center; justify-content: center; background: none; border: 0; }
.route-nr { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--knop); color: #fff; font-weight: 800; font-size: 14px; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(25,26,70,.45); }
/* doelmarker van "📍 Kaart" op een voorstel (kaart.js zetDoel): pulserende blauwe ring rond het bedoelde pand */
.pt-doel { background: none; border: 0; }
.doel-ring { display: block; width: 52px; height: 52px; box-sizing: border-box; border-radius: 50%; border: 4px solid #2B7BFF; background: rgba(43,123,255,.16); box-shadow: 0 0 0 3px #fff, 0 2px 10px rgba(25,26,70,.5); animation: doel-puls 1.6s ease-in-out infinite; }
@keyframes doel-puls { 0%, 100% { transform: scale(.78); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .doel-ring { animation: none; } }
.flyer-blok h4 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--blauw); }
.flyer-blok .kiezer select { max-width: none; flex: 1; }
.flyer-blok .knop.breed { width: 100%; min-height: 44px; margin-top: 4px; }
.flyer-blok .knop-link { min-height: 44px; }
.flyer-stip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.flyer-balk { position: absolute; z-index: 1002; top: 8px; left: 64px; right: 64px; display: flex; align-items: center; gap: 8px;
  background: var(--toast-bg); color: #fff; border-radius: 14px; padding: 6px 6px 6px 12px; font-size: 13px; font-weight: 700; box-shadow: 0 4px 16px rgba(25,26,70,.35); }
.flyer-balk span { flex: 1; min-width: 0; }
.flyer-balk .knop { min-height: 44px; padding: 0 14px; }
.flyer-kaart { padding: 12px 14px; z-index: 1003; }
.flyer-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.flyer-knoppen .knop { flex: 1 1 120px; min-height: 44px; }
.flyer-knoppen .knop-link { min-height: 44px; }
.knop-waze { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; text-decoration: none; font-weight: 700; border-radius: 12px; }


@media (min-width: 720px) {
  .lijst { grid-template-columns: 1fr 1fr; }
}

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--veilig-onder) + 14px); z-index: 60; transform: translate(-50%, 20px);
  max-width: calc(100vw - 32px); background: var(--toast-bg); color: var(--wit); padding: 12px 18px; border-radius: 16px;
  font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 10px 30px rgba(20,22,60,.3);
}
.toast.zicht { opacity: 1; transform: translate(-50%, 0); }
.uitleg .keuzes { margin-top: 10px; }
.uitleg .chip { min-height: 40px; }

/* Profielfoto's (Hulp.avatar): foto over initialen in de regiokleur */
.avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: middle;
  border-radius: 50%; overflow: hidden; color: var(--wit); font-weight: 700; line-height: 1; letter-spacing: 0; user-select: none;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* Leaflet zet img in markers op width: auto (.leaflet-container .leaflet-marker-pane img): foto anders maar half breed */
.leaflet-container .leaflet-marker-pane .avatar img { width: 100%; height: 100%; }

/* Kopmenu */
.menu-knop {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 4px 0 4px 6px;
  background: none; border: 0; color: inherit; cursor: pointer;
}
.menu-knop .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.menu-knop .pijl { display: inline-flex; opacity: .85; }
.menu-knop .pijl .ic { --ic: 20px; background: rgba(255,255,255,.16); box-shadow: none; }
.menu {
  position: absolute; top: 100%; right: 12px; z-index: 30; min-width: 240px; max-width: calc(100vw - 24px); margin-top: 6px; padding: 8px;
  background: var(--kaart); color: var(--inkt); border-radius: 18px; box-shadow: var(--schaduw-hoog); border: 1px solid var(--rand-kaart);
}
.menu-kop { display: flex; align-items: center; gap: 12px; padding: 8px 8px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--lijn); }
.menu-kop .sub { display: block; }
.menu button[role=menuitem] {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 7px 10px; text-align: left; font-weight: 600; font-size: 15px;
  background: none; border: 0; border-radius: 12px; cursor: pointer; color: inherit;
}
.menu button[role=menuitem]:hover, .menu button[role=menuitem]:focus-visible { background: var(--vlak); outline: none; }
#uitloggen { color: var(--rood); margin-top: 4px; }

/* Mijn profiel */
.profiel-top { display: flex; align-items: center; gap: 14px; }
.profiel-top h2 { margin: 0; }
.uitleg-klein { font-size: 13px; color: var(--grijs); margin: 12px 0 0; }
.profiel-form { display: grid; gap: 12px; max-width: 420px; }
.foto-voorbeeld { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; justify-self: center; background: var(--vlak); }
.bestand-knop { position: relative; display: flex; align-items: center; justify-content: center; font-size: 15px; overflow: hidden; }
.bestand-invoer { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Avatars naast namen */
#fiche-opvolger { display: flex; align-items: center; gap: 8px; }
.met-avatar { white-space: nowrap; }
.met-avatar .avatar { margin-right: 8px; }
/* op de kaart: toast boven het onderpaneel */
body:has(#scherm-kaart:not([hidden])) .toast { bottom: calc(var(--tab-h) + var(--veilig-onder) + 72px); }
body:has(#kaart-onderkaart:not([hidden])) .toast { bottom: auto; top: calc(var(--kop-h, 60px) + 12px); }
.legende-rij .avatar { margin-left: 3px; }
a.knop { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; }
#lijsten-inhoud > .knop-link { min-height: 44px; }
.knop-waze { white-space: nowrap; }

/* admin: eigen aanbod (Omnicasa-import) */
.eigen-uitleg p { margin: 0 0 6px; }
.eigen-knop { width: 100%; min-height: 48px; margin-top: 8px; }
.eigen-resultaat { margin-top: 10px; }
.eigen-tellers { list-style: none; margin: 6px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.eigen-tellers li { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 10px; font-size: 13px; display: grid; }
.eigen-tellers strong { font-size: 20px; color: var(--blauw); }
.eigen-tellers li.let-op strong { color: var(--rood); }
.eigen-makelaars { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0; }
.eigen-makelaar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.eigen-fouten summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--blauw); cursor: pointer; }

/* donkere modus: themaknop, kop, kaart (enkel de tegels gefilterd, niet de markers of regiokleuren), grafiek, Leaflet-onderdelen */
.thema-knop {
  width: 44px; height: 44px; min-height: 44px; flex: none; border: 0; border-radius: 50%; background: none; padding: 0;
  color: inherit; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.thema-knop .ic { --ic: 36px; background: rgba(255,255,255,.15); }
.thema-knop:active .ic { background: rgba(255,255,255,.28); }
[data-theme="dark"] .kop { border-bottom: 1px solid var(--lijn); }
[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); }
[data-theme="dark"] .leaflet-container { background: var(--kaart-vak); }
[data-theme="dark"] .leaflet-bar a, [data-theme="dark"] .leaflet-bar a:hover { background: var(--kaart); color: var(--inkt); border-bottom-color: var(--lijn); }
[data-theme="dark"] .leaflet-popup-content-wrapper, [data-theme="dark"] .leaflet-popup-tip { background: var(--kaart); color: var(--inkt); }
[data-theme="dark"] .leaflet-control-attribution { background: rgba(28,28,30,.85); color: var(--grijs); }
[data-theme="dark"] .leaflet-control-attribution a { color: var(--blauw); }
[data-theme="dark"] .scherm-kaart .leaflet-control-attribution.ingeklapt { background: none; }
[data-theme="dark"] .scherm-kaart .leaflet-control-attribution.ingeklapt::before { background: rgba(28,28,30,.92); color: var(--blauw); }
[data-theme="dark"] .grafiek line[stroke="#E3E4EE"] { stroke: var(--lijn); }
[data-theme="dark"] .grafiek path[stroke="#201F9E"] { stroke: var(--blauw); }
[data-theme="dark"] .grafiek circle[fill="#201F9E"] { fill: var(--blauw); }
[data-theme="dark"] .grafiek text[fill="#191A46"] { fill: var(--inkt); }
[data-theme="dark"] .grafiek text[fill="#8A8BA3"] { fill: var(--grijs); }
[data-theme="dark"] .kaart-paneel, [data-theme="dark"] .onderkaart, [data-theme="dark"] .menu { box-shadow: 0 6px 24px rgba(0,0,0,.6); }

/* ---- plan 7 ---- */
/* zoekveld */
.zoek { position: relative; margin: 0 0 10px; }
.zoek input { padding-left: 44px; border-radius: 14px; -webkit-appearance: none; appearance: none; min-height: 48px; box-shadow: var(--schaduw); border-color: var(--rand-kaart); }
.zoek input:focus { border-color: var(--blauw); }
/* vergrootglas als lichtblauwe cirkel in het veld */
.zoek::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; pointer-events: none; z-index: 1;
  background: var(--ic-zacht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201F9E' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.6-4.6'/%3E%3C/svg%3E") center / 15px no-repeat;
}
[data-theme="dark"] .zoek::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7cf6' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.6-4.6'/%3E%3C/svg%3E"); }
#scherm-notaris .zoek { margin-top: 12px; }
/* lege toestand met knop */
.leeg .leeg-tekst { margin: 0; }
.leeg .knop { margin-top: 12px; min-height: 44px; }
/* skeletkaartjes + gedimde lijst tijdens het laden */
.skelet { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 14px; background: var(--kaart); border: 1px solid var(--rand-kaart); border-radius: 18px; box-shadow: var(--schaduw); }
.skelet-bol { width: 46px; height: 46px; border-radius: 50%; }
.skelet-tekst { display: grid; gap: 8px; padding-top: 4px; }
.skelet-lijn { display: block; height: 12px; border-radius: 6px; }
.skelet-lijn.l1 { width: 55%; height: 14px; } .skelet-lijn.l2 { width: 85%; } .skelet-lijn.l3 { width: 40%; }
.skelet-bol, .skelet-lijn { background: linear-gradient(90deg, var(--lijn) 25%, var(--vlak) 50%, var(--lijn) 75%); background-size: 200% 100%; animation: skelet 1.2s linear infinite; }
@keyframes skelet { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skelet-bol, .skelet-lijn { animation: none; } }
.lijst.laadt > .pand-kaart { opacity: .55; transition: opacity .15s; }
/* pull-to-refresh */
.ptr {
  position: fixed; z-index: 25; left: 50%; top: calc(var(--kop-h, 60px) - 40px); transform: translate(-50%, 0); display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; background: var(--kaart); color: var(--blauw); font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(25,26,70,.2); opacity: 0; pointer-events: none; transition: opacity .15s;
}
.ptr.zicht { opacity: 1; }
.ptr-ico { font-size: 18px; display: inline-flex; transition: transform .2s; }
.ptr.klaar .ptr-ico { transform: rotate(180deg); }
.ptr.draait .ptr-ico { animation: draai .8s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
/* toast met actieknop (Ongedaan maken) */
.toast { display: flex; align-items: center; gap: 12px; width: max-content; }
.toast.met-actie { padding: 6px 6px 6px 16px; }
.toast.met-actie.zicht { pointer-events: auto; } /* uitgefade toast mag nooit tikken onderscheppen */
/* in een paneel (fiche) boven de vaste actiebalk */
body:has(.paneel:not([hidden])) .toast { bottom: calc(var(--tab-h) + var(--veilig-onder) + 84px); }
.toast-actie { min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(255,255,255,.16); color: #fff; font-weight: 800; cursor: pointer; white-space: nowrap; }
/* icoon + label in de knoppen (opvolgen, snelle lijst) */
.knop-opvolg, .knop-lijst { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.k-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-ico { flex: none; display: inline-flex; }
/* snelknop laatste lijst + ▾ */
.snel-lijst { display: inline-flex; min-width: 0; border: 0; border-radius: 999px; overflow: hidden; background: var(--knop-zacht); }
.knop-lijst, .knop-lijst-pijl { min-height: 44px; border: 0; background: none; color: var(--blauw); font-size: 14px; font-weight: 650; cursor: pointer; }
.knop-lijst { flex: 1; min-width: 0; padding: 0 6px 0 6px; gap: 8px; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.knop-lijst.bevat { background: var(--knop-zacht-druk); }
/* ▾ minstens 44 px breed (tikdoel, review K3 #5) */
.knop-lijst-pijl { flex: none; width: 44px; min-width: 44px; border-left: 1px solid color-mix(in srgb, var(--blauw) 14%, transparent); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.knop-lijst:disabled { opacity: .6; }
/* onderkaart: greep + rij Opvolgen | lijst */
.onderkaart { transition: transform .16s ease-out; }
.onderkaart-greep { justify-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--lijn); margin: -4px 0 -2px; }
.onderkaart-rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 8px; }
.onderkaart-rij .knop-opvolg, .onderkaart-rij .snel-lijst { width: 100%; min-width: 0; }
.onderkaart .lijstkeuze { max-height: 38vh; overflow-y: auto; overscroll-behavior: contain; margin: 0; }
/* fiche: vaste actiebalk onderaan (boven de tabbalk) */
.paneel-blad { display: flex; flex-direction: column; }
.paneel-inhoud { flex: 1 0 auto; }
.fiche-balk {
  position: sticky; bottom: 0; z-index: 3; margin-top: auto; background: color-mix(in srgb, var(--kaart) 94%, transparent); border-top: 1px solid var(--lijn);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 -6px 22px rgba(20,22,60,.08); padding: 6px 8px; padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px));
}
.fiche-balk .lijstkeuze { max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; margin: 0 0 8px; }
/* breedtes zo dat alles past op 360 px (review K3 #6): lijst (naam + ▾ 44 px) breder, Waze/Advert. smaller */
.fiche-balk-knoppen { display: flex; gap: 6px; }
.fiche-balk-knoppen > * { flex: 1 1 0; min-width: 0; }
.fiche-balk-knoppen > .fiche-snellijst { flex-grow: 1.75; }
.fiche-balk-knoppen > .balk-knop { flex-grow: .65; }
.fiche-balk-knoppen > [hidden] { display: none !important; }
.fiche-opvolg, .fiche-snellijst { display: flex; min-width: 0; }
/* testversie 16/10: actiebalk = icoon in een blauwe cirkel met het label eronder, geen omkaderde knoppen */
.fiche-balk .knop-opvolg, .fiche-balk .knop-lijst, .balk-knop {
  flex: 1; min-width: 0; min-height: 60px; flex-direction: column; gap: 4px; padding: 4px 2px; font-size: 12px; border-radius: 14px;
  background: none; border: 0;
}
.fiche-balk .knop-opvolg:active, .fiche-balk .knop-lijst:active, .balk-knop:active { background: var(--knop-zacht); }
.fiche-balk .ic { --ic: 34px; }
.fiche-balk .k-lbl { max-width: 100%; }
.fiche-balk .snel-lijst { flex: 1; border-radius: 14px; background: none; }
.fiche-balk .knop-lijst { border-radius: 14px; padding: 4px 2px; }
.fiche-balk .knop-lijst.bevat { background: none; }
.fiche-balk .knop-lijst-pijl { width: 44px; min-height: 60px; border-left: 0; }
.fiche-balk .knop-lijst-pijl .ic { --ic: 24px; }
.fiche-balk .k-lbl { font-size: 11.5px; font-weight: 650; }
.fiche-balk .knop-opvolg.ander { color: var(--inkt); }
/* "Opdracht binnen" mag op twee regels */
.fiche-balk .knop-opvolg.opdracht .k-lbl { white-space: normal; line-height: 1.1; text-align: center; }
/* testversie 15/10: "In opvolging" mag in de smalle balken op twee regels */
.fiche-balk .knop-opvolg.mijn .k-lbl { white-space: normal; line-height: 1.1; text-align: center; }
.balk-knop {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 650; color: var(--blauw);
}
.balk-knop .k-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.knop-stop { color: var(--rood); min-height: 44px; display: inline-block; margin-top: 4px; }
/* kaart: panden buiten de regio's (legende) */
.legende-rij .pt-stip.pt-buiten { opacity: .55; border-color: #5F6180; border-width: 2px; }
/* plan 8 K4: contact noteren + herinnering + tijdlijn */
.herinnering-vraag { margin: 0 0 8px; font-weight: 800; color: var(--paars-inkt); }
.chip-datum { position: relative; display: inline-flex; align-items: center; overflow: hidden; }
.chip-datum input { position: absolute; inset: 0; opacity: 0; min-height: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; }
.tijdlijn { margin-top: 10px; }
.tijdlijn .contact-item { display: flex; align-items: flex-start; gap: 8px; }
.contact-tekst { flex: 1; min-width: 0; }
.contact-soort { font-weight: 700; }
.contact-notitie { margin: 4px 0 0; padding: 6px 10px; border-left: 3px solid var(--blauw); background: var(--vlak); border-radius: 0 8px 8px 0; white-space: pre-wrap; }
.contact-wis { flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--grijs); font-size: 16px; cursor: pointer; border-radius: 10px; }
.contact-wis:active { background: var(--druk); }
.badge-laat { background: var(--rood); color: var(--wit); }
.badge-vandaag { background: #9333EA; color: var(--wit); }
/* plan 8 K5: seintjes over opgevolgde panden */
.badge-sein { background: #B45309; color: var(--wit); text-transform: none; }
.pand-seintje { margin-top: 4px; font-size: 13px; font-weight: 700; color: #B45309; }
[data-theme="dark"] .pand-seintje { color: #F5A35C; }
.seintjes { list-style: none; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--uitleg-bg); border: 1px solid var(--uitleg-rand); font-size: 14px; font-weight: 700; }
.seintjes li + li { margin-top: 4px; }
/* plan 8 K6: brief/mail-kiezer in de fiche + Mijn sjablonen */
.fiche-brief { margin-top: 14px; }
.brief-kiezer { margin-top: 10px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--blauw); background: var(--kaart); }
.brief-kop { margin: 0 0 8px; font-weight: 800; color: var(--blauw); }
.brief-types { display: grid; gap: 6px; }
.brief-type { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  border: 1.5px solid var(--lijn); background: var(--kaart); font-weight: 700; font-size: 14px; text-align: left; cursor: pointer; color: var(--inkt); }
.brief-type.actief { border-color: var(--knop); background: var(--knop); color: var(--wit); }
.brief-voorstel { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--reden-bg); color: var(--blauw); }
.brief-type.actief .brief-voorstel { background: rgba(255,255,255,.22); color: var(--wit); }
.brief-acties { margin-top: 10px; }
.brief-acties .knop { min-height: 48px; }
.brief-acties .knop[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.brief-uitleg { margin-top: 8px; }
#brief-sjablonen { min-height: 44px; }
.brief-noteer { margin-top: 8px; padding: 12px; border-radius: 12px; border: 1.5px solid var(--paars); background: var(--paars-vlak); }
.sj-standaard { margin-top: 12px; }
.sjablonen-lijst { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.sj-item { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; min-height: 56px; padding: 10px 12px;
  border: 1px solid var(--lijn); border-radius: 14px; background: var(--kaart); text-align: left; cursor: pointer; color: var(--inkt); }
.sj-item:active { background: var(--druk); }
.sj-item-label { font-weight: 800; }
.sj-item-onderwerp { grid-column: 1; font-size: 13px; color: var(--grijs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-tag { grid-column: 2; grid-row: 1 / span 2; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--lijn); color: var(--inkt); }
.sj-tag.eigen { background: var(--knop); color: var(--wit); }
.sjabloon-editor { display: grid; gap: 10px; margin-top: 4px; }
.sjabloon-editor h3 { margin-top: 12px; }
.sjabloon-editor textarea { resize: vertical; min-height: 280px; line-height: 1.5; }
.sj-plaats-uitleg { margin: 0; }
.sj-plaats { display: flex; flex-wrap: wrap; gap: 6px; }
.sj-plaats .chip { min-height: 40px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.sj-voorbeeld { padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--blauw); background: var(--vlak); }
.sj-voorbeeld-onderwerp { margin: 4px 0 8px; font-weight: 800; color: var(--blauw); }
.sj-voorbeeld-tekst { white-space: pre-wrap; font-size: 14px; overflow-wrap: anywhere; }
.sj-knoppen .knop { min-height: 46px; }
.sj-annuleer { min-height: 44px; justify-self: center; }
/* review plan 8: wettelijke hint onder Mail, te lange mail = tekst om te kopiëren, nota voor admin */
.mail-wet { margin-top: 4px; font-weight: 600; }
.mail-lang { margin-top: 8px; padding: 12px; border-radius: 12px; border: 1px dashed var(--blauw); background: var(--vlak); display: grid; gap: 8px; }
.mail-lang textarea { width: 100%; font-size: 13px; line-height: 1.45; }
.mail-lang .knop { min-height: 46px; }
.sj-nota { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--rood); }
/* plan 9 K7: pand ingeven, eigen tip (ster), eigenaar */
.pand-form { display: grid; gap: 10px; }
.pand-form label { display: grid; gap: 4px; }
.adres-raster { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.adres-raster .straat, .adres-raster .gemeente { grid-column: 1 / -1; }
.suggesties { list-style: none; margin: -4px 0 0; padding: 4px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--kaart); display: grid; gap: 2px; }
.suggestie { width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--inkt); text-align: left; font: inherit; cursor: pointer; }
.suggestie:active, .suggestie:focus-visible { background: var(--druk); }
.pand-eig { border: 1px solid var(--lijn); border-radius: 12px; padding: 8px 12px; background: var(--kaart); }
.pand-eig summary { min-height: 40px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.pand-dubbel { padding: 12px; border-radius: 12px; border: 1.5px solid var(--oranje); background: var(--vlak); display: grid; gap: 8px; }
.pand-dubbel p { margin: 0; }
.badge-tip { background: #B8860B; color: var(--wit); text-transform: none; }
.pt-tip { display: flex; align-items: center; justify-content: center; }
.tip-ster { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: #B8860B; color: #fff; font-size: 19px; line-height: 1; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(25,26,70,.45); }
.pt-tip.gekozen .tip-ster { transform: scale(1.2); }
.legende-ster { width: 24px; height: 24px; font-size: 14px; }
.tip-bol { background: #B8860B; color: #fff; font-size: 24px; }
.pand-hier .knop { min-height: 44px; white-space: nowrap; }
.eigenaar-blok { display: grid; gap: 8px; }
.eig-kaart { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--lijn); background: var(--kaart); }
.eig-naam { font-size: 16px; }
.eig-acties { display: grid; gap: 8px; }
.eig-acties .knop { min-height: 46px; overflow-wrap: anywhere; }
.eig-adres, .eig-notitie { margin: 0; white-space: pre-wrap; }
.eig-kaart .sub { margin: 0; }
.eig-form { display: grid; gap: 10px; }
.eig-velden { display: grid; gap: 10px; }
.eig-velden label { display: grid; gap: 4px; }
.eig-velden .eig-vink { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; }
.eig-velden .eig-vink input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.eig-gdpr { margin: 0; }
.knop-gevaar-tekst { color: var(--rood); }
/* review plan 9 #3: pand op "niet meer contacteren" */
.niet-contacteren { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--rood); color: var(--rood); background: var(--kaart); }
.niet-contacteren p { margin: 0; }
.niet-contacteren-uitleg { color: var(--rood); margin: 8px 0 0; }
.mail-hint { color: var(--rood); }
.eig-velden select { min-height: 44px; }
/* plan 9 K8: specialisaties in admin */
.spec-form { display: grid; gap: 8px; }
.spec-rij { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.spec-naam { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.spec-rij select { min-height: 44px; max-width: 55%; }

/* Pandfoto: vast vak, geen verspringende layout; altijd aanwezig (advertentiefoto, luchtfoto of grijs huisje) */
.pand.met-foto { grid-template-columns: 46px 1fr 64px; }
.pand-foto { display: block; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--kaart-vak); flex: none; }
.pand-foto img, .fiche-foto-beeld img, .voorstel-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.onderkaart-top.met-foto { grid-template-columns: 46px 1fr 64px 44px; }
.fiche-foto { margin: 0 0 12px; }
.fiche-foto-beeld { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 260px; border-radius: 14px; overflow: hidden; background: var(--kaart-vak); }
/* Karel 10/10: geen advertentiefoto -> luchtfoto met een speld op het pand (beeld gecentreerd door object-fit: cover);
   ook geen coördinaten -> grijs huisje (data-URI, img-src 'data:' mag) */
.luchtfoto { position: relative; }
.luchtfoto::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: #E11D48; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4); pointer-events: none; }
.fiche-foto-beeld.luchtfoto::after { width: 14px; height: 14px; margin: -9px 0 0 -9px; }
.foto-label { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; line-height: 18px; }
.foto-leeg { background: var(--kaart-vak) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA3AF' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 11 12 4l9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E") center / 50% no-repeat; }
/* contact uit een openbare advertentie (onder het blok Eigenaar) */
.adv-contact-blok { margin-top: 10px; }
.adv-contact-kop { margin: 8px 0 6px; font-size: 14px; }
.adv-contact .knop { margin-top: 6px; }

/* ===== plan 10 A3: subtabs Mijn regio | Notaris, gemeentekiezer, getekende zone ===== */
.subtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: 14px; background: #E9EBF2; }
[data-theme="dark"] .subtabs { background: var(--druk); }
.subtab { min-height: 44px; border: 0; border-radius: 11px; background: none; font-weight: 650; font-size: 14px; color: var(--grijs); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.subtab .ic { --ic: 24px; background: var(--tag-bg); color: var(--grijs); box-shadow: none; }
.subtab.actief { background: var(--kaart); color: var(--blauw); box-shadow: 0 1px 2px rgba(20,22,60,.08), 0 2px 8px rgba(20,22,60,.08); }
.subtab.actief .ic { background: var(--ic-bg); color: #fff; }
.filter-breed { grid-column: 1 / -1; }
.gem-kiezer { position: relative; }
.gk-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.gk-chips { margin-bottom: 6px; }
.gk-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.gk-x { font-size: 17px; line-height: 1; opacity: .85; }
.gk-zoek { border-radius: 12px; }
.gk-lijst { position: absolute; z-index: 30; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 290px; overflow-y: auto;
  overscroll-behavior: contain; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 12px; box-shadow: 0 8px 24px rgba(25,26,70,.2); }
.gk-optie { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 0;
  background: none; border-radius: 8px; text-align: left; cursor: pointer; }
.gk-optie:hover, .gk-optie:focus-visible { background: var(--druk); }
.gk-optie.deel { padding-left: 24px; }
.gk-naam { font-weight: 700; font-size: 14px; }
.gk-optie.deel .gk-naam { font-weight: 600; }
.gk-sub { font-size: 12px; color: var(--grijs); white-space: nowrap; }
.gk-geen { padding: 12px; color: var(--grijs); font-size: 13px; }
.n-gemeenten { margin: 0 0 4px; }
.zone-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 12px 0 0; padding: 6px 12px; border-radius: 12px;
  background: rgba(229,56,74,.1); border: 1px solid rgba(229,56,74,.35); font-size: 13px; font-weight: 700; }
.zone-filter span { flex: 1 1 200px; }
.zone-filter .knop-link { min-height: 44px; color: var(--rood); }
.zone-balk { position: absolute; z-index: 1002; top: 8px; left: 62px; right: 62px; display: grid; gap: 6px; background: var(--toast-bg); color: #fff;
  border-radius: 14px; padding: 8px; font-size: 13px; font-weight: 700; box-shadow: 0 4px 16px rgba(25,26,70,.35); }
.zone-balk-tekst { padding: 0 4px; }
.zone-balk-knoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.zone-balk .knop { flex: 1 1 auto; min-height: 44px; padding: 0 10px; font-size: 13px; }
.zone-balk .knop-tweede { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.55); }
.teken-vlak { position: absolute; inset: 0; z-index: 650; touch-action: none; cursor: crosshair; background: rgba(229,56,74,.04); }
.zones-blok h4 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--blauw); }
.zones-chips { align-items: center; }
.zone-chip { display: inline-flex; align-items: center; }
.zone-chip .chip { border-radius: 999px 0 0 999px; border-right: 0; }
.zone-wis { min-height: 44px; min-width: 40px; border: 1px solid var(--lijn); border-radius: 0 999px 999px 0; background: var(--kaart); color: var(--grijs);
  font-size: 18px; cursor: pointer; }

/* ===== plan 10 A1: Agenda (opbouw zoals de kalender van CV Planning) ===== */
.scherm-agenda { padding-top: 0; }
.ag-band { margin: 0 -16px; padding: 10px 14px 14px; background: var(--kop-bg); border-radius: 0 0 18px 18px; color: #fff; }
[data-theme="dark"] .ag-band { background: #161618; border-bottom: 1px solid var(--lijn); }
.ag-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ag-label { flex: 1; text-align: center; font-size: 15px; font-weight: 700; color: rgba(255,255,255,.92); }
.ag-label::first-letter { text-transform: uppercase; }
[data-theme="dark"] .ag-label { color: var(--inkt); }
.ag-pijl { width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(255,255,255,.14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.ag-pijl:active { background: rgba(255,255,255,.26); }
[data-theme="dark"] .ag-pijl { background: var(--lijn); color: var(--inkt); }
.ag-bediening { display: flex; gap: 8px; margin-bottom: 10px; }
.ag-weergave { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border-radius: 11px; background: rgba(255,255,255,.12); }
[data-theme="dark"] .ag-weergave { background: var(--lijn); }
.ag-weergave button { min-height: 38px; border: 0; border-radius: 8px; background: none; color: rgba(255,255,255,.85); font-weight: 700; font-size: 13px; cursor: pointer; }
[data-theme="dark"] .ag-weergave button { color: var(--grijs); }
.ag-weergave button.actief { background: #fff; color: #201F9E; }
[data-theme="dark"] .ag-weergave button.actief { background: var(--knop); color: #fff; }
.ag-vandaag { min-height: 44px; padding: 0 14px; border: 0; border-radius: 11px; background: var(--rood); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
/* weekstrip (dag-chips zoals Planning) */
.ag-strip { display: flex; gap: 3px; touch-action: pan-y; }
.dag-chip { flex: 1; min-width: 0; min-height: 60px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 2px; border: 0;
  border-radius: 10px; background: none; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.dag-chip .dc-naam { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .5px; }
.dag-chip .dc-nr { font-size: 17px; font-weight: 700; color: rgba(255,255,255,.8); line-height: 1; }
.dag-chip .dc-stippen { display: flex; gap: 2px; min-height: 5px; }
.dag-chip .dc-dot { width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.dag-chip.vandaag .dc-nr { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.dag-chip.geselecteerd { background: var(--rood); }
.dag-chip.geselecteerd .dc-naam, .dag-chip.geselecteerd .dc-nr { color: #fff; }
[data-theme="dark"] .dag-chip .dc-naam { color: var(--grijs); }
[data-theme="dark"] .dag-chip .dc-nr { color: var(--inkt); }
[data-theme="dark"] .dag-chip.geselecteerd .dc-naam, [data-theme="dark"] .dag-chip.geselecteerd .dc-nr { color: #fff; }
/* maandraster met dagbalkjes */
.ag-maand { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; touch-action: pan-y; }
.ag-mkop { text-align: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.6); padding-bottom: 2px; }
[data-theme="dark"] .ag-mkop { color: var(--grijs); }
.ag-mdag { min-height: 48px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 1px 4px; border: 0; border-radius: 9px; background: none;
  cursor: pointer; color: #fff; font: inherit; -webkit-tap-highlight-color: transparent; }
[data-theme="dark"] .ag-mdag { color: var(--inkt); }
.ag-mdag.ander { opacity: .45; }
.ag-mnr { font-size: 14px; font-weight: 700; line-height: 1; }
.ag-mdag.vandaag .ag-mnr { text-decoration: underline; text-underline-offset: 3px; font-weight: 800; }
.ag-mdag.geselecteerd { background: var(--rood); color: #fff; opacity: 1; }
.ag-balkjes { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 72%; }
.ag-balkje { display: block; height: 4px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.4); }
.ag-meer { font-size: 9px; font-weight: 700; line-height: 1; text-align: center; opacity: .9; }
.ag-mdag .ag-cstip { align-self: center; }
.ag-cstip { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--oranje); flex: none; }
/* balk onder de band */
.ag-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }
.ag-wie { flex: 1 1 170px; }
.ag-wie select { flex: 1; max-width: none; min-height: 44px; }
.ag-vink { margin: 0; min-height: 44px; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ag-vink input { width: 20px; min-height: 20px; margin: 0; }
.ag-nieuw { margin-left: auto; min-height: 44px; }
.ag-outlook-fout { color: var(--rood); }
.ag-status { margin: 10px 0 6px; }
.ag-inhoud.laadt { opacity: .55; }
.ag-dagblok { margin-bottom: 6px; scroll-margin-top: 8px; }
.ag-dagkop { font-size: 15px; font-weight: 700; margin: 14px 0 8px; }
.ag-dagkop::first-letter { text-transform: uppercase; }
.ag-dagkop.vandaag { color: var(--blauw); }
.ag-dagkop.gesel::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rood); margin-right: 8px; vertical-align: middle; }
.ag-leeg { margin: 0 0 4px; color: var(--grijs); font-size: 13px; }
/* kaartjes (job-card van Planning) */
.ag-kaart { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin: 0 0 10px; border: 1px solid var(--rand-kaart); border-radius: 18px;
  background: var(--kaart); box-shadow: var(--schaduw); text-align: left; color: var(--inkt); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.ag-kaart:active { transform: scale(.99); }
[data-theme="dark"] .ag-kaart { border-color: transparent; }
.ag-streep { width: 3px; align-self: stretch; min-height: 40px; border-radius: 2px; flex: none; }
.ag-body { flex: 1; min-width: 0; display: block; }
.ag-type { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.ag-type .ic { --ic: 22px; }
[data-theme="dark"] .ag-type { filter: brightness(1.6); }
[data-theme="dark"] .ag-type .ic { filter: brightness(.62); }
.ag-titel { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--grijs); }
.ag-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.ag-meta .ic { --ic: 18px; }
.ag-kaart.te-laat { border-color: rgba(229,56,74,.45); }
.ag-bezet { opacity: .75; cursor: default; background: var(--druk); }
.ag-contacten { display: grid; gap: 2px; margin: 2px 0 8px; }
.ag-contact { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px; border: 0; background: none; text-align: left; font: inherit; font-size: 13px; color: var(--inkt); cursor: pointer; border-radius: 8px; }
.ag-contact:active { background: var(--druk); }
.ag-ctekst { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-cuur { color: var(--grijs); font-size: 12px; white-space: nowrap; }
/* dagweergave: tijdlijn */
.ag-heledag { margin: 12px 0 4px; }
.ag-tijdlijn { position: relative; margin: 10px 0 8px; border-top: 1px solid var(--lijn); }
.ag-uur { position: absolute; left: 0; right: 0; height: 52px; border-bottom: 1px solid var(--lijn); }
.ag-uurlabel { position: absolute; left: 0; top: 2px; width: 46px; font-size: 11px; font-weight: 600; color: var(--grijs); pointer-events: none; }
.ag-nu { position: absolute; left: 48px; right: 0; height: 2px; background: var(--rood); z-index: 2; pointer-events: none; }
.ag-nu::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--rood); }
.ag-blok { position: absolute; z-index: 1; overflow: hidden; display: flex; flex-direction: column; gap: 1px; padding: 4px 8px; border: 0; border-left: 4px solid var(--ag-kleur, var(--knop));
  border-radius: 8px; background: color-mix(in srgb, var(--ag-kleur, var(--knop)) 16%, var(--kaart)); color: var(--inkt); text-align: left; font: inherit; cursor: pointer; }
.ag-blok-bezet { --ag-kleur: var(--grijs); background: repeating-linear-gradient(135deg, var(--druk) 0 6px, var(--kaart) 6px 12px); cursor: default; opacity: .95; }
.ag-blok-titel { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-blok-sub { font-size: 11px; color: var(--grijs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* afspraak-formulier + fiche */
.afspraak-form label { margin-top: 12px; }
.afspraak-pand { font-weight: 600; color: var(--inkt); }
.af-duur { margin-top: 8px; }
.af-duur .chip { min-height: 40px; }
.fiche-afspraken { margin-top: 8px; }
.fiche-afspraak-rij { display: grid; width: 100%; gap: 2px; min-height: 44px; padding: 6px 0; border: 0; background: none; text-align: left; color: var(--inkt); font: inherit; cursor: pointer; }

.ag-band.vast { position: sticky; top: 0; z-index: 6; }
:root { --ag-eigen: #ffffff; }
[data-theme="dark"] { --ag-eigen: #5b7cf6; }

/* ===== plan 10 A2: Outlook in Mijn profiel ===== */
.outlook-blok .outlook-knop { margin-top: 10px; }
.outlook-status { margin: 0; font-weight: 700; color: var(--groen); }
.outlook-status.fout { color: var(--rood); }
.outlook-adres { word-break: break-all; }
.outlook-let-op { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--rood) 12%, transparent); color: var(--rood); font-weight: 700; font-size: 14px; }
.outlook-vink { margin-top: 10px; min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.outlook-vink input { width: 22px; min-height: 22px; margin: 0; flex: none; }
.outlook-hint { margin-top: 10px; }

/* ===== Karel 10/10: pushmeldingen aansporen (balk onder de kop, push.js) ===== */
.push-balk {
  flex: none; display: flex; align-items: center; gap: 10px; background: var(--kaart); color: var(--inkt); border-bottom: 1px solid var(--lijn);
  padding: 8px calc(10px + env(safe-area-inset-right, 0px)) 8px calc(16px + env(safe-area-inset-left, 0px)); box-shadow: 0 4px 14px rgba(25,26,70,.06);
}
.push-tekst { flex: 1; min-width: 0; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; }
.push-knoppen { flex: none; display: flex; align-items: center; gap: 2px; }
#push-aan { min-height: 44px; padding: 8px 14px; font-size: 14px; }
#push-later { min-height: 44px; padding: 0 8px; color: var(--grijs); }

/* Mijn panden (Karel 11/10): ruim, grote tikvlakken */
.mijn-panden .mp-sectie { margin: 8px 0 28px; }
.mp-kop { font-size: 19px; margin: 6px 0 12px; display: flex; align-items: center; gap: 10px; }
.mp-kop .ic { --ic: 30px; }
.mp-kop-rij { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mp-teller { font-size: 14px; font-weight: 600; color: var(--blauw); background: var(--reden-bg); padding: 3px 10px; border-radius: 999px; }
.mp-klaar { list-style: none; text-align: center; padding: 18px; font-size: 16px; font-weight: 600; color: var(--groen); }
.voorstellen { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.voorstel { background: var(--kaart); border: 1px solid var(--rand-kaart); border-radius: 20px; padding: 14px; box-shadow: var(--schaduw); }
.voorstel.behandeld { opacity: .6; }
.voorstel-kop { display: flex; gap: 12px; width: 100%; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.voorstel-foto { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 12px; object-fit: cover; background: var(--kaart-vak); overflow: hidden; }
.voorstel-tekst { min-width: 0; display: grid; gap: 4px; align-content: start; }
.voorstel-titel { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; }
.voorstel-adres { font-size: 15px; }
.voorstel-adres.onbekend { color: var(--grijs); font-style: italic; }
.voorstel-info { font-size: 14px; color: var(--grijs); }
.voorstel-redenen { margin: 10px 0 8px; padding: 0; list-style: none; display: grid; gap: 5px; }
.voorstel-redenen li { font-size: 14.5px; line-height: 1.35; padding-left: 20px; position: relative; }
.voorstel-redenen li::before { content: '✓'; position: absolute; left: 2px; color: var(--groen); font-weight: 700; }
.voorstel-brief { margin: 2px 0 8px; }
.voorstel-status { font-size: 14px; font-weight: 600; margin: 4px 0 8px; display: flex; gap: 10px; align-items: center; }
.voorstel-acties { display: flex; flex-wrap: wrap; gap: 8px; }
.voorstel-acties > * { min-height: 44px; }

/* Afhandelen (Karel 12/10): actie afpunten en meteen de volgende inplannen, met uitleg (js/afhandelen.js) */
.afh-form { display: flex; flex-direction: column; gap: 12px; padding-bottom: 28px; }
.afh-form h2 { margin: 0; }
.afh-soort { margin: 0; font-size: 14px; font-weight: 800; color: var(--paars-inkt); }
.afh-soort.te-laat { color: var(--rood); }
.afh-plan { margin: 0; padding: 10px 12px; border-left: 4px solid var(--paars); border-radius: 0 10px 10px 0; background: var(--paars-vlak); color: var(--inkt); font-style: italic; }
.afh-fiche { align-self: flex-start; }
.afh-ander { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--uitleg-bg); border: 1px solid var(--uitleg-rand); }
.afh-blok { margin: 0; padding: 12px 14px 16px; border: 1px solid var(--rand-kaart); border-radius: 20px; background: var(--kaart); display: flex; flex-direction: column; gap: 12px; min-width: 0; box-shadow: var(--schaduw); }
.afh-blok legend { padding: 0 6px; font: 700 16px/1.3 var(--font-kop); letter-spacing: -.01em; color: var(--blauw); float: left; width: 100%; margin: 2px 0 0; }
.afh-blok legend + * { clear: both; }
.afh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.afh-chips .chip { min-height: 46px; font-size: 15px; padding-right: 16px; }
.afh-chips .chip .ic { --ic: 32px; }
.afh-sub { margin: 2px 0 0; font-size: 14px; font-weight: 700; }
.afh-sub strong { color: var(--paars-inkt); margin-left: 4px; }
.afh-of { margin: 0; text-align: center; font-weight: 600; color: var(--grijs); }
.afh-veld { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.afh-veld textarea { width: 100%; }
.afh-uur input { max-width: 160px; }
.afh-wanneer-blok { display: flex; flex-direction: column; gap: 10px; }
.afh-bewaar { position: sticky; bottom: 10px; min-height: 54px; font-size: 16px; box-shadow: 0 8px 22px rgba(32,31,158,.32); }
/* kaartjes: uitleg bij de volgende actie, knop Afhandelen naast Opvolgen */
.pand-actie-uitleg { margin-top: 4px; font-size: 13px; color: var(--paars-inkt); }
.knop-afhandelen {
  min-height: 44px; padding: 6px 16px 6px 6px; border-radius: 999px; border: 0; background: var(--knop); color: var(--wit); font-size: 14px; font-weight: 650;
  cursor: pointer; line-height: 1.2; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(32,31,158,.26);
}
.knop-afhandelen:active { background: var(--knop-druk); }
/* agenda: uitleg op het kaartje, afgehandelde afspraak grijs */
.ag-uitleg { font-style: italic; }
.ag-kaart.afgehandeld, .ag-blok.afgehandeld { opacity: .6; }
.af-afhandelen { margin: 4px 0 6px; }
.af-afgehandeld { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--vlak); font-weight: 600; }
/* fiche: volgende actie + afhandelen */
.fiche-actie {
  display: flex; align-items: center; gap: 12px; margin: 8px 0 10px; padding: 14px; border: 1px solid var(--rand-kaart); border-radius: 20px;
  background: var(--kaart); box-shadow: var(--schaduw);
}
.fiche-actie-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fiche-actie-kop { margin-top: 6px; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); }
/* volgende actie: icoon in de cirkel + wat + wanneer */
.fiche-actie-wat { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.fiche-actie-wat .ic { --ic: 36px; }
.fiche-actie-wat.te-laat .ic { background: linear-gradient(150deg, #F05A6B 0%, #D42A3E 75%); }
.fiche-actie-uitleg { font-size: 13px; color: var(--paars-inkt); overflow-wrap: anywhere; }
.fiche-actie-knop { flex: none; min-height: 48px; }
/* testversie 15/10: opvolgblok — status als label, laatste contact, volgende actie */
.fiche-actie { flex-wrap: wrap; }
.fiche-actie .fiche-actie-knop { flex: 1 1 100%; }
.fiche-status-label { align-self: flex-start; padding: 3px 11px; border-radius: 999px; background: var(--paars-vlak); border: 0; color: var(--paars-inkt); font-size: 12px; font-weight: 750; }
.fiche-status-label.status-opdracht { background: color-mix(in srgb, var(--groen) 14%, transparent); color: var(--groen); }
.fiche-status-label.status-geen-interesse { background: var(--tag-bg); color: var(--grijs); }
.fiche-laatste { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grijs); overflow-wrap: anywhere; }
.fiche-laatste .ic { --ic: 22px; }
.fiche-actie strong.te-laat { color: var(--rood); }

/* 12/10: schattingsverslag */
.schat-adres-tekst { font-weight: 600; margin: 0 0 .5rem; }
.schat-strikt { margin-top: .25rem; }
.schat-stappen { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .4rem; }
.schat-stappen li { color: var(--grijs); }
.schat-stappen li.klaar { color: inherit; }
.schat-stappen li.nu { color: inherit; font-weight: 700; }
.schat-waarde { font-size: 2.2rem; font-weight: 800; margin: .5rem 0 0; }
.schat-verschil { font-weight: 600; }
.schat-punten { display: grid; gap: .75rem; margin: .5rem 0 1rem; }
.schat-punt { display: flex; gap: .75rem; align-items: flex-start; border: 1px solid var(--lijn); border-radius: 10px; padding: .5rem; }
.schat-punt img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; flex: none; }
.schat-punt-info { display: grid; gap: .15rem; min-width: 0; }
.schat-punt-prijs { font-weight: 700; }
.schat-pdf { margin-top: .5rem; }
.schat-recent { margin-top: 1.5rem; }
.fiche-schattingen { margin-top: .25rem; }

/* 12/10 middag: wizard, schuifbalk en foto's */
.schat-stappenbalk { list-style: none; display: flex; gap: .4rem; padding: 0; margin: .25rem 0 1rem; font-size: .9rem; }
.schat-stappenbalk li { flex: 1; text-align: center; padding: .35rem .25rem; border-radius: 8px; background: var(--vlak); color: var(--grijs); }
.schat-stappenbalk li.klaar { color: inherit; }
.schat-stappenbalk li[aria-current="step"] { background: var(--knop); color: var(--wit); font-weight: 700; }
.schat-immo { font-size: 1.3rem; font-weight: 700; margin: 0; }
.schat-waarschuwing { background: var(--uitleg-bg); border: 1px solid var(--uitleg-rand); border-radius: 8px; padding: .5rem .75rem; font-weight: 600; }
/* 12/10 (Brecht): zonder Mijn gegevens een opvallende melding + knop i.p.v. een stil uitgeschakelde "Bereken waarde" */
.schat-profiel, .gegevens-reden { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--rood) 10%, transparent); color: var(--rood); font-weight: 700; font-size: 14px; }
.schat-profiel p { margin: 0 0 8px; }
.gegevens-reden { margin: 0 0 10px; }
/* het profiel opent ook vanuit de schatting (of de fiche): altijd boven de andere panelen */
#profiel-paneel { z-index: 41; }
.waarde-schuif { margin: .25rem 0 1rem; }
.waarde-kop { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.waarde-min, .waarde-plus { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--lijn); background: var(--kaart); font-size: 1.5rem; }
.waarde-bedrag { font-size: min(2rem, 7.4vw); white-space: nowrap; font-weight: 800; background: none; border: none; color: inherit; padding: .25rem .5rem; border-bottom: 2px dashed var(--lijn); }
.waarde-invoer { font-size: 2rem; font-weight: 800; width: 11ch; text-align: center; }
.waarde-balk { width: 100%; height: 2.5rem; margin-top: .5rem; accent-color: var(--knop); }
.waarde-merken { position: relative; height: 1.4rem; margin: 0 .6rem; }
.waarde-merken .waarde-merk { position: absolute; transform: translateX(-50%); font-size: 1rem; line-height: 1; }
.waarde-merk-immo { color: var(--knop); } .waarde-merk-vraag { color: var(--rood); } .waarde-merk-punt { color: var(--grijs); }
.waarde-legende { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .75rem; font-size: .8rem; color: var(--grijs); }
.waarde-verschil { text-align: center; font-weight: 600; margin: .25rem 0 0; }
.schat-fotoraster { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .5rem 0; }
.schat-foto { position: relative; aspect-ratio: 4 / 3; background: var(--vlak); border-radius: 8px; overflow: hidden; }
.schat-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.schat-foto.bezig img { opacity: .5; }
.schat-foto.mislukt { outline: 2px solid var(--rood); outline-offset: -2px; }
.schat-foto-titel { position: absolute; left: .25rem; top: .25rem; background: var(--knop); color: var(--wit); font-size: .75rem; padding: .1rem .35rem; border-radius: 6px; }
.schat-foto-status { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5rem; }
/* eindreview I1: reden (max 2 regels) en de twee knoppen samen in één strook onderaan de tegel, niet over elkaar */
.schat-foto-onder { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .15rem; padding: .15rem .2rem .2rem; background: var(--kaart); }
.schat-foto-fout { color: var(--rood); font-size: .68rem; font-weight: 700; line-height: 1.15; text-align: center; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.schat-foto-foutknoppen { display: flex; gap: .2rem; }
.schat-foto-foutknoppen button { flex: 1 1 0; min-width: 0; display: grid; place-items: center; padding: .1rem 0; border-radius: 6px; border: 1px solid var(--blauw);
  background: var(--kaart); color: var(--blauw); font-size: .6rem; font-weight: 700; line-height: 1.05; cursor: pointer; }
.schat-foto-ico { font-size: .95rem; }
/* eindreview I2: gekozen tegel omrand, acties in een volle-breedte rij onder het raster */
.schat-foto.gekozen { outline: 3px solid var(--knop); outline-offset: -3px; }
.schat-foto-actierij { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .5rem; }
/* labels op één regel: past het niet, dan Annuleren op een eigen regel eronder (volle breedte) */
.schat-foto-actierij .knop { flex: 1 1 auto; min-height: 44px; padding: 8px 12px; white-space: nowrap; }
.schat-foto-actierij .knop:disabled { opacity: .55; }
.schat-gekozen { font-size: 1.15rem; font-weight: 700; margin: .75rem 0; }
.schat-annuleer { margin-top: .6rem; }
.schat-pdf-fout { margin-top: .75rem; }
.schat-maak:disabled, .schat-annuleer:disabled, .schat-opnieuw:disabled { opacity: .55; }
.schat-foto-knop { min-height: 44px; }
.schat-foto-invoer { display: none; }
.schat-maak { margin-top: 1rem; }
.waarde-merken .waarde-merk-punt { font-size: .6rem; }
.schat-punten-det { margin: .5rem 0 1rem; }
.schat-punten-det summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--blauw); cursor: pointer; font-size: .9rem; }
.schat-punten-det summary::after { content: '▾'; margin-left: auto; padding-left: .5rem; }
.schat-punten-det[open] summary::after { content: '▴'; }
/* 12/10 (Karel): map "Contacten uit advertenties" in het tabblad Klanten */
.klanten-mappen { margin: 4px 0 12px; }
.map-kop { font-size: 15px; margin: 18px 0 6px; }
.adv-contact-pand { display: block; text-align: left; padding: 6px 0 2px; font-weight: 600; overflow-wrap: anywhere; min-height: 32px; }
.adv-contact-rij > .knop { flex: none; min-width: 48px; }

/* testversie 15/10: Geschiedenis in de fiche */
.fiche-geschiedenis { margin-top: 18px; border-top: 1px solid var(--lijn); }
.fiche-geschiedenis > summary { min-height: 52px; display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; color: var(--blauw); list-style: none; }
.fiche-geschiedenis > summary::-webkit-details-marker { display: none; }
.fiche-geschiedenis > summary::after { content: '▾'; margin-left: auto; padding-left: .5rem; }
.fiche-geschiedenis[open] > summary::after { content: '▴'; }
.fiche-geschiedenis[open] > summary { margin-bottom: 4px; }

/* testversie 15/10: Mijn regio — ＋-menu, zoekveld + Filters-knop */
#scherm-regio .regio-kop { flex-wrap: nowrap; }
#scherm-regio .regio-kop h1 { min-width: 0; }
.plus-wrap { position: relative; flex: none; }
.plus-knop {
  width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; background: var(--ic-bg); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.plus-knop .ic { --ic: 48px; background: none; box-shadow: none; }
.plus-knop .ic svg { stroke-width: 2.4; width: 46%; height: 46%; }
.plus-knop[aria-expanded="true"] .ic svg { transform: rotate(45deg); }
.plus-knop .ic svg { transition: transform .18s; }
.plus-menu { right: 0; top: calc(100% + 6px); }
.zoek-rij { display: flex; gap: 8px; align-items: stretch; }
.zoek-rij .zoek { flex: 1; min-width: 0; margin: 0; }
.filter-knop {
  flex: none; min-height: 48px; padding: 0 14px 0 9px; border-radius: 14px; border: 1px solid var(--rand-kaart); background: var(--kaart); color: var(--inkt);
  font-weight: 650; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--schaduw);
}
.filter-knop .ic { --ic: 28px; }
.filter-knop.open { border-color: var(--blauw); color: var(--blauw); }
.filter-aantal { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--rood); color: var(--wit); font-size: 12px; line-height: 20px; text-align: center; }
.filter-paneel { margin-top: 10px; padding: 14px; border: 1px solid var(--rand-kaart); border-radius: 18px; background: var(--kaart); display: grid; gap: 12px; box-shadow: var(--schaduw); }
.filter-paneel .kans-chips { margin-top: 0; }
#scherm-regio .filters { margin-top: 10px; margin-bottom: 10px; }

.fiche-klant { margin-top: 10px; }

/* testversie 15/10: oranje balk bovenaan */
body.testversie .kop { padding-top: 8px; }
#test-balk { position: sticky; top: 0; z-index: 40; padding: calc(4px + env(safe-area-inset-top, 0px)) 12px 4px; background: var(--oranje); color: var(--wit); font-size: 12px; font-weight: 800; text-align: center; letter-spacing: .02em; }

#fiche-opvolging-kop { scroll-margin-top: calc(64px + env(safe-area-inset-top, 0px)); }
/* verplaatsen van de volgende actie (fiche) */
.fiche-verplaats-knop {
  align-self: flex-start; min-height: 44px; margin-top: 4px; padding: 0 16px 0 6px; background: var(--knop-zacht); border: 0; border-radius: 999px; color: var(--blauw);
  font-size: 14px; font-weight: 650; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.fiche-verplaats-knop .ic { --ic: 28px; }
.fiche-verplaats-rij { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.fiche-verplaats-rij .chip { min-height: 44px; }

/* testversie 16/10: icoontjes in de onderdelen (js/ico.js) */
.afh-nr { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%;
  background: var(--ic-bg); color: #fff; font: 800 13px/1 var(--font-kop); vertical-align: 1px; }
.afh-soort, #afh-pand, .afspraak-pand, .herinnering-vraag, .push-tekst, .voorstel-status, .contact-soort, .pand-seintje, .seintjes li, .fiche-afspraak-rij strong {
  display: flex; align-items: center; gap: 8px; }
.afh-bewaar .ic, .fiche-actie-knop .ic { --ic: 26px; }
.contact-wis { display: inline-flex; align-items: center; justify-content: center; }
.contact-wis .ic, .onderkaart-sluit .ic { --ic: 30px; }
.onderkaart-sluit { display: inline-flex; align-items: center; justify-content: center; background: none; padding: 0; }
.lijst-ico { background: none; }
.mp-klaar { display: flex; align-items: center; justify-content: center; gap: 10px; }
.knop-ico { min-width: 48px; padding: 0; }
.knop-ico .ic { margin: 0; }
.fiche-schatting-rij { display: inline-flex; align-items: center; gap: 8px; text-align: left; }
.ag-contact .ic { flex: none; }
.tip-bol .ic, .aanbod-bol .ic { --ic: 30px; background: none; color: #fff; }
.tip-bol .ic svg, .aanbod-bol .ic svg { width: 70%; height: 70%; }
.kaart-paneel .pijl { display: inline-flex; }
.knop-waze .ic { --ic: 26px; }
.voorstel-acties .knop { min-height: 44px; padding: 8px 14px; }
.voorstel-acties .knop .ic { --ic: 24px; margin-left: -4px; }
.brief-kiezer { border: 1px solid var(--rand-kaart); box-shadow: var(--schaduw); border-radius: 18px; }
.ag-pijl { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ag-pijl .ic { --ic: 30px; background: none; box-shadow: none; }
.ag-nieuw .ic, .klanten-mappen .chip .ic { --ic: 24px; }
#klanten-mappen .chip .ic { margin-left: 0; }
.menu-kop .avatar { box-shadow: 0 0 0 3px var(--ic-zacht); }
#test-balk { box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.regio-tal { display: block; margin-top: 3px; font: 600 13px/1.3 var(--font-tekst); letter-spacing: 0; color: var(--grijs); }
.knoppenrij .knop { flex: 1 1 200px; }
.fiche-balk .knop-lijst-pijl .ic { background: var(--ic-zacht); color: var(--blauw); box-shadow: none; }
.scherm.login { max-width: none; background: radial-gradient(130% 55% at 50% -5%, rgba(53,52,198,.22) 0%, rgba(53,52,198,.06) 45%, transparent 70%); }
[data-theme="dark"] .scherm.login { background: radial-gradient(130% 55% at 50% -5%, rgba(91,124,246,.22) 0%, transparent 65%); }

/* ===== testversie 16/10: Mijn panden = Opvolging | Voorstellen | Lijsten (js/opvolging.js) ===== */
.mp-subtabs { grid-template-columns: repeat(3, auto); }
.mp-subtabs .subtab { gap: 5px; padding: 0 6px; font-size: 13.5px; white-space: nowrap; }
.mp-subtabs .subtab .ic { flex: none; --ic: 22px; }
.mp-sub-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--tag-bg); color: var(--grijs); font-size: 11.5px; font-weight: 750; line-height: 20px; text-align: center; }
.mp-sub-n:empty { display: none; }
.mp-sub-n.rood { background: var(--rood); color: #fff; }
.subtab.actief .mp-sub-n:not(.rood) { background: var(--ic-zacht); color: var(--blauw); }
/* lijsten-overzicht enkel bij subtab Lijsten; een geopende lijst (mp-secties verborgen) altijd */
#scherm-lijsten:not([data-sub="lijsten"]) #mp-secties:not([hidden]) ~ #lijsten-inhoud { display: none; }
/* teamrij (admin) */
.opv-team { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 12px; padding: 2px 16px 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.opv-team::-webkit-scrollbar { display: none; }
.opv-lid { flex: none; scroll-snap-align: start; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 14px 10px 10px; border-radius: 18px;
  border: 1px solid var(--rand-kaart); background: var(--kaart); color: var(--inkt); text-align: left; font: inherit; cursor: pointer; box-shadow: var(--schaduw); }
.opv-lid.actief { border-color: var(--blauw); background: var(--knop-zacht); }
.opv-lid-tekst { display: grid; gap: 1px; font-size: 12px; color: var(--grijs); white-space: nowrap; }
.opv-lid-tekst strong { font-size: 14px; color: var(--inkt); }
.opv-lid-laat { color: var(--rood); font-weight: 700; }
.opv-lid-opdracht { color: var(--groen); font-weight: 700; }
.opv-kop { margin: 0 0 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.opv-kop h2 { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.opv-terug { min-height: 44px; padding: 0 14px; font-size: 13.5px; }
.opv-kop-sub { font: 700 11px/1 var(--font-tekst); color: var(--grijs); text-transform: uppercase; letter-spacing: .08em; }
/* tegels */
.opv-tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.opv-tegel { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 86px; padding: 10px 2px 8px; border-radius: 18px; border: 1px solid var(--rand-kaart);
  background: var(--kaart); color: var(--inkt); font: inherit; cursor: pointer; box-shadow: var(--schaduw); }
.opv-tegel .ic { --ic: 30px; margin-bottom: 2px; }
.opv-tegel-n { font: 800 20px/1.1 var(--font-kop); }
.opv-tegel-lbl { font-size: 11.5px; font-weight: 650; color: var(--grijs); white-space: nowrap; }
.opv-tegel-laat:not(:disabled) .opv-tegel-n { color: var(--rood); }
.opv-tegel.actief { background: var(--knop); border-color: var(--knop); }
.opv-tegel.actief .opv-tegel-n, .opv-tegel.actief .opv-tegel-lbl { color: #fff; }
.opv-tegel.actief .ic { background: #fff; color: var(--knop); }
.opv-tegel:disabled { opacity: .45; cursor: default; box-shadow: none; }
/* zoeken + sorteren + tip */
.opv-zoekrij { display: flex; gap: 8px; margin-bottom: 10px; }
.opv-zoekrij .zoek { flex: 1; min-width: 0; margin: 0; }
.opv-sorteer { flex: none; }
/* 16px: kleiner zoomt iOS Safari in bij het openen; plaats komt van het kortere zoekveld ("Zoek adres") */
.opv-sorteer select { width: auto; max-width: 172px; min-height: 48px; padding: 10px 8px 10px 10px; border-radius: 14px; font-size: 16px; font-weight: 600; }
.opv-tip { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: var(--knop-zacht); color: var(--blauw); font-size: 13.5px; font-weight: 600; }
.opv-tip p { margin: 0; flex: 1; }
.opv-tip .knop { min-height: 44px; padding: 0 14px; background: var(--kaart); }
/* groepen */
.opv-groep { margin: 0 0 6px; }
.opv-groep-kop { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); }
.opv-groep-kop.laat { color: var(--rood); }
.opv-groep-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--tag-bg); color: var(--inkt); font-size: 12px; line-height: 22px; text-align: center; letter-spacing: 0; }
.opv-groep-kop.laat .opv-groep-n { background: var(--rood); color: #fff; }
details.opv-groep > summary { cursor: pointer; list-style: none; min-height: 44px; }
details.opv-groep > summary::-webkit-details-marker { display: none; }
details.opv-groep > summary::after { content: '▾'; margin-left: auto; }
details.opv-groep[open] > summary::after { content: '▴'; }
/* rijen: voorkant schuift bij vegen, achterkant toont Gedaan (groen) of Verplaatsen (blauw) */
.opv-rijen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.opv-rij { border-radius: 18px; overflow: hidden; background: var(--kaart); border: 1px solid var(--rand-kaart); box-shadow: var(--schaduw); }
.opv-rij.laat { border-color: color-mix(in srgb, var(--rood) 35%, transparent); }
/* schuif = voorste rij + achtergrond; de verplaats-chips staan eronder, buiten de schuif (anders bedekt de achtergrond ze) */
.opv-schuif { position: relative; overflow: hidden; }
.opv-achter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; color: #fff; font-weight: 700; font-size: 11.5px; pointer-events: none; }
/* icoon boven een klein woord: past al bij ~96 px schuiven */
.opv-achter > span { display: flex; flex-direction: column; align-items: center; gap: 3px; opacity: 0; }
.opv-rij[data-veeg="rechts"] .opv-achter { background: var(--groen); }
.opv-rij[data-veeg="links"] .opv-achter { background: var(--knop); }
.opv-rij[data-veeg="rechts"] .opv-achter-gedaan, .opv-rij[data-veeg="links"] .opv-achter-verplaats { opacity: 1; }
.opv-voor { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; background: var(--kaart); touch-action: pan-y; transition: transform .18s ease-out; }
.opv-open { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px 12px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.opv-rij-foto { position: relative; display: block; flex: none; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--kaart-vak); }
.opv-rij-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.opv-tekst { flex: 1; min-width: 0; display: grid; gap: 2px; }
.opv-titel { font-weight: 700; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opv-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--grijs); }
.opv-status { padding: 1px 8px; font-size: 11px; }
.opv-actie { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 3px; font-size: 13.5px; font-weight: 650; color: var(--inkt); white-space: nowrap; }
.opv-actie > span:not(.ic) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.opv-actie.laat { color: var(--rood); }
.opv-uitleg { font-size: 13px; color: var(--paars-inkt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opv-laatst { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; color: var(--grijs); }
.opv-oud { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--oranje) 16%, transparent); color: #B45309; font-size: 11px; font-weight: 700; }
[data-theme="dark"] .opv-oud { color: #F5A35C; }
/* ronde 3 (Karel: "de opvolging kunnen afvinken met een aparte knop, waar je dan het vervolg kan noteren in een keuzemenu"):
   Afvinken = vinkvakje (lege cirkel met blauwe rand, geen schaduw) met het woord eronder; open = blauw gevuld met wit vinkje */
.opv-klaar { flex: none; width: 64px; min-height: 56px; margin-right: 4px; padding: 4px 0; border: 0; border-radius: 14px; background: none; color: var(--blauw);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.opv-klaar .ic { --ic: 30px; background: none; border: 2px solid var(--blauw); color: transparent; box-shadow: none; transition: background-color .15s, border-color .15s, color .15s; }
.opv-klaar .ic svg { stroke-width: 3; }
.opv-klaar:active .ic { color: color-mix(in srgb, var(--blauw) 45%, transparent); }
.opv-klaar[aria-expanded="true"] .ic { background: var(--knop); border-color: var(--knop); color: #fff; }
.opv-klaar-lbl { font-size: 10.5px; font-weight: 700; line-height: 1.1; letter-spacing: 0; }
.opv-rij.afvink-open { border-color: color-mix(in srgb, var(--blauw) 45%, transparent); }
/* formulier onder de rij: keuzemenu's in twee kolommen (16 px: geen iOS-zoom), notitie en knoppen over de hele breedte;
   scroll-margin: bij het openen schuift het boven de tabbalk */
.opv-afvink { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 6px; padding: 12px 10px; border-top: 1px solid var(--lijn);
  background: color-mix(in srgb, var(--knop-zacht) 60%, var(--kaart)); scroll-margin-bottom: calc(var(--tab-h) + var(--veilig-onder) + 12px); }
.opv-veld { min-width: 0; font-size: 12.5px; font-weight: 650; color: var(--grijs); }
.opv-veld > select, .opv-veld > input { margin-top: 4px; min-height: 46px; padding: 10px 4px 10px 10px; font-size: 16px; color: var(--inkt); }
/* krappe binnenmarge en 550: de langste keuzes ("Opdracht binnen", "Over 3 maanden") passen vanaf 375 px in twee kolommen */
.opv-veld > select { padding-left: 6px; padding-right: 0; font-weight: 550; }
.opv-veld-breed, .opv-afvink-knoppen { grid-column: 1 / -1; }
.opv-afvink-knoppen { display: flex; gap: 8px; }
.opv-afvink-knoppen .knop-hoofd { flex: 1; }
/* onderweg: "Bewaren…", alles vast (ook Annuleer ziet er dan uit als niet te tikken) */
.opv-afvink-ok:disabled, .opv-afvink-annuleer:disabled { opacity: .6; cursor: progress; transform: none; }
.opv-afvink-knoppen .knop-tweede { background: var(--kaart); }
.opv-verplaats { padding: 0 12px 12px; }
.opv-verplaats .chip { min-height: 44px; }
/* Karel 16/10: "panden bij mijn panden moet je kunnen uitklappen om de historiek te weten" — smalle knop over de volle
   breedte onder elke rij (buiten de schuif: vegen blijft op de rij) en een compacte tijdlijn op een licht vlak */
.opv-historiek-knop { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 14px 0 12px; border: 0; border-top: 1px solid var(--lijn);
  background: none; color: var(--grijs); font: inherit; font-size: 13px; font-weight: 650; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.opv-historiek-knop::after { content: '▾'; margin-left: auto; padding-left: .5rem; color: var(--grijs); }
.opv-historiek-knop[aria-expanded="true"] { color: var(--blauw); }
.opv-historiek-knop[aria-expanded="true"]::after { content: '▴'; color: var(--blauw); }
.opv-historiek-knop:active { background: var(--druk); }
.opv-historiek-knop .ic { box-shadow: none; }
.opv-historiek { padding: 4px 12px 2px; border-top: 1px solid var(--lijn); background: var(--vlak); font-size: 13px; }
.opv-hist-lijst { list-style: none; margin: 0; padding: 0; }
.opv-hist-item { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
/* tijdlijn: een dun lijntje tussen de icoontjes */
.opv-hist-item:not(:last-child)::before { content: ''; position: absolute; left: 9.5px; top: 30px; bottom: -6px; width: 1px; background: var(--lijn); }
.opv-hist-item .ic { margin-top: 1px; box-shadow: none; }
/* afgehandelde afspraak: grijs icoon op een kaartkleurige cirkel (de gewone grijze cirkel valt weg op het lichte vlak) */
.opv-hist-item .ic-grijs { background: var(--kaart); }
.opv-hist-item:focus { outline: none; }
.opv-hist-item:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; border-radius: 8px; }
.opv-hist-tekst { flex: 1; min-width: 0; display: grid; gap: 1px; }
.opv-hist-wat { font-weight: 650; color: var(--inkt); line-height: 1.35; overflow-wrap: anywhere; }
.opv-hist-wanneer { font-size: 12px; color: var(--grijs); }
.opv-hist-notitie { margin: 2px 0 0; font-size: 12.5px; font-style: italic; color: var(--tag-inkt); line-height: 1.4; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.opv-hist-melding { margin: 0; padding: 12px 0 4px; color: var(--grijs); }
.opv-hist-fout { color: var(--rood); }
.opv-hist-voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.opv-hist-voet .knop-link { min-height: 44px; padding: 0; color: var(--blauw); }
.opv-hist-voet .opv-hist-fiche { margin-left: auto; }
/* smalle gsm (bv. iPhone SE 320 px): de drie subtabs passen zonder icoontjes */
@media (max-width: 360px) { .mp-subtabs .subtab .ic { display: none; } }
/* heel smal (320 px): zoekveld en sortering elk op een eigen regel, anders valt "Zoek adres" weg naast de 16px-keuze */
@media (max-width: 340px) { .opv-zoekrij { flex-wrap: wrap; } .opv-zoekrij .zoek, .opv-sorteer { flex: 1 1 100%; } .opv-sorteer select { width: 100%; max-width: none; } }
/* smaller dan 375 px (bv. Android 360 px, iPhone SE 320 px): afvinkformulier in één kolom, anders vallen lange keuzes weg */
@media (max-width: 374px) { .opv-afvink { grid-template-columns: minmax(0, 1fr); } }

/* testversie 16/10 (Karel: "de agenda heeft te veel blauw"): lichte band met blauwe accenten i.p.v. een volle blauwe band */
.ag-band { background: var(--kaart); color: var(--inkt); border-bottom: 1px solid var(--lijn); box-shadow: var(--schaduw); border-radius: 0 0 20px 20px; }
.ag-label { color: var(--inkt); }
.ag-pijl { background: var(--knop-zacht); color: var(--blauw); border-radius: 50%; }
.ag-pijl:active { background: var(--knop-zacht-druk); }
.ag-pijl .ic { color: var(--blauw); }
.ag-weergave { background: #E9EBF2; }
.ag-weergave button { color: var(--grijs); }
.ag-weergave button.actief { background: var(--kaart); color: var(--blauw); box-shadow: 0 1px 2px rgba(20,22,60,.08), 0 2px 8px rgba(20,22,60,.08); }
.ag-vandaag { background: var(--knop-zacht); color: var(--blauw); }
.dag-chip .dc-naam { color: var(--grijs); }
.dag-chip .dc-nr { color: var(--inkt); }
.dag-chip .dc-dot { box-shadow: none; }
.dag-chip.vandaag .dc-nr { color: var(--blauw); text-decoration: none; }
.dag-chip.geselecteerd { background: var(--knop); }
.dag-chip.vandaag.geselecteerd .dc-nr { color: #fff; }
.ag-mkop { color: var(--grijs); }
.ag-mdag { color: var(--inkt); }
.ag-mdag.vandaag .ag-mnr { color: var(--blauw); text-decoration: none; }
.ag-mdag.geselecteerd { background: var(--knop); color: #fff; }
.ag-mdag.vandaag.geselecteerd .ag-mnr { color: #fff; }
.ag-balkje { box-shadow: none; }
:root { --ag-eigen: var(--knop); }
[data-theme="dark"] .ag-pijl .ic { color: var(--inkt); }
[data-theme="dark"] .ag-weergave { background: var(--lijn); }
[data-theme="dark"] .ag-weergave button.actief { background: var(--knop); color: #fff; box-shadow: none; }
[data-theme="dark"] { --ag-eigen: #5b7cf6; }
/* geselecteerde dag is blauw: eigen stippen/balkjes (var(--ag-eigen)) daar wit, collega-kleuren blijven met een witte ring zichtbaar */
.dag-chip.geselecteerd .dc-dot { box-shadow: 0 0 0 1.5px #fff; }
.dag-chip.geselecteerd .dc-dot[style*="--ag-eigen"], .ag-mdag.geselecteerd .ag-balkje[style*="--ag-eigen"] { background: #fff !important; box-shadow: none; }

/* Karel 16/10: knop "Nieuwe klant" naast de subtabs Mijn regio | Notaris */
.subtab-rij { display: flex; align-items: stretch; gap: 8px; margin: 0 0 14px; }
.subtab-rij .subtabs { flex: 1; min-width: 0; margin: 0; }
.subtab-rij .subtab { padding: 0 6px; gap: 6px; }
.nieuwe-klant-knop { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 14px 0 8px; border: 0; border-radius: 14px;
  background: var(--knop-zacht); color: var(--blauw); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.nieuwe-klant-knop:active { background: var(--knop-zacht-druk); }
.nieuwe-klant-knop .ic { --ic: 28px; }
@media (max-width: 400px) { .subtab-rij .subtab .ic { display: none; } }