/* schermen.css | Versie 4.3 -- 2026-10-14 | Tandwielknop met menu en Over-venster. Eerder 4.2 | Nieuwe-notitieknoppen als formulier. Eerder 4.1 | + voor een nieuw tabblad en de blauwe knop Nieuwe notitie rechtsboven de notitie. Eerder 4.0 | Venster om een ordner te hernoemen. Eerder 3.9 | Groene knop Klaar met bewerken achter de titel. Eerder 3.8 | Rode tag dubbel. Eerder 3.7 | Inbox-bak begint op dezelfde hoogte als de plank en de notitie. Eerder 3.6 | Kast met twee of meer planken (plank van vaste hoogte, ruimte tussen de planken). Eerder 3.5 | Inbox als bak, voorstel (rij en notitie) en verplaatsen als boom. Eerder 3.4 | Paneel voor een nieuwe ordner onder de +knop. Eerder 3.3 | De Inbox-kaart is gemarkeerd als de Inbox open staat. Eerder 3.2 | Ordners-kolom: +knop naast het label, Inbox-kaart onder de ordners. Eerder 3.1 | Kop boven de map op een regel (logo, naam, tabbladen, notities). Eerder 3.0 | Zoekveld als echt invoerveld in de pil. Eerder 2.9 | Tegels voor meerdere PDF's in een notitie. Eerder 2.8 | Meer ruimte tussen titelrij, tags en inhoud, stempel iets ruimer, dunne lijn onder de rij met tags en stempel. Eerder 2.7 | Tagsbalk kleinere basisbreedte, zodat tags en stempel op een regel passen. Eerder 2.6 | Stempel op een regel; tags en stempel in een lage rij. Eerder 2.5 | Zoekscherm op het web gecentreerd (maximaal 1640 px breed). Eerder 2.4 | Kleiner stempel, onderrij met tags links en stempel of datums rechts, tagchips met kruisje en de knop + tag. Eerder 2.3 | Telefoon: touch-action pan-y op rugs en regels voor het vegen (swipe.js). Eerder 2.2 | De hele notitie rechts in de open ordner (maximaal 960 px), stempel bovenaan, gekleurde knoppen (potlood lichtblauw, verplaatsen lichtgeel, prullenbak rood); de CSS van het voorbeeld (bijlagevlak, notitietekst, vinkjes) is vervallen. Eerder 2.1 | Verplaatsen: paneel (n2-verplaats) en slepen (sleept, doel). Eerder 2.0 | Web: plankkaart, binder en notitiekaart beginnen op dezelfde hoogte (kop van de map vaste hoogte, labels in een even hoge strook). Eerder 1.9 | Titelrij met icoonknoppen (potlood, prullenbakje), meldingen en de prullenbaklijst. Eerder 1.8 | De paginabalk blijft onderaan het blad (n2-pag-blok) en de binder is minimaal 1040 px hoog, zodat de balk op elke pagina op dezelfde plek staat. Eerder 1.7 | Paginering (.n2-pag) en de map op het web 80 px breder (max 800 px). Eerder 1.6 | De bijlage in de notitiekaart is een link (hover). Eerder 1.5 | Bijlagevlak in de notitiekaart groter (90 x 127 px) en met echt miniatuur (klasse heeft-miniatuur). Eerder 1.4 | De map op het web groeit mee met de schermhoogte; vinkjes in de notitiekaart. Eerder 1.3 | Web: kleinere map (binder maximaal 720 px) met bredere, beter leesbare tabbladen (170 px, tot twee regels) en een bredere, grotere notitiekaart (besluit Jeroen: terugvinden en lezen van notities staat voorop). Eerder 1.2 | Web vult de volle breedte (geen maximum van 1440 px meer; besluit Jeroen), notitiekaart tot 600 px, zoekresultaten tot 1400 px. Eerder 1.1 | Weblayout vanaf 768 px werkt, regelhoogte normal, meta in de notitielijst loopt netjes door. Eerder 1.0: Eerste versie: de schermen van huisstijl/schermen (telefoon-1 startscherm, telefoon-2 ordner open, telefoon-3 zoekresultaten, web-1 archief, web-2 zoekresultaten). Elke regel is de omzetting van een inline stijl uit de referentie naar een klasse (de CSP staat geen inline stijl toe); vaste kleurcodes zijn tokens (waarden identiek), kleuren zonder token staan letterlijk zoals in de referentie. Telefoon: tot 768 px, web: vanaf 768 px. */

/* ---------- Ordnerkleur: klasse o-<sleutel> zet --o (kleur), --tab (inactief tabblad) en --rug (schuine rug in het merk) ---------- */
.o-onderhanden, .o-prive, .o-werk, .o-vm, .o-vrijetijd, .o-overig, .o-los { --tab: rgba(255,255,255,0.8); }
.o-onderhanden { --o: var(--ordner-onderhanden); }
.o-prive { --o: var(--ordner-prive); }
.o-werk { --o: var(--ordner-werk); --rug: var(--accent); }
.o-vm { --o: var(--ordner-vm); }
.o-vrijetijd { --o: var(--ordner-vrijetijd); --rug: var(--accent); }
.o-pocket { --o: var(--ordner-pocket); --tab: var(--ordner-tab-pocket); }
.o-overig, .o-los { --o: var(--shelf-edge); }

/* ---------- Gedeeld ---------- */
.n2-merk-recht { fill: var(--ink); }
.n2-merk-schuin { fill: var(--rug, var(--o, var(--accent))); }
.n2-woordmerk { font-size: var(--t-wordmark-size); font-weight: var(--t-wordmark-weight); letter-spacing: var(--t-wordmark-ls); color: var(--ink); line-height: normal; }
.n2-twee { color: var(--accent); }
.n2-label { font-size: var(--t-label-size); font-weight: var(--t-label-weight); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink-muted); }
.n2-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.n2-teller { background: var(--accent); color: #FFFFFF; border-radius: var(--radius-pill); padding: 1px 8px; font-size: 13px; font-weight: 700; }
.n2-tagpil { background: var(--tag-bg); color: var(--tag-ink); border-radius: var(--radius-pill); padding: 2px 8px; font-size: 12px; font-weight: 600; }
.n2-tagpil.groot { padding: 2px 9px; }
.n2-sneltoets { margin-left: auto; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; }
.n2-paginering { margin: 12px 0 0; font-size: 13px; }
.n2-paginering a { margin-right: var(--space-4); font-weight: 700; }
.n2-pag-blok { margin-top: auto; padding-top: 14px; }
.n2-pag { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0; }
.n2-pag-knop { min-width: 40px; height: 40px; padding: 0 12px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
a.n2-pag-knop:hover { background: var(--paper); }
.n2-pag-knop.nu { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.n2-pag-knop.uit { color: var(--ink-muted); opacity: 0.5; font-weight: 600; }
.n2-pag-punten { min-width: 20px; text-align: center; color: var(--ink-muted); }
.n2-pag-tekst { margin: 6px 0 0; text-align: center; font-size: 13px; color: var(--ink-muted); }

.n2-zoekpil { display: flex; align-items: center; gap: 10px; height: 54px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0 var(--space-4); box-sizing: border-box; text-decoration: none; color: var(--ink-muted); font-size: 16px; }
.n2-zoekpil.web { flex: 1 1 320px; max-width: 640px; height: 48px; }
.n2-zoekpil.topzoek { flex: 1 1 260px; max-width: 520px; height: 44px; min-width: 0; }

.n2-knop-klein { height: 44px; padding: 0 14px; border-radius: var(--radius-md); border: 0; background: var(--ink); color: var(--on-ink); font: inherit; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; text-decoration: none; }
.n2-knop-klein:hover { background: var(--ink-soft); color: var(--on-ink); }
.n2-knop-groot { height: 62px; border-radius: var(--radius-lg); border: 0; font: inherit; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer; }
.n2-knop-groot.vol { background: var(--ink); color: var(--on-ink); }
.n2-knop-groot.rand { border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); }
.n2-knop-groot:disabled, .w-knop:disabled { cursor: default; }

.n2-thumb { width: 52px; height: 68px; flex-shrink: 0; align-self: center; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); display: flex; flex-direction: column; gap: 4px; padding: 6px; box-sizing: border-box; position: relative; }
.n2-thumb-stempel { align-self: flex-end; width: 24px; height: 9px; border: 1px solid #1E2328; border-radius: 2px; display: flex; align-items: center; padding-left: 1px; box-sizing: border-box; }
.n2-thumb-lijn { height: 3px; background: #D5D9DF; }
.n2-thumb-lijn.kort { width: 70%; }

/* Archiefstempel: altijd licht, ook in de donkere modus */
.n2-stempel { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; border: 1.5px solid #1E2328; border-radius: 6px; padding: 6px 12px; background: #FFFFFF; }
.n2-stempel-tekst { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.n2-stempel-kop { font-size: 12px; font-weight: 800; color: #1E2328; }
.n2-stempel-regel { font-size: 11.5px; color: #5E6670; }

/* Plankrug, liggend (telefoon) */
.rug-l { height: 50px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 10px; background: var(--o); border-radius: var(--radius-sm); text-decoration: none; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.18); }
.rug-l:nth-child(6n+1) { margin: 0 10px 0 0; }
.rug-l:nth-child(6n+2) { margin: 0 4px 0 6px; }
.rug-l:nth-child(6n+3) { margin: 0 8px 0 0; }
.rug-l:nth-child(6n+4) { margin: 0 2px 0 4px; }
.rug-l:nth-child(6n+5) { margin: 0 6px 0 0; }
.rug-l:nth-child(6n+6) { margin: 0 0 0 2px; }
.rug-l-etiket { flex: 1; height: 32px; background: var(--label-paper); border-radius: 2px; display: flex; align-items: center; padding: 0 10px; font-size: 15px; font-weight: 600; color: #1E2328; }
.grijpgat { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.75); box-sizing: border-box; }
.grijpgat.klein { width: 14px; height: 14px; }
.schriftje { height: 30px; margin-right: 60px; display: flex; align-items: center; padding: 0 12px; background: var(--surface-sunken); border: 1px solid #C9C1B2; border-radius: 3px; text-decoration: none; box-sizing: border-box; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.plank-balk { height: 10px; margin-top: 2px; background: var(--shelf); border-radius: 2px; box-shadow: 0 3px 0 var(--shelf-edge); }

/* Notitieregel */
.regel-icoon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }

/* ---------- Telefoon of web ---------- */
.n2-web { display: none; }
@media (min-width: 768px) {
    .n2-web { display: block; }
}
.n2-tel { flex: 1; width: 100%; max-width: 100%; box-sizing: border-box; background: var(--paper); color: var(--ink); }
/* De referentie zet geen regelhoogte: het lettertype bepaalt hem (normal), niet de 24px van de body */
.n2-tel, .w, .zp { line-height: normal; }

/* ---------- Telefoon 1: startscherm ---------- */
.t1 { min-height: 100dvh; display: flex; flex-direction: column; gap: 20px; padding: 56px var(--space-4) 28px; }
.t1-kop { display: flex; align-items: center; gap: 10px; height: 44px; }
.t1 .n2-zoekpil { flex-shrink: 0; }
.t1-inbox { display: flex; align-items: center; gap: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 12px 12px var(--space-4); }
.t1-inbox-tekst { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.t1-inbox-naam { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.t1-inbox-sub { font-size: 14px; color: var(--ink-muted); }
.t1-plank { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.t1-stapel { display: flex; flex-direction: column; gap: 4px; }
.t1-ruimte { flex: 1; }
.t1-knoppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ---------- Telefoon 2: ordner open ---------- */
.t2 { min-height: 100dvh; display: flex; flex-direction: column; padding-top: 48px; }
.t2-kop { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
.t2-terug { align-self: flex-start; height: 44px; display: flex; align-items: center; gap: 4px; text-decoration: none; font-size: 16px; font-weight: 600; color: var(--ink); }
.t2-titelrij, .w-ordnerkop { display: flex; align-items: center; gap: var(--space-3); }
.t2-titelkolom { display: flex; flex-direction: column; gap: 2px; }
.t2-titel { margin: 0; font-size: var(--t-title-size); font-weight: var(--t-title-weight); letter-spacing: var(--t-title-ls); line-height: 1.1; }
.t2-meta { font-size: 13px; color: var(--ink-muted); }
.t2-binder { flex: 1; min-height: 0; display: flex; background: var(--o); padding: 14px 0 0 10px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: inset 0 6px 0 rgba(0,0,0,0.12); }
.t2-tabs { width: 92px; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 22px; }
.t2-tab { height: 56px; flex-shrink: 0; border: 0; border-radius: 12px 0 0 12px; background: var(--tab); color: var(--ink); font-size: 15px; font-weight: 600; text-align: left; padding: 0 10px; margin-right: 8px; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.t2-tab.actief { background: var(--surface); font-weight: 700; margin-right: 0; }
.t2-tab-streep { width: 6px; height: 24px; flex-shrink: 0; border-radius: 3px; background: var(--o); }
.t2-tab-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t2-blad { flex: 1; min-width: 0; position: relative; background: var(--surface); padding: var(--space-4) var(--space-4) var(--space-4) 44px; display: flex; flex-direction: column; overflow: hidden; }
.t2-rail { position: absolute; left: 10px; top: 60px; bottom: 60px; width: 14px; border-radius: 7px; background: #AEB4BB; box-shadow: inset -3px 0 0 #8A9098; }
.t2-ring { position: absolute; left: 5px; width: 24px; height: 24px; border-radius: 50%; border: 5px solid #8A9098; background: var(--surface); box-sizing: border-box; }
.t2-ring.r1 { top: 120px; } .t2-ring.r2 { top: 300px; } .t2-ring.r3 { top: 480px; }
.t2-bladkop, .w-bladkop { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.t2-bladtitel { margin: 0; font-size: var(--t-heading-size); font-weight: var(--t-heading-weight); }
.t2-sorteer { width: 44px; height: 32px; color: var(--ink-muted); display: flex; align-items: center; justify-content: flex-end; }
.regel { display: flex; align-items: center; gap: 10px; padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); }
.regel-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.regel-titel { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.regel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; color: var(--ink-muted); }
.regel-meta-tekst { white-space: nowrap; }
.t2-leeg { color: var(--ink-muted); font-size: 14px; margin: var(--space-4) 0; }
.t2-ruimte { flex: 1; }
.t2-toevoegen { height: 48px; border-radius: var(--radius-lg); border-radius: 12px; border: 1.5px dashed var(--line); background: transparent; color: var(--ink-soft); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; margin: var(--space-3) 0; text-decoration: none; }

/* ---------- Web: kop en kolommen ---------- */
.w { width: 100%; box-sizing: border-box; background: var(--paper); color: var(--ink); }
.w-binnen { max-width: none; margin: 0 auto; padding: 20px var(--space-8) var(--space-8); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-6); }
.w-kop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.w-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: var(--space-3); height: 48px; }
.w-woord { font-size: 26px; }
.w-ruimte { flex: 1 1 0; }
.w-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.w-knop { height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.w-knop.rand { border: 1.5px solid var(--ink); }
.w-knop.vol { padding: 0 18px; border: 0; background: var(--ink); color: var(--on-ink); }
.w-kolommen { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.w-zij { flex: 1 1 280px; max-width: 300px; display: flex; flex-direction: column; gap: var(--space-3); }
.w-plankkaart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) 14px 14px; }
.w-rugs { display: flex; align-items: flex-end; gap: 5px; min-height: 182px; }
.rug-s { width: 38px; height: 168px; flex-shrink: 0; border: 0; padding: 8px 0 12px; background: var(--o); border-radius: 4px 4px 2px 2px; box-shadow: inset -5px 0 0 rgba(0,0,0,0.18); display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; text-decoration: none; }
.rug-s.gekozen { height: 178px; box-shadow: inset -5px 0 0 rgba(0,0,0,0.18), 0 0 0 3px var(--ink); }
.rug-s-etiket { width: 26px; height: 110px; background: var(--label-paper); color: #1E2328; border-radius: 2px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; }
.w-plankbalk { height: 8px; background: var(--shelf); border-radius: 2px; box-shadow: 0 3px 0 var(--shelf-edge); margin: 0 -4px; }
.w-recentlabel { margin-top: var(--space-2); }
.w-recent { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 4px 14px; }
.w-recentrij { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; border-bottom: 1px solid var(--line-soft); font-size: 14px; min-width: 0; }
.w-recentrij:last-child { border-bottom: 0; }
.w-recentstreep { width: 4px; height: 20px; flex-shrink: 0; border-radius: 2px; background: var(--o); }
.w-midden { flex: 1 1 600px; max-width: 800px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.w-binder { display: flex; background: var(--o); border-radius: var(--radius-xl); padding: 14px 14px 14px 10px; min-height: max(1040px, calc(100dvh - 260px)); box-sizing: border-box; }
.w-tabs { width: 170px; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 22px; }
.w-tab { min-height: 52px; padding-top: 6px; padding-bottom: 6px; box-sizing: border-box; flex-shrink: 0; border: 0; border-radius: 12px 0 0 12px; background: var(--tab); color: var(--ink); font-size: 15px; font-weight: 600; text-align: left; padding: 0 var(--space-3); margin-right: 8px; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.w-tab.actief { background: var(--surface); font-weight: 700; margin-right: 0; }
.w-tab-streep { width: 6px; height: 22px; flex-shrink: 0; border-radius: 3px; background: var(--o); }
.w-blad { flex: 1; min-width: 0; position: relative; background: var(--surface); border-radius: 0 6px 6px 0; padding: 18px 20px 18px 56px; display: flex; flex-direction: column; }
.w-rail { position: absolute; left: 14px; top: 70px; bottom: 70px; width: 16px; border-radius: 8px; background: #AEB4BB; box-shadow: inset -3px 0 0 #8A9098; }
.w-ring { position: absolute; left: 8px; width: 28px; height: 28px; border-radius: 50%; border: 6px solid #8A9098; background: var(--surface); box-sizing: border-box; }
.w-ring.boven { top: 150px; } .w-ring.onder { bottom: 150px; }
.w-sorteer { font-size: 13px; color: var(--ink-muted); text-decoration: none; }
.w-regel { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) 10px; margin: 0 -10px; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; border-radius: var(--radius-sm); border-radius: 8px; color: var(--ink); text-align: left; box-sizing: content-box; text-decoration: none; }
.w-regel.gekozen { background: var(--paper); }
.w-regeltekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.w-regeltitel { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.w-regelmeta { font-size: 13px; color: var(--ink-muted); }
.w-notitie { flex: 2 1 420px; min-width: 0; max-width: 960px; display: flex; flex-direction: column; gap: var(--space-3); }
.w-notitiekaart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: 14px; }
.w-notitietitel { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.015em; overflow-wrap: anywhere; }

/* ---------- Zoeken (telefoon-3 en web-2) ---------- */
.zp { flex: 1; width: 100%; background: var(--paper); color: var(--ink); }
.zp-binnen { display: flex; flex-direction: column; gap: 14px; padding: 48px 0 0; overflow: hidden; }
.zp-kop { display: flex; align-items: center; gap: 4px; padding: 0 var(--space-4) 0 6px; }
.zp-logo, .zp-nieuw { display: none; }
.zp-terug { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.zp-veld { flex: 1; display: flex; align-items: center; gap: 10px; height: 54px; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-lg); padding: 0 4px 0 14px; box-sizing: border-box; margin: 0; }
.zp-veld input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 16px; background: transparent; color: var(--ink); }
.zp-wis { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
#zoek-uitkomst { display: flex; flex-direction: column; gap: 14px; }
.zu-leeg { padding: 0 var(--space-4); color: var(--ink-muted); }
.zu-chips { display: flex; gap: 8px; padding: 0 var(--space-4); overflow-x: auto; scrollbar-width: none; }
.zu-chips::-webkit-scrollbar { display: none; }
.n2-chip { flex-shrink: 0; height: 40px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.n2-chip[aria-pressed="true"] { border: 0; background: var(--ink); color: var(--on-ink); }
.zu-teller { display: flex; align-items: baseline; justify-content: space-between; padding: 0 var(--space-4); }
.zu-sorteer { font-size: 13px; color: var(--ink-muted); }
.zu-web { display: block; }
.zu-filters, .zu-kop { display: none; }
.zu-kaarten { display: flex; flex-direction: column; gap: 10px; padding: 0 var(--space-4) var(--space-4); }
.zk { display: flex; gap: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 14px 14px 0; text-decoration: none; color: var(--ink); overflow: hidden; }
.zk[hidden] { display: none; }
.zk-streep { width: 5px; flex-shrink: 0; margin: -14px 0; background: var(--o); }
.zk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.zk-labels { align-self: flex-start; display: flex; gap: 6px; }
.zk-labels:empty { display: none; }
.zk-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tag-ink); background: var(--tag-bg); border: 1px solid var(--tag-line); border-radius: var(--radius-pill); padding: 1px 8px; }
.zk-titel { font-size: 16px; font-weight: 600; line-height: 22px; overflow-wrap: anywhere; }
.zk-fragment { font-size: 14px; line-height: 20px; color: var(--ink-soft); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-muted); }
.zk mark { background: var(--match-bg); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.zk mark.zk-tag { border-radius: var(--radius-pill); padding: 2px 9px; font-size: 12px; font-weight: 600; }

/* ---------- Web: zoekresultaten ---------- */
@media (min-width: 768px) {
    .zp-binnen { max-width: 1640px; margin: 0 auto; padding: 20px var(--space-8) var(--space-8); box-sizing: border-box; gap: var(--space-6); }
    .zp-kop { flex-wrap: wrap; gap: var(--space-4); padding: 0; }
    .zp-logo { display: flex; }
    .zp-nieuw { display: flex; }
    .zp-terug { display: none; }
    .zp-veld { flex: 1 1 320px; max-width: 640px; height: 48px; padding: 0 4px 0 15px; }
    .zp-wis { width: 40px; height: 40px; }
    .zu-leeg { padding: 0; }
    .zu-chips, .zu-teller { display: none; }
    .zu-web { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: flex-start; }
    .zu-filters { display: flex; flex: 1 1 220px; max-width: 260px; flex-direction: column; gap: var(--space-6); }
    .zu-groep { display: flex; flex-direction: column; gap: 6px; }
    .zu-groep.ordners { gap: 2px; }
    .zu-grouplabel { margin-bottom: 4px; }
    .zu-groep.ordners .zu-grouplabel { margin-bottom: 6px; }
    .w-filter { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
    .w-filter[aria-pressed="true"] { border: 0; background: var(--ink); color: var(--on-ink); }
    .w-filter-n { font-weight: 400; opacity: 0.85; }
    .w-ordnerfilter { min-height: 40px; display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
    .w-ordnerfilter input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
    .w-ordnerstreep { width: 6px; height: 20px; border-radius: 3px; background: var(--o); }
    .zu-sectie { flex: 999 1 600px; min-width: 0; max-width: 1400px; display: flex; flex-direction: column; gap: var(--space-3); }
    .zu-kop { display: flex; align-items: baseline; justify-content: space-between; }
    .zu-titel { margin: 0; font-size: var(--t-title-size); font-weight: var(--t-title-weight); letter-spacing: var(--t-title-ls); }
    .zu-kaarten { padding: 0; gap: var(--space-3); }
    .zk { gap: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-4) 0; }
    .zk-streep { width: 6px; margin: -16px 0; }
    .zk-titel { font-size: 17px; line-height: 24px; }
    .zk-fragment { font-size: 15px; line-height: 22px; }
    .n2-thumb { width: 64px; height: 84px; gap: 5px; padding: 8px; }
    .n2-thumb-stempel { width: 30px; height: 11px; }
    .n2-thumb-stempel svg { width: 8px; height: 8px; }
    .n2-thumb-lijn { height: 4px; }
}

/* ---------- Oude pagina's: de kopbalk met merk en woordmerk ---------- */
.logo { display: flex; align-items: center; gap: 10px; }
.voet-links { margin-left: 0; }
.voet-links a, .voet-links .knop-link { color: var(--ink-muted); text-decoration: none; font-size: 1em; }

/* Vanaf 768 px de weblayout in plaats van de telefoonlayout (onderaan, zodat de display van .t1 en .t2 hem niet overschrijft) */
@media (min-width: 768px) {
    .n2-tel.t1, .n2-tel.t2 { display: none; }
}
.w-tab .t2-tab-naam { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.2; }
/* Vinkjes in de notitiekaart: aan betekent nog nodig (vet), niets wordt doorgehaald */
.w-vink { width: 20px; height: 20px; flex-shrink: 0; margin: 1px 0 0; accent-color: var(--ink); }

/* Titelrij met potlood (bewerken, voor de titel) en prullenbakje (weggooien, achter de titel), meldingen en de prullenbak */
.n2-titelrij { display: flex; align-items: flex-start; gap: 14px; }
.n2-titelrij h1, .n2-titelrij .n2-notitietitel { flex: 1; min-width: 0; margin: 0; }
.n2-ikoonknop { width: 40px; height: 40px; flex-shrink: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-muted); cursor: pointer; text-decoration: none; }
.n2-ikoonknop:hover { color: var(--ink); border-color: var(--ink); }
.n2-ikoonknop.vol { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.n2-ikoonknop.vol:hover { background: var(--ink-soft); }
.n2-weggooi { margin: 0; }
.n2-melding { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 var(--space-3); padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font-size: 15px; }
.lijst.prullenbak li { align-items: center; }
.prullenbak-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Uitlijning op het web: de map is het uitgangspunt. De kop van de map heeft een vaste hoogte en de labels van de
   boekenplank en de notitie staan in een even hoge strook, zodat de plankkaart, de binder en de notitiekaart
   op dezelfde hoogte beginnen. */
.w-ordnerkop { height: 48px; box-sizing: border-box; }
.w-zijkop, .w-notitiekop { height: 48px; display: flex; align-items: center; position: relative; }
.w-zijkop, .w-notitiekop { justify-content: space-between; }

/* Verplaatsen: paneel met ordners en tabbladen, en slepen naar een tabblad */
.n2-verplaats { position: relative; }
.n2-verplaats > summary { list-style: none; }
.n2-verplaats > summary::-webkit-details-marker { display: none; }
.n2-verplaats[open] > summary { color: var(--ink); border-color: var(--ink); }
.n2-verplaats-paneel { position: absolute; right: 0; top: 48px; z-index: 30; width: 300px; max-height: 60vh; overflow-y: auto; box-sizing: border-box; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.n2-verplaats-groep { display: flex; flex-direction: column; gap: 4px; }
.n2-verplaats-ordner { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.n2-verplaats-streep { width: 6px; height: 16px; border-radius: 3px; background: var(--o); }
.n2-verplaats-keuze { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 9px 12px; border: 0; border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
button.n2-verplaats-keuze:hover { background: var(--ink); color: var(--on-ink); }
.n2-verplaats-keuze.huidig { color: var(--ink-muted); background: transparent; border: 1px dashed var(--line); cursor: default; }
.w-regel[draggable="true"] { cursor: grab; }
.w-regel.sleept { opacity: 0.4; }
.w-tab.doel { outline: 3px dashed var(--ink); outline-offset: -3px; }

/* De hele notitie rechts in de open ordner, de stempel bovenaan en gekleurde knoppen */
.n2-notitietitel { font-size: 26px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; overflow-wrap: anywhere; }
.w-notitie .kaart { margin: 0; }
.n2-ikoonknop.bewerk { background: #D9EAF8; border-color: #8DBBE3; color: #164B78; }
.n2-ikoonknop.bewerk:hover { background: #BBD8F0; border-color: #164B78; color: #0E3556; }
.n2-ikoonknop.verplaats { background: #FFF1B8; border-color: #E2C650; color: #6B5200; }
.n2-ikoonknop.verplaats:hover, .n2-verplaats[open] > .n2-ikoonknop.verplaats { background: #FFE585; border-color: #8A6A00; color: #4A3900; }
.n2-ikoonknop.weg { background: #C0392B; border-color: #C0392B; color: #FFFFFF; }
.n2-ikoonknop.weg:hover { background: #962D22; border-color: #962D22; color: #FFFFFF; }

/* Telefoon: vegen naar links opent een ordnerrug of een notitieregel (swipe.js). Verticaal scrollen blijft vrij. */
.n2-tel .rug-l, .n2-tel .regel { touch-action: pan-y; }
.n2-tel.t1 { overflow-x: hidden; }

/* Onder de titel: links de tags (met + tag), rechts het kleine stempel of de datums */
.n2-onderrij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.n2-meta-rechts { margin-left: auto; }
.n2-datums { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.n2-tags { flex: 1 1 140px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.n2-tags-lijst { display: contents; }
.n2-tagchip { display: inline-flex; align-items: center; background: var(--tag-bg); border-radius: var(--radius-pill); }
.n2-tagchip a.tag { margin: 0; background: transparent; padding: 2px 3px 2px 9px; }
.n2-tag-x { border: 0; background: transparent; color: var(--tag-ink); cursor: pointer; padding: 0 8px 0 2px; font-size: 15px; line-height: 1; }
.n2-tag-x:hover { color: var(--ink); }
.n2-tag-plus { border: 1.5px dashed var(--line); background: transparent; border-radius: var(--radius-pill); padding: 2px 10px; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-muted); cursor: pointer; }
.n2-tag-plus:hover { color: var(--ink); border-color: var(--ink); }
.n2-tag-invoer { height: 28px; width: 170px; box-sizing: border-box; border: 1.5px solid var(--ink); border-radius: var(--radius-pill); padding: 0 12px; font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); }
.n2-tag-invoer[hidden], .n2-tag-plus[hidden] { display: none; }
.n2-tags-melding { font-size: 12px; color: var(--ink-muted); }
.n2-tags-melding:empty { display: none; }

/* Ruimte tussen de delen van een notitie: titelrij, tags en stempel, en de inhoud */
article.notitie { display: flex; flex-direction: column; gap: 18px; }
article.notitie .n2-titelrij { padding-top: 4px; }
article.notitie .n2-onderrij { padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }

/* Meerdere PDF's in een notitie: tegels in twee kolommen, een gekozen, de PDF eronder */
.pdf-tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.pdf-tegel { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.pdf-tegel:hover { border-color: var(--ink); }
.pdf-tegel.gekozen { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.pdf-tegel-vlak { display: block; width: 56px; height: 79px; flex-shrink: 0; box-sizing: border-box; background: #FFFFFF; border: 1px solid var(--line); overflow: hidden; }
.pdf-tegel-vlak canvas { display: block; }
.pdf-tegel-tekst { display: flex; flex-direction: column; gap: 2px; font-size: 15px; min-width: 0; }
.pdf-tegel-paginas { font-size: 12px; font-weight: 400; color: var(--ink-muted); }

/* Zoekveld bovenaan: een echt invoerveld in de pil; Enter gaat naar de zoekresultaten */
.n2-zoekinvoer { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; outline: none; padding: 0; }
.n2-zoekinvoer::placeholder { color: var(--ink-muted); opacity: 1; }
.n2-zoekinvoer::-webkit-search-cancel-button { display: none; }
form.n2-zoekpil { margin: 0; }
.n2-zoekpil:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(30, 35, 40, 0.12); }

/* Kop boven de map op het web: logo, naam van de ordner, aantal tabbladen en aantal notities op een regel */
.w-ordnerkop .t2-titelkolom { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 14px; }
.w-ordnerkop .t2-meta { font-size: 14px; }

/* Ordners-kolom: + naast het label en de Inbox-kaart onder de ordners */
.w-plus { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--ink); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.w-plus:hover { background: var(--ink); color: var(--on-ink); }
.w-plus:disabled { opacity: 0.45; cursor: default; background: var(--surface); color: var(--ink); }
.w-inboxkaart { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; }
.w-inboxkaart:hover { border-color: var(--ink); }
.w-inboxnaam { font-size: 15px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.w-inboxkaart .n2-teller { font-size: 14px; }
.w-inboxkaart.gekozen { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* Nieuwe ordner: paneel onder de +knop */
.w-nieuwe-ordner { position: relative; }
.w-nieuwe-ordner > summary { list-style: none; }
.w-nieuwe-ordner > summary::-webkit-details-marker { display: none; }
.w-nieuwe-ordner[open] > summary { background: var(--ink); color: var(--on-ink); }
.w-nieuwe-ordner-paneel { position: absolute; right: 0; top: 44px; z-index: 30; width: 280px; box-sizing: border-box; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.w-nieuwe-ordner-paneel input[type="text"] { height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; }
.w-nieuwe-ordner-paneel input[type="text"]:focus { outline: none; border-color: var(--ink); }
.w-nieuwe-ordner-paneel .n2-pag-knop { align-self: flex-start; cursor: pointer; }

/* De Inbox: een bak van bovenaf gezien, met de notities als stroken erin (geen tabbladen) */
.w-binder.inbox { position: relative; padding: 18px 16px 20px; border-radius: 22px 22px 26px 26px; }
.w-binder.inbox::before { content: ""; position: absolute; top: -12px; left: 50%; width: 36%; height: 20px; transform: translateX(-50%); background: var(--o); border-radius: 14px 14px 0 0; }
.w-binder.inbox .w-tabs, .w-binder.inbox .w-rail, .w-binder.inbox .w-ring { display: none; }
.w-binder.inbox .w-blad { padding: 22px 22px 18px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 4px 12px rgba(0,0,0,0.16); clip-path: polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%, 0 30px); }
.w-binder.inbox .w-regel { width: auto; margin: 0 0 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.10); }
.w-binder.inbox a.w-regel:nth-of-type(odd) { margin-left: 8px; }
.w-binder.inbox a.w-regel:nth-of-type(even) { margin-right: 14px; }
.w-binder.inbox .w-regel.gekozen { background: #FFFFFF; border-color: var(--ink); }
.w-voorstel { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: var(--radius-pill); background: #FFF1B8; color: #6B5200; font-size: 12px; font-weight: 700; }

/* Voorstel bij een notitie in de Inbox */
.n2-voorstel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; background: #FFF8DB; border: 1px solid #E2C650; border-radius: var(--radius-md); font-size: 14px; }
.n2-voorstel-tekst { flex: 1 1 260px; min-width: 0; }
.n2-voorstel-reden { color: var(--ink-soft); }
.n2-voorstel .n2-pag-knop { height: 34px; cursor: pointer; }

/* Verplaatsen als boom: de tabbladen hangen onder hun ordner */
.n2-verplaats-groep > form, .n2-verplaats-groep > .n2-verplaats-keuze { margin-left: 8px; border-left: 2px solid var(--line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.n2-verplaats-groep > form .n2-verplaats-keuze { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.w-plankkaart .w-plankbalk { margin-bottom: 16px; }
.w-plankkaart .w-plankbalk:last-child { margin-bottom: 0; }

/* De tag "dubbel" (notities die voor meer dan 97% op elkaar lijken) is rood */
.n2-tagpil.dubbel { background: #C0392B; color: #FFFFFF; }
.n2-tagchip.dubbel { background: #C0392B; }
.n2-tagchip.dubbel a.tag, .n2-tagchip.dubbel .n2-tag-x { color: #FFFFFF; }
.n2-tagchip.dubbel .n2-tag-x:hover { color: #FFD9D4; }

/* Bewerkmodus: de titel met een groene knop (vliegtuigje) voor Klaar met bewerken */
.n2-titelrij .titel { flex: 1; min-width: 0; margin: 0; }
.n2-ikoonknop.klaar { background: #2E7D4F; border-color: #2E7D4F; color: #FFFFFF; }
.n2-ikoonknop.klaar:hover { background: #226139; border-color: #226139; color: #FFFFFF; }

/* Venster (overlay) om de naam van een ordner te wijzigen */
.n2-dialoog { width: 380px; max-width: calc(100vw - 32px); padding: 22px; border: 1.5px solid var(--ink); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: 0 16px 48px rgba(0,0,0,0.28); }
.n2-dialoog::backdrop { background: rgba(30, 35, 40, 0.45); }
.n2-dialoog-vorm { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.n2-dialoog-titel { margin: 0; font-size: 18px; font-weight: 800; }
.n2-dialoog input[type="text"] { height: 44px; box-sizing: border-box; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; }
.n2-dialoog input[type="text"]:focus { outline: none; border-color: var(--ink); }
.n2-dialoog-fout { margin: 0; min-height: 1.2em; font-size: 14px; color: #B3261E; }
.n2-dialoog-knoppen { display: flex; justify-content: flex-end; gap: 10px; }
.n2-dialoog-knoppen .n2-pag-knop { cursor: pointer; }
.n2-dialoog .hulp { margin: 0; }

/* + voor een nieuw tabblad rechtsboven de map, en de blauwe knop Nieuwe notitie rechtsboven de notitie */
.w-ordnerkop { position: relative; }
.w-nieuw-tab { margin-left: auto; }
.w-nieuwknop { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid #8DBBE3; border-radius: var(--radius-md); background: #D9EAF8; color: #164B78; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.w-nieuwknop span { font-size: 20px; line-height: 1; }
.w-nieuwknop:hover { background: #BBD8F0; border-color: #164B78; color: #0E3556; }

/* Knoppen voor een nieuwe notitie die een formulier zijn (telefoon) */
.t1-knoppen form { display: contents; }
button.t2-toevoegen { width: 100%; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
form.zp-nieuw { margin: 0; }

/* Tandwielknop rechtsboven (web): menu met Over deze applicatie en Uitloggen */
.w-menu { position: relative; }
.w-menu > summary { list-style: none; cursor: pointer; }
.w-menu > summary::-webkit-details-marker { display: none; }
.w-tandwiel { width: 48px; padding: 0; justify-content: center; box-sizing: border-box; }
.w-menu[open] > summary { background: var(--ink); color: var(--on-ink); }
.w-menu-paneel { position: absolute; right: 0; top: 56px; z-index: 30; width: 250px; box-sizing: border-box; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--radius-lg); box-shadow: 0 10px 28px rgba(0,0,0,0.18); }
.w-menu-paneel form { margin: 0; }
.w-menu-item { display: block; width: 100%; box-sizing: border-box; padding: 11px 14px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.w-menu-item:hover, .w-menu-item:focus-visible { background: var(--paper); outline: none; }
.over-lijst { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 4px 0 8px; }
.over-lijst dt { color: var(--ink-soft); font-size: 14px; }
.over-lijst dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.zp-menu { display: none; }
@media (min-width: 768px) { .zp-menu { display: block; } }