/* ---- Helvetica Neue LT Pro ----------------------------------------------
   De echte huisstijlletter, uit ...\Werk\Bouw\ai\claude\projects\huisstijl\
   fonts\Helvetica. De .otf-bestanden zijn omgezet naar woff2 en teruggebracht
   tot de tekens die het intranet gebruikt (latijn, interpunctie, pijltjes en de
   symbolen ✓ × ⟳ ⏰ ⠿) — ±12 kB per gewicht in plaats van ±40 kB.

   Gewichten: 300 Light · 400 Roman · 500 en 600 Medium · 700 Bold · 800 Black.
   Staat het bestand er niet, dan valt de pagina terug op Helvetica/Arial en
   ziet niemand een kapotte pagina — alleen een iets ander lettertype.

   Let op: deze bestanden staan gewoon in de webmap en zijn dus, anders dan de
   pagina's zelf, ook zonder inloggen op te halen. Wil je dat niet, dan kunnen
   we ze achter een klein doorgeefluik zetten. */
@font-face{font-family:'Helvetica Neue LT';src:url('fonts/hn-300.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue LT';src:url('fonts/hn-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue LT';src:url('fonts/hn-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue LT';src:url('fonts/hn-500.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue LT';src:url('fonts/hn-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue LT';src:url('fonts/hn-800.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap}

/* ===========================================================================
   Portaalstijl — de laag die alle pagina's hetzelfde laat aanvoelen.
   ===========================================================================
   Wordt door het menu (app/kern/web.py) op élke pagina ingeladen, ook op de oudere pagina's die
   nog hun eigen <style> in het bestand hebben. Omdat dit bestand later komt,
   wint het van die pagina-CSS zonder dat daar iets weg hoeft.

   Uitgangspunt sinds 17 augustus 2026: **zo dicht mogelijk bij marchitecten.nl**.
   De waarden hieronder zijn niet geschat maar op de site zelf gemeten
   (getComputedStyle, 17 augustus 2026):

     tekstzwart   rgb(26,24,20)    #1A1814   warm, geen neutraal grijs-zwart
     zandvlak     rgb(235,230,220) #EBE6DC   het vlak achter elke projectfoto
     zand licht   rgb(243,238,227) #F3EEE3
     groen        rgb(101,176,72)  #65B048
     groen donker rgb(69,122,48)   #457A30   (koppen en links)
     labelgrijs   rgb(136,135,128) #888780   (het menu bovenin de site)
     letter       Helvetica Neue, gewicht 400/500 — nergens zwaarder
     koppen       HOOFDLETTERS, gewicht 500, negatieve letterafstand
     labels       HOOFDLETTERS, 14 px, +0,04em letterafstand
     hoeken       0–2 px. Geen enkele ronde hoek op de hele site.
     schaduw      geen. Scheiden gebeurt met een haarlijn, niet met diepte.

   Let op de groenkeuze: het intranet stond op #62B658 (gemeten in de officiële
   PNG-exports, keuze van Theo op 9 juli). De website gebruikt #65B048. Omdat de
   opdracht was "meer zoals mijn website" staat het portaal nu op #65B048. Wil je
   terug: alleen --groen hieronder en --pm-groen in portaal-menu.css hoeven te wisselen.
   =========================================================================== */

:root{
  --groen:#65B048;
  --groen-donker:#457A30;
  --zwart:#1A1814;
  --grijs:#888780;
  --grijs-licht:#B0ADA3;
  --lijn:#E5E1D7;
  --lijn-zacht:#EFEBE1;
  --zand:#EBE6DC;
  --zand-licht:#F3EEE3;
  --bg:#F5F2EA;
  --wit:#ffffff;
  --radius:2px;
  --schaduw:none;
  --schaduw-hoog:none;
}

body{background:var(--bg);color:var(--zwart);-webkit-font-smoothing:antialiased}

/* ---- Koppen -------------------------------------------------------------
   De site zet koppen in hoofdletters met gewicht 500 en trekt de letters iets
   naar elkaar toe. Dat is het meest herkenbare van de huisstijl. */
h1,h2,h3{font-weight:500}
/* Alle paginatitels gelijk: de nieuwe pagina's zetten hem in .paginakop, de
   oudere in .kopregel of los in .wrap. Alle drie hier vangen, anders staat
   "Verlof" in gewone letters en "Documenten" in hoofdletters. */
h1,.paginakop h1,.kopregel h1,.wrap > h1{
  font-size:26px;font-weight:500;letter-spacing:-.65px;text-transform:uppercase}
.paginasub,.sub{font-size:14.5px;color:var(--grijs);line-height:1.6;font-weight:400}
.paginasub{margin-bottom:30px}

/* ---- Kaarten ------------------------------------------------------------
   Geen schaduw en geen ronde hoeken meer: een kaart is een wit vlak met een
   haarlijn eromheen, zoals de blokken op de site. */
.kaart,.tegel{
  background:var(--wit);
  border:1px solid var(--lijn);
  border-radius:var(--radius);
  box-shadow:none;
  transition:border-color .18s ease;
}
.kaart:hover,.tegel:hover{box-shadow:none;transform:none;border-color:#D7D2C4}
.kaart-kop{
  padding:20px 24px 4px;
  border-bottom:none;
  background:transparent;
}
.kaart-kop h2{font-size:11.5px;font-weight:500;letter-spacing:1.35px;text-transform:uppercase;color:var(--zwart)}
.kaart-kop h2::before{display:none}          /* geen groene balkjes */
.kaart-kop .meer{font-size:10.5px;font-weight:500;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--grijs-licht);background:none;border:0;padding:0}
a.meer:hover{color:var(--groen-donker)}
.kaart-body{padding:14px 24px 22px}

/* ---- Dashboardtegels ---------------------------------------------------- */
.dtel{font-size:44px;font-weight:500;letter-spacing:-1.6px;font-variant-numeric:tabular-nums;line-height:1.05}
.dtel small{font-size:13px;font-weight:400;color:var(--grijs);letter-spacing:0}
.dtel.stil{color:#CFCBC0}
.dregel{border-top:1px solid var(--lijn-zacht);padding:9px 0;font-size:13px;color:#3d3a33}
.dregel:first-of-type{margin-top:14px}
.dregel b{font-weight:400}
.dregel span{color:var(--grijs-licht);font-size:11.5px;background:none;padding:0}
.dvoet{margin-top:18px;font-size:10.5px;font-weight:500;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--groen-donker);background:none;padding:0}
.dvoet:hover{color:var(--groen)}
.dleeg{color:var(--grijs-licht)}
/* Het regeltje onder het grote getal ("projecten in de planning") staat in
   de startpagina als inline style; hier wordt het een klein hoofdletterlabel. */
.kaart-body > div[style*="font-size:12px"]{
  text-transform:uppercase;letter-spacing:1.1px;font-size:10.5px !important;color:var(--grijs) !important}

/* ---- Welkomstbalk ------------------------------------------------------- */
.hero{border-radius:var(--radius);box-shadow:none;padding:36px 40px}
.hero h1{font-size:28px;letter-spacing:-.7px;text-transform:uppercase;font-weight:500}
.hero p{color:#c9c9c9}

/* ---- Knoppen ------------------------------------------------------------
   Rechte hoeken, geen schaduw, vlakke kleur. */
button,.knop,.btn-nieuw,.bel-add-knop,.toevoeg .knop{
  border-radius:var(--radius);
  font-weight:500;
  box-shadow:none;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.knop.groen,.btn-nieuw,.toevoeg .knop,#mdKnop{
  background:var(--groen);border:1px solid var(--groen);color:#fff;
}
.knop.groen:hover,.btn-nieuw:hover,.toevoeg .knop:hover,#mdKnop:hover{
  background:var(--groen-donker);border-color:var(--groen-donker);
}
.snelrij a{border-radius:var(--radius);border:1px solid var(--lijn);box-shadow:none;font-weight:500;
  font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;padding:11px 17px;
  background:var(--wit);color:#4a4740}
.snelrij a:hover{border-color:var(--groen);color:var(--groen-donker)}

/* ---- Invoervelden ------------------------------------------------------- */
input[type=text],input[type=search],input[type=number],input[type=date],input[type=password],select,textarea{
  border-radius:var(--radius);
  border:1px solid var(--lijn);
  background:var(--wit);
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--groen);box-shadow:0 0 0 2px rgba(101,176,72,.16);
}

/* ---- Tabellen en lijsten ------------------------------------------------ */
table.lijst th,.lijst .kop,thead th{
  font-size:10px;letter-spacing:1.35px;text-transform:uppercase;color:var(--grijs-licht);font-weight:500;
}
table.lijst td,.rij,.log-item,.contact-item{border-color:var(--lijn-zacht)}
table.lijst tr:hover td,.rij:hover{background:#FAF8F3}

/* ---- Filterknoppen (projecten, gesprekken, logboek) ---------------------
   De actieve knop is zwart in plaats van groen: op de site is groen voorbehouden
   aan het logo en aan koppen, niet aan bedieningselementen. */
.filters button{border-radius:var(--radius);border:1px solid var(--lijn);background:var(--wit);font-weight:500;
  font-size:11px;letter-spacing:.9px;text-transform:uppercase;color:#6b6760;transition:.15s}
.filters button:hover{border-color:var(--groen);color:var(--groen-donker)}
.filters button.actief{background:var(--zwart);border-color:var(--zwart);color:#fff}

/* ---- Meldingen ---------------------------------------------------------- */
.melding,.opslag.ok{border-radius:var(--radius)}

/* ---- Footer ------------------------------------------------------------- */
footer{border-top:1px solid var(--lijn);color:var(--grijs-licht);font-size:10.5px;letter-spacing:.9px;
  text-transform:uppercase;line-height:2;padding-top:34px;padding-bottom:34px}
footer span{color:var(--groen-donker);text-transform:none;letter-spacing:0}

/* ---- Zoekvelden die al in een omhulsel met rand zitten -------------------
   contacten, projecten, documenten en zoeken zetten hun
   invoerveld in een doosje mét rand. Zonder deze regel krijg je een tweede
   rand ín dat doosje. De rand en de focusgloed horen bij het doosje. */
.zoek input,.zoek2 input,.groot input,.zoekbalk form input,.plan-zoek input{
  border:0 !important;background:transparent;box-shadow:none !important;border-radius:0}
.zoek,.zoek2,.groot,.zoekbalk form{border-radius:var(--radius)}
.zoek:focus-within,.zoek2:focus-within,.groot:focus-within,.zoekbalk form:focus-within{
  border-color:var(--groen);box-shadow:0 0 0 2px rgba(101,176,72,.16)}

/* ---- Datum- en tijdregel bovenaan Start ---------------------------------
   Geen donkere welkomstbalk boven het dashboard: alleen de dag, de datum en de
   tijd, met een haarlijn eronder — de site scheidt secties op dezelfde manier. */
.dagbalk{display:flex;align-items:baseline;gap:14px;padding:6px 2px 22px;flex-wrap:wrap;
  border-bottom:1px solid var(--lijn);margin-bottom:26px}
.dagbalk .dag{font-size:16px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--zwart)}
.dagbalk .datum{font-size:12.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--grijs-licht)}
.dagbalk .klok{margin-left:auto;font-size:16px;font-weight:500;letter-spacing:-.3px;
  font-variant-numeric:tabular-nums;color:var(--zwart)}
@media(max-width:520px){.dagbalk{gap:8px;padding-bottom:16px;margin-bottom:18px}.dagbalk .klok{margin-left:auto}}

/* ---- Ruimte benutten op een breed scherm --------------------------------
   De inhoud is sinds 17 augustus 2026 2100 px breed (--pm-inhoud in portaal-menu.css),
   want op het 2560px-scherm van kantoor bleef er links en rechts een leeg vlak
   van ±400 px over. Met tegels van minimaal 340 px passen er dan vijf naast
   elkaar; de rij van drie erboven verdeelt de breedte gelijk. */
.dash{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px}
.kolommen{gap:24px}
@media(min-width:1700px){
  .dash{gap:28px}
  .kaart-kop{padding:22px 28px 4px}
  .kaart-body{padding:16px 28px 26px}
}

/* ---- Afrondingen rechttrekken op de oudere pagina's --------------------
   De pagina's van vóór 16 augustus 2026 hebben hun opmaak nog in het bestand
   zelf staan, met pillen van 999 px en kaarten van 10 tot 18 px. Dit blok komt
   later dan die <style>-blokken en zet ze allemaal op --radius, zodat de hele
   boel even recht is als de website. Wordt een pagina ooit herschreven, dan mag
   zijn selector hier uit. Bewust géén universele regel: het bolletje met de
   profielfoto en het logo moeten rond blijven.
   Lijst opgehaald uit de pagina's zelf: elke selector met border-radius >= 6px. */
.acties a,.badge,.balk,.btn-nieuw,.filters button,.gereedschap input[type=text],.groot,
.item .nieuwpil,.jaarnav a,.jaarsel,.kaart,.kaart .kacties a,.kaart .kregel .dit,
.kaart-kop .aantal,.knop,.kop .nr,.leeg,.lijst,.logknop,.mapico,.melding,.nieuwvorm input,
.nieuwvorm select,.notitie .soort,.nr,.ond,.ond-knop,.pil,.plan-zoek input,.pnr,.primair,
.resultkop,.rij .cbew,.rij .clog,.rij.bewerkt button,.rij.bewerkt input,.secundair,.snel,
.soortsel,.tegel,.tegel form button,.tegel form input,.telling,.terug,.terugknop,
.toevoeg .knop,.toevoeg button,.toevoeg input,.toevoeg input[type=date],
.toevoeg input[type=text],.toevoeg select,.toevoeg textarea,.topbar nav a,.veld input,
.veld select,.veldrij .dit,.vlag,.weeknav button,.zoek,.zoekbalk form,.zoekknop,.zoeklijst,
.zoekpaneel .rij1,input.uur,select.tmsel,table{
  border-radius:var(--radius) !important;
}

/* ---- Kleur terug -------------------------------------------------------
   17 augustus 2026, na Theo's opmerking dat de oude opzet iets meer kleur had.
   Alles hieronder komt uit de site zelf, niets is erbij verzonnen:

     · kaartkoppen krijgen het lichte zandvlak (#F3EEE3) als band — op de site
       is dat het dragende vlak achter elke projectfoto;
     · de kop zelf wordt donkergroen (#457A30), precies zoals de sectiekoppen
       op marchitecten.nl ("ARCHITECTUUR EN STEDENBOUW");
     · tabelkoppen en de dagbalk krijgen hetzelfde vlak;
     · het actieve menu-item mag weer groen zijn in plaats van zandgrijs.

   Te veel? Dan is dit hele blok in één keer te verwijderen; de rest van het
   bestand blijft dan werken en je houdt de strakke witte versie over. */

.kaart-kop,.tegel .kaart-kop{
  background:var(--zand-licht);
  border-bottom:1px solid var(--lijn);
  padding:14px 24px;
}
.kaart-kop h2{color:var(--groen-donker)}
.kaart-body{padding:18px 24px 22px}
@media(min-width:1700px){
  .kaart-kop{padding:15px 28px}
  .kaart-body{padding:20px 28px 26px}
}

/* Kop van een tabel of lijst: zelfde band, zodat een tabel niet als los
   zwevende tekst begint. */
table.lijst thead th,thead th,.lijst .kop{
  background:var(--zand-licht);
  border-bottom:1px solid var(--lijn);
  color:#8a8779;
  padding-top:9px;padding-bottom:9px;
}

/* De dag-, datum- en tijdregel op Start als één zandband in plaats van
   losse tekst met een streepje eronder. */
.dagbalk{
  background:var(--zand-licht);
  border:1px solid var(--lijn);
  border-radius:var(--radius);
  padding:14px 20px;
  margin-bottom:24px;
}
.dagbalk .dag{color:var(--groen-donker)}
.dagbalk .datum{color:#8a8779}

/* Grote getallen op het dashboard: het cijfer blijft zwart, het regeltje
   eronder wordt groen — dat geeft de tegels een kleuraccent zonder dat het
   een bord met lampjes wordt. */
.dvoet{color:var(--groen-donker)}
.kaart-body > div[style*="font-size:12px"]{color:var(--groen-donker) !important;opacity:.8}

/* Het projectnummer naast de titel op de projectpagina. */
.kop .nr,.nr,.pnr{background:var(--groen) !important;color:#fff !important}

/* ---- Koppelknopjes (batch 2, 17 augustus 2026) --------------------------
   "✎ 260768" op de terugbellijst: een telefoonnotitie bij het gekoppelde
   project. Zelfde vorm als de andere kleine knoppen in het portaal. */
.bel-proj{
  font-family:inherit;font-size:10.5px;font-weight:500;letter-spacing:1px;text-transform:uppercase;
  border:1px solid var(--lijn);background:var(--wit);color:var(--groen-donker);
  border-radius:var(--radius);padding:6px 11px;cursor:pointer;flex:none;white-space:nowrap;
  transition:border-color .15s ease,background .15s ease;
}
.bel-proj:hover{border-color:var(--groen);background:#f5faf3}
.bel-proj[disabled]{opacity:.6;cursor:default}

/* ---- Lettertype ---------------------------------------------------------
   Huisstijl van het bureau is Helvetica; de woff2-bestanden staan in fonts/.
   Ontbreken die, dan valt de pagina terug op Arial en verschilt het beeld
   nauwelijks. De site gebruikt nergens een gewicht zwaarder dan 500 — vandaar
   dat de koppen hierboven op 500 staan in plaats van op 700 of 800. */
body,input,button,select,textarea,.pm-zij,.pm-mob{
  font-family:'Helvetica Neue LT','Helvetica Neue',Helvetica,Arial,'Liberation Sans',sans-serif;
}
body{font-weight:400;letter-spacing:-.05px}
.sub,.paginasub,.hero p,.dregel,.leeg,.hint{font-weight:400}
.pm-merk b{letter-spacing:-.2px}

/* ===========================================================================
   Donkere weergave (14 september 2026)
   ===========================================================================
   Volgt de instelling van Windows/macOS/iPhone (prefers-color-scheme), tenzij
   je onderin de zijbalk zelf licht of donker kiest; die keuze staat als
   data-thema="light|dark" op <html> en wordt per apparaat onthouden
   (localStorage, thema-script in app/kern/web.py). Zonder keuze staat er niets op <html>.

   Opzet: dezelfde variabelen, andere waarden. --wit is in het licht het vlak
   van een kaart en in het donker een donkergrijs vlak; --zwart is de tekst-
   kleur. Alles wat via de variabelen loopt volgt vanzelf. De regels daaronder
   zijn de plekken die een vaste lichte kleur hadden (zijbalk, knopjes, lichte
   groene/oranje tinten). Het blok staat twee keer: één keer voor de eigen
   keuze "donker", één keer voor de systeeminstelling zonder eigen keuze.
   Wil je iets aanpassen: pas de lijst R in de generator aan of wijzig beide.
   =========================================================================== */
:root{color-scheme:light}
html[data-thema="dark"]{color-scheme:dark}
@media (prefers-color-scheme:dark){html:not([data-thema="light"]){color-scheme:dark}}

html[data-thema="dark"]{
    --groen:#6FBF55;--groen-donker:#8FD275;--zwart:#ECE8DF;--grijs:#A9A59A;--grijs-licht:#7B776D;
    --lijn:#3A3833;--lijn-zacht:#2F2D29;--zand:#2C2A25;--zand-licht:#282621;--bg:#1B1A17;--wit:#23221E;
    --amber:#E0A23B;--rood:#E06A66;
    --pm-groen:#6FBF55;--pm-groen-donker:#8FD275;--pm-zwart:#ECE8DF;--pm-grijs:#A9A59A;--pm-lijn:#3A3833;
}
  html[data-thema="dark"] body{background:var(--bg);color:var(--zwart)}
  html[data-thema="dark"] .pm-zij,html[data-thema="dark"] .pm-mob,html[data-thema="dark"] .pm-knop{background:var(--wit)}
  html[data-thema="dark"] .pm-zoek form{background:var(--zand-licht);border-color:var(--lijn)}
  html[data-thema="dark"] .pm-zoek form:focus-within{background:var(--wit)}
  html[data-thema="dark"] .pm-nav a{color:#CFCBC0}
  html[data-thema="dark"] .pm-nav a:hover,html[data-thema="dark"] .pm-ikzelf:hover{background:var(--zand-licht);color:var(--zwart)}
  html[data-thema="dark"] .pm-nav a.pm-actief{background:rgba(111,191,85,.16);color:var(--groen-donker)}
  html[data-thema="dark"] .pm-groep,html[data-thema="dark"] .pm-wie span{color:var(--grijs-licht)}
  html[data-thema="dark"] .pm-knop i{background:var(--zwart)}
  html[data-thema="dark"] body.pm-open .pm-sluier{background:rgba(0,0,0,.55)}
  html[data-thema="dark"] .kaart:hover,html[data-thema="dark"] .tegel:hover{border-color:#4A4740}
  html[data-thema="dark"] .kaart-kop h2,html[data-thema="dark"] .dvoet,html[data-thema="dark"] .paginasub a,html[data-thema="dark"] .dagbalk .dag,html[data-thema="dark"] .lk-knop.zoek,html[data-thema="dark"] a.proj-naam:hover,html[data-thema="dark"] .gem-nr a{color:var(--groen-donker)}
  html[data-thema="dark"] table.lijst thead th,html[data-thema="dark"] thead th,html[data-thema="dark"] .lijst .kop{color:var(--grijs)}
  html[data-thema="dark"] table.lijst tr:hover td,html[data-thema="dark"] .rij:hover,html[data-thema="dark"] .proj-rij:hover,html[data-thema="dark"] .plan-zoek-item:hover,html[data-thema="dark"] .snel:hover{background:var(--zand-licht)}
  html[data-thema="dark"] .dagbalk .datum,html[data-thema="dark"] .dregel,html[data-thema="dark"] .ond-laatst{color:#CFCBC0}
  html[data-thema="dark"] .filters button{color:var(--grijs)}
  html[data-thema="dark"] .filters button.actief{background:var(--groen);border-color:var(--groen);color:#fff}
  html[data-thema="dark"] .sorteer button,html[data-thema="dark"] .sys-run,html[data-thema="dark"] .ond-knop,html[data-thema="dark"] .rt-knop,html[data-thema="dark"] .sj-knop,html[data-thema="dark"] .lk-knop,html[data-thema="dark"] .off-toggle,html[data-thema="dark"] .plan-plus,html[data-thema="dark"] .plan-taakknop,html[data-thema="dark"] .off-bel,html[data-thema="dark"] .wksel,html[data-thema="dark"] .statussel,html[data-thema="dark"] .jaarsel,html[data-thema="dark"] .bel-proj,html[data-thema="dark"] .mail-tabs button,html[data-thema="dark"] .mail-af button,html[data-thema="dark"] .snelrij a,html[data-thema="dark"] .plan-zoek-lijst,html[data-thema="dark"] .weeknav button,html[data-thema="dark"] .terugknop,html[data-thema="dark"] .logknop,html[data-thema="dark"] .zoekknop{background:var(--wit);color:var(--grijs);border-color:var(--lijn)}
  html[data-thema="dark"] .sorteer button.actief,html[data-thema="dark"] .plan-plus.actief,html[data-thema="dark"] .wksel[data-v="af"],html[data-thema="dark"] .plan-taken-box,html[data-thema="dark"] .bel-add-knop,html[data-thema="dark"] .plan-toevoeg select,html[data-thema="dark"] .plan-zoek input{background:rgba(111,191,85,.12);border-color:rgba(111,191,85,.5);color:var(--groen-donker)}
  html[data-thema="dark"] .knop.groen,html[data-thema="dark"] .btn-nieuw,html[data-thema="dark"] .toevoeg .knop,html[data-thema="dark"] #mdKnop,html[data-thema="dark"] .versie-melding button,html[data-thema="dark"] .kop .nr,html[data-thema="dark"] .nr,html[data-thema="dark"] .pnr{color:#fff !important}
  html[data-thema="dark"] input,html[data-thema="dark"] select,html[data-thema="dark"] textarea{color:var(--zwart)}
  html[data-thema="dark"] input::placeholder,html[data-thema="dark"] textarea::placeholder{color:var(--grijs-licht)}
  html[data-thema="dark"] .plan-rang,html[data-thema="dark"] .pil{background:var(--zand);color:var(--grijs)}
  html[data-thema="dark"] .plan-rang.top,html[data-thema="dark"] .sessie-zelf,html[data-thema="dark"] .pil.groen,html[data-thema="dark"] .bel-ic,html[data-thema="dark"] .prio.laag,html[data-thema="dark"] .snel .ic,html[data-thema="dark"] .versie-melding,html[data-thema="dark"] .rt-pil.uit{background:rgba(111,191,85,.16);color:var(--groen-donker);border-color:rgba(111,191,85,.4)}
  html[data-thema="dark"] .off-toggle.actief,html[data-thema="dark"] .off-nr,html[data-thema="dark"] .off-oud,html[data-thema="dark"] .prio.midden,html[data-thema="dark"] .rt-pil.open{background:rgba(224,162,59,.16);color:var(--amber);border-color:rgba(224,162,59,.5)}
  html[data-thema="dark"] .off-oud.rood,html[data-thema="dark"] .afw-nu,html[data-thema="dark"] .gem-ic,html[data-thema="dark"] .prio.hoog{background:rgba(224,106,102,.16);color:var(--rood)}
  html[data-thema="dark"] .gem-vm{background:var(--zand-licht)}
  html[data-thema="dark"] .log-dot,html[data-thema="dark"] .sys-dot,html[data-thema="dark"] .logtabel .tag::before{background:#5a574f}
  html[data-thema="dark"] .afw-bron,html[data-thema="dark"] .versie-item .vt,html[data-thema="dark"] .sessie-tijd,html[data-thema="dark"] .gem-tijd,html[data-thema="dark"] .sys-wat small,html[data-thema="dark"] .rt-tabel .sub,html[data-thema="dark"] .ond-tekst .ot,html[data-thema="dark"] .blok-info,html[data-thema="dark"] .lk-url,html[data-thema="dark"] .lk-uitleg,html[data-thema="dark"] .versie-nr small{color:var(--grijs)}
  html[data-thema="dark"] img.pm-foto,html[data-thema="dark"] .hero img{filter:brightness(.9)}

@media (prefers-color-scheme:dark){
  html:not([data-thema="light"]):not([data-thema="dark"]){
    --groen:#6FBF55;--groen-donker:#8FD275;--zwart:#ECE8DF;--grijs:#A9A59A;--grijs-licht:#7B776D;
    --lijn:#3A3833;--lijn-zacht:#2F2D29;--zand:#2C2A25;--zand-licht:#282621;--bg:#1B1A17;--wit:#23221E;
    --amber:#E0A23B;--rood:#E06A66;
    --pm-groen:#6FBF55;--pm-groen-donker:#8FD275;--pm-zwart:#ECE8DF;--pm-grijs:#A9A59A;--pm-lijn:#3A3833;
  }
    html:not([data-thema="light"]) body{background:var(--bg);color:var(--zwart)}
    html:not([data-thema="light"]) .pm-zij,  html:not([data-thema="light"]) .pm-mob,  html:not([data-thema="light"]) .pm-knop{background:var(--wit)}
    html:not([data-thema="light"]) .pm-zoek form{background:var(--zand-licht);border-color:var(--lijn)}
    html:not([data-thema="light"]) .pm-zoek form:focus-within{background:var(--wit)}
    html:not([data-thema="light"]) .pm-nav a{color:#CFCBC0}
    html:not([data-thema="light"]) .pm-nav a:hover,  html:not([data-thema="light"]) .pm-ikzelf:hover{background:var(--zand-licht);color:var(--zwart)}
    html:not([data-thema="light"]) .pm-nav a.pm-actief{background:rgba(111,191,85,.16);color:var(--groen-donker)}
    html:not([data-thema="light"]) .pm-groep,  html:not([data-thema="light"]) .pm-wie span{color:var(--grijs-licht)}
    html:not([data-thema="light"]) .pm-knop i{background:var(--zwart)}
    html:not([data-thema="light"]) body.pm-open .pm-sluier{background:rgba(0,0,0,.55)}
    html:not([data-thema="light"]) .kaart:hover,  html:not([data-thema="light"]) .tegel:hover{border-color:#4A4740}
    html:not([data-thema="light"]) .kaart-kop h2,  html:not([data-thema="light"]) .dvoet,  html:not([data-thema="light"]) .paginasub a,  html:not([data-thema="light"]) .dagbalk .dag,  html:not([data-thema="light"]) .lk-knop.zoek,  html:not([data-thema="light"]) a.proj-naam:hover,  html:not([data-thema="light"]) .gem-nr a{color:var(--groen-donker)}
    html:not([data-thema="light"]) table.lijst thead th,  html:not([data-thema="light"]) thead th,  html:not([data-thema="light"]) .lijst .kop{color:var(--grijs)}
    html:not([data-thema="light"]) table.lijst tr:hover td,  html:not([data-thema="light"]) .rij:hover,  html:not([data-thema="light"]) .proj-rij:hover,  html:not([data-thema="light"]) .plan-zoek-item:hover,  html:not([data-thema="light"]) .snel:hover{background:var(--zand-licht)}
    html:not([data-thema="light"]) .dagbalk .datum,  html:not([data-thema="light"]) .dregel,  html:not([data-thema="light"]) .ond-laatst{color:#CFCBC0}
    html:not([data-thema="light"]) .filters button{color:var(--grijs)}
    html:not([data-thema="light"]) .filters button.actief{background:var(--groen);border-color:var(--groen);color:#fff}
    html:not([data-thema="light"]) .sorteer button,  html:not([data-thema="light"]) .sys-run,  html:not([data-thema="light"]) .ond-knop,  html:not([data-thema="light"]) .rt-knop,  html:not([data-thema="light"]) .sj-knop,  html:not([data-thema="light"]) .lk-knop,  html:not([data-thema="light"]) .off-toggle,  html:not([data-thema="light"]) .plan-plus,  html:not([data-thema="light"]) .plan-taakknop,  html:not([data-thema="light"]) .off-bel,  html:not([data-thema="light"]) .wksel,  html:not([data-thema="light"]) .statussel,  html:not([data-thema="light"]) .jaarsel,  html:not([data-thema="light"]) .bel-proj,  html:not([data-thema="light"]) .mail-tabs button,  html:not([data-thema="light"]) .mail-af button,  html:not([data-thema="light"]) .snelrij a,  html:not([data-thema="light"]) .plan-zoek-lijst,  html:not([data-thema="light"]) .weeknav button,  html:not([data-thema="light"]) .terugknop,  html:not([data-thema="light"]) .logknop,  html:not([data-thema="light"]) .zoekknop{background:var(--wit);color:var(--grijs);border-color:var(--lijn)}
    html:not([data-thema="light"]) .sorteer button.actief,  html:not([data-thema="light"]) .plan-plus.actief,  html:not([data-thema="light"]) .wksel[data-v="af"],  html:not([data-thema="light"]) .plan-taken-box,  html:not([data-thema="light"]) .bel-add-knop,  html:not([data-thema="light"]) .plan-toevoeg select,  html:not([data-thema="light"]) .plan-zoek input{background:rgba(111,191,85,.12);border-color:rgba(111,191,85,.5);color:var(--groen-donker)}
    html:not([data-thema="light"]) .knop.groen,  html:not([data-thema="light"]) .btn-nieuw,  html:not([data-thema="light"]) .toevoeg .knop,  html:not([data-thema="light"]) #mdKnop,  html:not([data-thema="light"]) .versie-melding button,  html:not([data-thema="light"]) .kop .nr,  html:not([data-thema="light"]) .nr,  html:not([data-thema="light"]) .pnr{color:#fff !important}
    html:not([data-thema="light"]) input,  html:not([data-thema="light"]) select,  html:not([data-thema="light"]) textarea{color:var(--zwart)}
    html:not([data-thema="light"]) input::placeholder,  html:not([data-thema="light"]) textarea::placeholder{color:var(--grijs-licht)}
    html:not([data-thema="light"]) .plan-rang,  html:not([data-thema="light"]) .pil{background:var(--zand);color:var(--grijs)}
    html:not([data-thema="light"]) .plan-rang.top,  html:not([data-thema="light"]) .sessie-zelf,  html:not([data-thema="light"]) .pil.groen,  html:not([data-thema="light"]) .bel-ic,  html:not([data-thema="light"]) .prio.laag,  html:not([data-thema="light"]) .snel .ic,  html:not([data-thema="light"]) .versie-melding,  html:not([data-thema="light"]) .rt-pil.uit{background:rgba(111,191,85,.16);color:var(--groen-donker);border-color:rgba(111,191,85,.4)}
    html:not([data-thema="light"]) .off-toggle.actief,  html:not([data-thema="light"]) .off-nr,  html:not([data-thema="light"]) .off-oud,  html:not([data-thema="light"]) .prio.midden,  html:not([data-thema="light"]) .rt-pil.open{background:rgba(224,162,59,.16);color:var(--amber);border-color:rgba(224,162,59,.5)}
    html:not([data-thema="light"]) .off-oud.rood,  html:not([data-thema="light"]) .afw-nu,  html:not([data-thema="light"]) .gem-ic,  html:not([data-thema="light"]) .prio.hoog{background:rgba(224,106,102,.16);color:var(--rood)}
    html:not([data-thema="light"]) .gem-vm{background:var(--zand-licht)}
    html:not([data-thema="light"]) .log-dot,  html:not([data-thema="light"]) .sys-dot,  html:not([data-thema="light"]) .logtabel .tag::before{background:#5a574f}
    html:not([data-thema="light"]) .afw-bron,  html:not([data-thema="light"]) .versie-item .vt,  html:not([data-thema="light"]) .sessie-tijd,  html:not([data-thema="light"]) .gem-tijd,  html:not([data-thema="light"]) .sys-wat small,  html:not([data-thema="light"]) .rt-tabel .sub,  html:not([data-thema="light"]) .ond-tekst .ot,  html:not([data-thema="light"]) .blok-info,  html:not([data-thema="light"]) .lk-url,  html:not([data-thema="light"]) .lk-uitleg,  html:not([data-thema="light"]) .versie-nr small{color:var(--grijs)}
    html:not([data-thema="light"]) img.pm-foto,  html:not([data-thema="light"]) .hero img{filter:brightness(.9)}
}

/* Gespreksnotitie op Start (22-09-2026) — gewoon groene tekst met ruimte ertussen (Theo) */
.gn-keuze{display:flex;flex-wrap:wrap;gap:6px 26px;margin:2px 0 12px}
.gn-chip,.gn-meer{font-family:inherit;font-size:13px;font-weight:400;line-height:1.4;border:none;background:none;color:var(--groen-donker);padding:2px 0;cursor:pointer;white-space:nowrap;box-shadow:none;border-bottom:2px solid transparent;border-radius:0}
.gn-chip .gn-t{margin-right:5px;opacity:.75}
.gn-chip:hover,.gn-meer:hover{color:var(--groen)}
.gn-chip.actief{font-weight:700;border-bottom-color:var(--groen)}
.gn-meer{opacity:.75}
.gn-n{display:inline-block;min-width:15px;text-align:center;font-size:10px;font-weight:700;background:var(--groen);color:#fff;border-radius:999px;padding:0 4px;margin-left:5px;vertical-align:1px}
.gn-lijst{margin:10px 0 0;padding:0 0 0 18px;font-size:13px;color:#3d3a33}
.gn-lijst li{margin:2px 0}
.gn-weg{border:none;background:none;color:var(--grijs-licht);cursor:pointer;font-size:11px;padding:0 4px}
.gn-weg:hover{color:#c0392b}
html[data-thema="dark"] .gn-lijst{color:#CFCBC0}
@media (prefers-color-scheme: dark){html:not([data-thema="light"]) .gn-lijst{color:#CFCBC0}}