/* [THEMA] De kleuren van deze hub als tokens. Ze staan op precies de waarden
   die hier eerst hard per regel stonden, dus zonder gekozen thema verandert er
   niets. Het themablok onderaan deze pagina kan ze overschrijven, zodat de
   tools meegaan met de rest van je omgeving (productwens 13-08-2026).

   De pin blijft nodig: deze pagina is licht ontworpen terwijl BASE_CSS --text
   in dark mode op lichtgrijs zet -- zonder vastzetten wordt alles wat zijn
   kleur erft onleesbaar op een dark-mode-browser. */
:root{
  --to-vlak:#ffffff; --to-vlak-2:#eef4fd; --to-papier:#f5f9ff;
  --to-tekst:#0f172a; --to-tekst-2:#334155;
  --to-gedempt:#475569; --to-gedempt-2:#94a3b8;
  --to-lijn:#e5e9f0; --to-lijn-2:#cbd5e1;
  --to-merk:#1e5a9e; --to-op-merk:#ffffff;
}

/* Deze pagina's zijn LICHT ontworpen (witte kaarten, donkere tekst), maar
   BASE_CSS zet --text in dark mode op lichtgrijs. Alles wat zijn kleur
   erft werd daardoor onleesbaar op een dark-mode-browser (melding: de
   verzoekbalk onderaan /tools). Kleur en color-scheme hier vastzetten. */
html{ color-scheme:light; }
body{ font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
      color:var(--to-tekst); }
.pt-shell{ max-width:1180px; margin:1.6rem auto 4rem; padding:0 1rem; }
/* ---- Excel- en Word-kaart, in de kleuren die iedereen herkent ----
   Zelfde opbouw als .pt-editor-hero op de PDF-hub (icoon links, titel met
   badge, omschrijving, knop rechts), alleen met een eigen verloop per tool:
   Excel groen, Word blauw. De kaarten stonden hiervoor als twee identieke
   witte tegels naast elkaar en waren daardoor niet uit elkaar te houden
   (verzoek eigenaar, 08-08-2026). */
.of-hero{ display:flex; align-items:center; gap:18px; margin:0 0 14px; padding:20px 22px;
  border-radius:16px; text-decoration:none; color:var(--to-vlak);
  transition:transform .12s, box-shadow .12s; }
.of-hero:hover{ transform:translateY(-2px); }
.of-hero.is-excel{ background:linear-gradient(120deg,#21a366,#107c41);
  box-shadow:0 16px 40px -20px rgba(16,124,65,.75); }
.of-hero.is-excel:hover{ box-shadow:0 22px 50px -20px rgba(16,124,65,.88); }
.of-hero.is-word{ background:linear-gradient(120deg,#2b7cd3,#185abd);
  box-shadow:0 16px 40px -20px rgba(24,90,189,.75); }
.of-hero.is-word:hover{ box-shadow:0 22px 50px -20px rgba(24,90,189,.88); }
.of-hero .ofh-ic{ flex-shrink:0; width:52px; height:52px; border-radius:13px;
  background:rgba(255,255,255,.16); display:grid; place-items:center; color:var(--to-vlak); }
.of-hero .ofh-ic svg{ width:26px; height:26px; }
.of-hero .ofh-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.of-hero .ofh-title{ font-size:1.12rem; font-weight:700; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.of-hero .ofh-badge{ font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--to-vlak); padding:2px 8px; border-radius:999px; }
.of-hero.is-excel .ofh-badge{ color:#107c41; }
.of-hero.is-word .ofh-badge{ color:#185abd; }
.of-hero .ofh-desc{ font-size:.86rem; line-height:1.45; color:rgba(255,255,255,.9); }
.of-hero .ofh-cta{ flex-shrink:0; font-weight:600; font-size:.9rem;
  background:rgba(255,255,255,.16); padding:9px 16px; border-radius:10px; white-space:nowrap; }
@media (max-width:640px){
  .of-hero{ flex-wrap:wrap; gap:14px; padding:16px 17px; }
  .of-hero .ofh-cta{ width:100%; text-align:center; }
  .of-hero .ofh-ic{ width:44px; height:44px; }
}
.pt-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:1.2rem; }
.pt-back{ display:inline-flex; align-items:center; gap:6px; color:var(--to-gedempt); text-decoration:none; font-size:.9rem; font-weight:500; }
.pt-back:hover{ color:var(--to-tekst); }
.pt-h1{ font-family:'Fraunces',Georgia,serif; font-size:1.7rem; color:var(--to-tekst); margin:0; font-weight:600; letter-spacing:-.02em; }
.pt-privacy{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:600; color:#065f46; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:999px; padding:5px 12px; }
.pt-sub{ color:var(--to-gedempt); font-size:.95rem; margin:.2rem 0 1.6rem; max-width:640px; line-height:1.55; }
/* Dezelfde tekst, maar dan onder de tool: daar is hij toelichting achteraf en
   geen drempel vooraf. */
.pt-sub-onder{ margin:1.6rem 0 .2rem; font-size:.9rem; }
.pt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.pt-tool-card{ display:flex; flex-direction:column; gap:6px; background:var(--to-vlak); border:1px solid var(--to-lijn); border-radius:12px; padding:13px 14px 11px; text-decoration:none; color:var(--to-tekst); box-shadow:0 8px 24px -18px rgba(15,23,42,.28); transition:transform .12s, box-shadow .12s, border-color .12s; }
.pt-tool-card:hover{ transform:translateY(-2px); border-color:var(--to-lijn-2); box-shadow:0 14px 34px -18px rgba(30,90,158,.35); }
.pt-tool-ic{ width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--to-vlak-2); color:var(--to-merk); }
.pt-tool-card h3{ margin:1px 0 0; font-size:.95rem; font-weight:600; }
.pt-tool-card p{ margin:0; color:var(--to-gedempt); font-size:.79rem; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pt-card{ background:var(--to-vlak); border:1px solid var(--to-lijn); border-radius:16px; padding:22px; box-shadow:0 10px 30px -20px rgba(15,23,42,.30); }
.pt-drop{ border:2px dashed var(--to-lijn-2); border-radius:14px; padding:34px 20px; text-align:center; cursor:pointer; color:var(--to-gedempt); transition:border-color .12s, background .12s; }
.pt-drop:hover, .pt-drop.over{ border-color:var(--to-merk); background:var(--to-papier); color:var(--to-merk); }
.pt-drop .big{ font-size:1.02rem; font-weight:600; color:var(--to-tekst); margin-top:10px; }
.pt-drop .small{ font-size:.85rem; margin-top:3px; }
.pt-drop svg{ color:var(--to-gedempt-2); }
.pt-hidden{ display:none !important; }
.pt-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pt-field{ display:flex; flex-direction:column; gap:5px; }
.pt-field label{ font-size:.82rem; font-weight:600; color:var(--to-tekst-2); }
.pt-input, .pt-select{ padding:.5rem .7rem; border:1px solid var(--to-lijn-2); border-radius:9px; font:inherit; font-size:.9rem; background:var(--to-vlak); color:var(--to-tekst); }
.pt-input:focus, .pt-select:focus{ outline:2px solid var(--to-lijn-2); border-color:var(--to-merk); }
.pt-btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--to-lijn-2); background:var(--to-vlak); color:var(--to-tekst); border-radius:10px; padding:.6rem 1.1rem; font:inherit; font-size:.92rem; font-weight:600; cursor:pointer; transition:filter .12s, border-color .12s; }
.pt-btn:hover{ border-color:var(--to-merk); }
.pt-btn.primary{ background:var(--to-merk); border-color:var(--to-merk); color:var(--to-vlak); }
.pt-btn.primary:hover{ filter:brightness(1.07); }
.pt-btn.small{ padding:.35rem .7rem; font-size:.82rem; }
.pt-btn:disabled{ opacity:.5; cursor:default; }
.pt-actions{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.pt-status{ margin:12px 0 0; font-size:.88rem; color:var(--to-gedempt); min-height:1.1em; }
.pt-status.err{ color:#b42318; }
.pt-status.ok{ color:#067647; }
/* De .doc-melding ("tekst overgenomen, opmaak komt niet mee") is een
   waarschuwing, geen fout en geen succes — zonder deze klasse verscheen hij
   in het standaardgrijs en las niemand hem. */
.pt-status.warn{ color:#b45309; }
.pt-note{ font-size:.8rem; color:var(--to-gedempt-2); margin:2px 0 0; }
.pt-warn{ display:none; margin:0 0 14px; padding:10px 14px; border-radius:10px; background:#fffbeb; border:1px solid #fde68a; color:#92400e; font-size:.85rem; line-height:1.5; }

/* ===== Excel-raster ===== */
.xl-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.xl-tabs{ display:flex; gap:4px; flex-wrap:wrap; }
.xl-tab{ border:1px solid var(--to-lijn-2); background:#f8fafc; color:var(--to-gedempt); border-radius:8px 8px 0 0; padding:.35rem .8rem; font:inherit; font-size:.84rem; font-weight:600; cursor:pointer; }
.xl-tab.active{ background:var(--to-merk); border-color:var(--to-merk); color:var(--to-vlak); }
.xl-tab-plus{ font-weight:700; color:var(--to-merk); padding:.35rem .6rem; }
.xl-hint{ font-size:.78rem; color:var(--to-gedempt); margin-left:auto; }
.xl-grid td.err{ color:#b42318; font-weight:600; }
.xl-fx{ display:flex; align-items:center; gap:8px; flex:1; min-width:260px; }
/* Het adresvakje was een label; in Excel is het het NAAMVAK waar je een adres
   in tikt om erheen te springen. Vandaar een invoerveld met dezelfde opmaak. */
.xl-ref{ font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--to-gedempt);
  background:#f1f5f9; border:1px solid var(--to-lijn); border-radius:7px; padding:.35rem .55rem;
  width:96px; min-width:96px; text-align:center; }
.xl-ref:focus{ outline:none; border-color:var(--to-merk); background:var(--to-vlak); color:var(--to-tekst); }
/* Alleen de formulebalk mag de ruimte opeten. Deze regel raakte élke input in
   de balk, dus ook het naamvak: dat groeide mee tot de halve breedte en duwde
   de formulebalk weg (gebruikersmelding 09-08-2026). */
.xl-fx input#xlFx{ flex:1 1 auto; min-width:0; font-family:'JetBrains Mono',monospace; font-size:.84rem; }
.xl-ref{ flex:0 0 auto; }
/* ---- gekleurde verwijzingen IN de formulebalk ----
   De cellen waar een formule naar wijst kleuren al op in het raster; in de balk
   zelf bleef alles zwart, dus je kon de kleur niet terugvinden bij het stuk
   tekst waar hij bij hoort. Een <input> kan losse woorden niet kleuren, dus ligt
   er een laag ACHTER de balk met dezelfde tekst, waarin de verwijzingen wél hun
   kleur hebben; de tekst in de invoer zelf wordt doorzichtig gemaakt.
   Bewust geen contenteditable: dan zouden het aanwijzen met de muis, de
   cursorpositie en het plakken allemaal opnieuw uitgevonden moeten worden.
   De maten van de laag worden in JS uit de invoer overgenomen (fxLaagUitlijnen),
   zodat ze niet kunnen gaan schelen als de opmaak van .pt-input ooit wijzigt. */
.xl-fxveld{ position:relative; flex:1 1 auto; min-width:0; display:block; }
.xl-fxveld > input#xlFx{ position:relative; width:100%; background:transparent; }
.xl-fxveld > input#xlFx.xl-fx-doorzichtig{ color:transparent; caret-color:var(--to-tekst); }
.xl-fxlaag{ position:absolute; inset:0; overflow:hidden; white-space:pre;
  pointer-events:none; border-style:solid; border-color:transparent;
  display:flex; align-items:center; color:var(--to-tekst); }
.xl-wrap{ position:relative; overflow:auto; max-height:64vh; border:1px solid var(--to-lijn); border-radius:10px; background:var(--to-vlak); }
.xl-grid{ border-collapse:separate; border-spacing:0; font-size:.84rem; table-layout:fixed; }
.xl-grid th{ position:sticky; top:0; background:#f1f5f9; color:var(--to-gedempt); font-weight:600; font-size:.72rem; border-right:1px solid var(--to-lijn); border-bottom:1px solid var(--to-lijn-2); padding:4px 6px; min-width:84px; max-width:84px; z-index:2; }
.xl-grid th.rowh{ position:sticky; left:0; min-width:44px; max-width:44px; z-index:3; font-family:'JetBrains Mono',monospace; }
.xl-grid thead th.rowh{ z-index:4; }
.xl-grid td{ border-right:1px solid var(--to-lijn); border-bottom:1px solid var(--to-lijn); padding:3px 6px; min-width:84px; max-width:84px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:var(--to-vlak); color:var(--to-tekst); }
.xl-grid td:focus{ outline:2px solid var(--to-merk); outline-offset:-2px; white-space:normal; }
.xl-grid td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.xl-grid td.fx{ color:var(--to-merk); }
/* Een formule die deze tool niet zelf uitrekent: de waarde komt uit het bestand
   en beweegt niet mee. Stippellijn in oker — zichtbaar als je erop let, maar
   geen alarm, want er is niets mis met de cel. */
.xl-grid td.fx-onbekend{ text-decoration:underline dotted #b45309; text-underline-offset:3px; cursor:help; }
.xl-more{ font-size:.8rem; color:#92400e; background:#fffbeb; border-top:1px solid #fde68a; padding:6px 10px; }
/* Dezelfde balk, maar dan als mededeling in plaats van als waarschuwing: de
   grafieken blijven immers staan. Oranje zou hier onterecht alarmeren. */
.pt-warn.mild{ color:#155e75; background:#ecfeff; border-color:#a5f3fc; }
/* ---- Bereikselectie ----
   De cellen zijn contenteditable, dus slepen over de tabel geeft een TEKST-
   selectie die dwars door de cellen heen loopt en niet als bereik uit te lezen
   is. We houden de selectie daarom zelf bij en tekenen hem als achtergrond.
   Geen randen: die zijn in een tabel met vaste kolombreedtes 2 pixels breed en
   duwen de inhoud opzij bij elke muisbeweging. */
.xl-grid td.xl-sel{ background:#e3edfb; }
.xl-grid td.xl-sel.err{ background:#fdeaea; }
.xl-grid th.xl-kopsel{ background:#cfe0f5; color:#1e3a5f; }
/* De lijn om de selectie en om het geknipte blok staat alleen op de BUITENrand.
   Elke cel zijn eigen kader geven maakte er twintig hokjes van; in Excel is het
   één vlak met één lijn eromheen. Nog steeds box-shadow en geen border, om de
   reden hierboven: een border duwt de inhoud opzij.
   Alle acht schaduwen staan in ÉÉN declaratie, want een tweede box-shadow-regel
   op dezelfde cel vervangt de eerste in plaats van hem aan te vullen — en een
   cel kan tegelijk geselecteerd én geknipt zijn. */
.xl-grid td.xl-sel, .xl-grid td.xl-knip{
  box-shadow: var(--sb,0 0 #0000), var(--so,0 0 #0000), var(--sl,0 0 #0000), var(--sr,0 0 #0000),
              var(--kb,0 0 #0000), var(--ko,0 0 #0000), var(--kl,0 0 #0000), var(--kr,0 0 #0000); }
.xl-grid td.sel-boven { --sb:inset 0  2px 0 0 var(--to-merk); }
.xl-grid td.sel-onder { --so:inset 0 -2px 0 0 var(--to-merk); }
.xl-grid td.sel-links { --sl:inset  2px 0 0 0 var(--to-merk); }
.xl-grid td.sel-rechts{ --sr:inset -2px 0 0 0 var(--to-merk); }
.xl-grid td.knip-boven { --kb:inset 0  1px 0 0 var(--to-merk); }
.xl-grid td.knip-onder { --ko:inset 0 -1px 0 0 var(--to-merk); }
.xl-grid td.knip-links { --kl:inset  1px 0 0 0 var(--to-merk); }
.xl-grid td.knip-rechts{ --kr:inset -1px 0 0 0 var(--to-merk); }
/* Samengevoegd: één cel over meerdere kolommen. De vaste kolombreedte moet er
   dan af, anders knijpt hij terug naar de breedte van één kolom. */
.xl-grid td.xl-merge{ max-width:none; text-align:center; vertical-align:middle; }
/* ---- vulgreep ----
   Het vierkantje rechtsonder aan de selectie, waarmee je in Excel een reeks
   doortrekt. Hij hangt IN de cel (die daarvoor position:relative krijgt) en
   niet in een laag erboven: de tabel scrolt, en een laag erboven zou blijven
   staan waar hij stond. */
.xl-grid td.xl-vulcel{ position:relative; }
.xl-vulgreep{ position:absolute; right:-3px; bottom:-3px; width:7px; height:7px;
  background:var(--to-merk); border:1px solid var(--to-vlak); cursor:crosshair; z-index:3;
  user-select:none; -webkit-user-select:none; }
.xl-wrap.xl-vullen td{ cursor:crosshair; }
.xl-grid td.xl-vulzone{ box-shadow:inset 0 0 0 1px #93b4dd; }
/* Zolang je sleept mag de browser geen tekst meeselecteren. */
.xl-wrap.xl-slepen td, .xl-wrap.xl-slepen th{ user-select:none; -webkit-user-select:none; }
/* ---- Onderbalk, zoals Word en Excel er een hebben ----
   De telling van de selectie stond er al; wat ontbrak was de zoomschuif, en in
   Word de pagina-aanduiding. De woordenteller stond tussen de knoppen in plaats
   van op een statusregel. */
.ot-onderbalk{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border-top:1px solid var(--to-lijn); padding:5px 8px; font-size:.78rem; color:var(--to-gedempt);
  font-variant-numeric:tabular-nums; }
.ot-ob-vak:empty{ display:none; }
.ot-ob-zoom{ display:flex; align-items:center; gap:5px; margin-left:auto; }
.ot-ob-zoom input[type="range"]{ width:104px; accent-color:var(--to-merk); }
.ot-ob-knop{ border:1px solid var(--to-lijn); background:var(--to-vlak); color:var(--to-tekst); border-radius:6px;
  font:inherit; line-height:1; width:22px; height:22px; cursor:pointer; padding:0; }
.ot-ob-knop:hover{ background:var(--to-vlak-2); border-color:#cddff5; }
.ot-ob-pct{ border:0; background:none; color:var(--to-gedempt); font:inherit; font-size:.78rem;
  cursor:pointer; min-width:42px; text-align:right; padding:0 2px; }
.ot-ob-pct:hover{ color:var(--to-merk); text-decoration:underline; }
@media (max-width:640px){ .ot-ob-zoom input[type="range"]{ width:70px; } }
/* In de bladbalk duwt .xl-agg al naar rechts; zou de zoom dat óók doen, dan
   valt de vrije ruimte tussen die twee en staan ze los van elkaar. */
.xl-bladbalk .ot-ob-zoom{ margin-left:0; }
.xl-agg{ margin-left:auto; font-size:.78rem; color:var(--to-gedempt); font-variant-numeric:tabular-nums;
  white-space:nowrap; align-self:center; padding:0 4px; }

/* ===== Word-pagina ===== */
.wd-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.wd-toolbar .sep{ width:1px; height:22px; background:var(--to-lijn); }
.wd-tbtn{ border:1px solid var(--to-lijn-2); background:var(--to-vlak); color:var(--to-tekst); border-radius:8px; width:34px; height:34px; font-size:.9rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; padding:0; }
.wd-tbtn:hover{ border-color:var(--to-merk); }
/* Kleurkiezers: het native input zit onzichtbaar over de knop, met een streep
   in de gekozen kleur eronder — anders zie je niet wat er ingesteld staat. */
/* Kleurknoppen zoals in Word: de KNOP past de kleur toe die eronder staat, en
   alleen het pijltje ernaast opent de kiezer. De kiezer lag hiervoor óver de
   hele knop, dus je kreeg eerst een kleurenvenster te zien vóór er iets
   gebeurde — en drie stukken tekst dezelfde kleur geven kostte drie keer dat
   venster (gebruikersmelding 09-08-2026). De letter blijft zwart, net als in
   Word; alleen het streepje eronder draagt de kleur. */
.rb-kleurpaar{ display:inline-flex; align-items:stretch; }
.rb-kleurpaar .wd-kleur{ border-top-right-radius:0; border-bottom-right-radius:0;
  min-width:26px; padding-left:.35rem; padding-right:.35rem; }
.rb-kleurpaar .wd-caret{ border-top-left-radius:0; border-bottom-left-radius:0;
  min-width:15px; padding-left:.1rem; padding-right:.1rem; }
.rb-kleurpaar:hover .wd-kleur, .rb-kleurpaar:hover .wd-caret{ background:var(--to-vlak-2); border-color:#cddff5; }
.wd-kleur{ position:relative; font-weight:700; }
.wd-kleur::after{ content:""; position:absolute; left:5px; right:5px; bottom:4px; height:3px; border-radius:2px; background:var(--wd-staal,#c00000); }
.wd-caret{ position:relative; overflow:hidden; }
.wd-caret input[type="color"]{ position:absolute; inset:0; opacity:0; cursor:pointer; border:0; padding:0; width:100%; height:100%; }
.wd-caret svg{ width:10px; height:10px; }
.wd-markeer{ font-size:.7rem; }
/* Groter/kleiner: een A met een pijltje, zoals de twee knoppen in Word. */
.wd-aa{ font-weight:600; gap:1px; padding-left:.34rem; padding-right:.28rem; }
.wd-aa svg{ width:11px; height:11px; }
.wd-pagewrap{ background:var(--to-lijn); border:1px solid var(--to-lijn); border-radius:12px; padding:22px 10px; max-height:66vh; overflow:auto; position:relative; }
/* ---- afbeelding aanwijzen en verschalen ----
   Een ingevoegde foto stond vast op de maat die hij bij het invoegen kreeg.
   De greep hangt in de PAGEWRAP en niet in de pagina zelf: alles wat los onder
   #wdPage staat, wordt door normalizePage tot alinea gepromoveerd en zou zo in
   het document belanden. */
.wd-page img.wd-img-sel{ outline:2px solid var(--to-merk); outline-offset:1px; }
.wd-imghandle{ position:absolute; width:14px; height:14px; border-radius:3px;
  background:var(--to-merk); border:2px solid var(--to-vlak); box-shadow:0 1px 4px rgba(15,23,42,.4);
  cursor:nwse-resize; display:none; z-index:5; }
.wd-imghandle.aan{ display:block; }
.wd-imgmaat{ position:absolute; z-index:5; background:var(--to-tekst); color:var(--to-vlak);
  font-size:.7rem; padding:2px 6px; border-radius:5px; pointer-events:none; display:none; }
.wd-imgmaat.aan{ display:block; }
.wd-page{ background:var(--to-vlak); max-width:820px; margin:0 auto; min-height:420px; padding:60px 68px; box-shadow:0 6px 24px -10px rgba(15,23,42,.25); line-height:1.6; color:#111827; font-family:Calibri,'Inter Tight',system-ui,sans-serif; font-size:.95rem; outline:none;
  /* ---- paginagrenzen ----
     Het was één lang vel; je zag nergens waar Word een blad afbreekt (melding
     eigenaar, 09-08-2026). Deze streep staat op elke paginahoogte, gerekend uit
     de pgSz en pgMar van het document zelf.
     Het is een AANWIJZING, geen opmaak: deze editor heeft geen paginamotor, dus
     Word kan een regel nog verschuiven. Vandaar een streepje en geen harde
     bladrand die zekerheid suggereert die er niet is. */
  background-image:linear-gradient(to bottom, transparent calc(100% - 1px), var(--to-lijn-2) calc(100% - 1px));
  background-size:100% var(--wd-paginah, 100000px);
  background-repeat:repeat-y;
  background-position:0 var(--wd-paginatop, 0);
  background-origin:border-box; background-clip:border-box; }
.wd-page .wd-p{ margin:0 0 .55em; min-height:1.2em; }
.wd-page .wd-h1{ font-size:1.55em; font-weight:700; color:#1f2937; margin:.9em 0 .45em; }
.wd-page .wd-h2{ font-size:1.28em; font-weight:700; color:#1f2937; margin:.8em 0 .4em; }
.wd-page .wd-h3{ font-size:1.12em; font-weight:700; color:#1f2937; margin:.7em 0 .35em; }
.wd-page img{ max-width:100%; height:auto; }
.wd-page .wd-tbl{ margin:.6em 0; border:1px dashed var(--to-lijn-2); border-radius:6px; padding:6px; background:#f8fafc; }
.wd-page .wd-tbl table{ border-collapse:collapse; width:100%; font-size:.9em; }
.wd-page .wd-tbl td{ border:1px solid var(--to-lijn); padding:3px 7px; }
.wd-page .wd-tbl .wd-tbl-note{ font-size:.72rem; color:var(--to-gedempt-2); margin-top:4px; }
/* ---- bewerkbare tabel ----
   Ziet eruit als een tabel in Word: dunne randen, cellen waar je gewoon in
   typt. De rand is bewust grijzer dan die in het document zelf; wat er echt
   uit komt, bepaalt de tblBorders van het bestand. */
.wd-page .wd-tbl-edit{ border-collapse:collapse; width:100%; margin:.7em 0; font-size:1em; }
.wd-page .wd-tbl-edit td{ border:1px solid #b8c2cf; padding:4px 7px; vertical-align:top;
  min-width:2.4em; }
.wd-page .wd-tbl-edit td:focus-within{ outline:2px solid var(--to-merk); outline-offset:-2px; }
.wd-page .wd-tbl-edit .wd-tp{ margin:0; min-height:1.2em; white-space:pre-wrap; }
/* Tabs uit het document zichtbaar houden (w:tab rendert als \t) */
.wd-page .wd-p{ white-space:pre-wrap; }
/* Hyperlink-run: opaak bewaard (bewerken zou de koppeling slopen) */
.wd-page .wd-link{ color:#1d4ed8; text-decoration:underline; }
/* ---- opsommingen en nummering ----
   Het teken komt van CSS, niet uit de tekst: in het BESTAND staat een w:numPr
   en laat Word er zijn eigen bolletje of nummer voor zetten. Zou het teken in
   de tekst staan, dan had je in Word een alinea die toevallig met een bolletje
   begint — geen lijst.
   De teller wordt door elke gewone alinea teruggezet, zodat een tweede lijst
   verderop weer bij 1 begint. */
.wd-page .wd-p:not(.wd-li){ counter-reset:wdol 0; }
.wd-page .wd-li{ position:relative; padding-left:2.1em; }
.wd-page .wd-li::before{ position:absolute; left:.55em; color:inherit; }
.wd-page .wd-li[data-lijst="ul"]::before{ content:"\2022"; }
.wd-page .wd-li[data-lijst="ol"]{ counter-increment:wdol; }
.wd-page .wd-li[data-lijst="ol"]::before{ content:counter(wdol) "."; left:.3em; }
/* Alinea met velden/bookmarks/tracked changes: vergrendeld, gaat 1-op-1 terug */
.wd-page .wd-locked{ background:#f8fafc; border-left:3px solid var(--to-lijn-2); padding-left:8px; cursor:not-allowed; }
@media print{
  /* display:none op een voorouder is met display:revert op een kind niet terug
     te draaien (subtree genereert geen boxen). visibility kán dat wel.
     :has-scope: alléén wanneer de Word-editor daadwerkelijk open staat — anders
     printte Ctrl+P op de hub en de Excel-tool een volledig blanco vel. Browsers
     zonder :has printen gewoon de hele pagina (nette degradatie). */
  body:has(#wdEditor:not(.pt-hidden)) *{ visibility:hidden; }
  body:has(#wdEditor:not(.pt-hidden)) .wd-printhost,
  body:has(#wdEditor:not(.pt-hidden)) .wd-printhost *{ visibility:visible; }
  body:has(#wdEditor:not(.pt-hidden)) .wd-printhost{ position:absolute; left:0; top:0; width:100%; }
  .wd-pagewrap{ max-height:none; overflow:visible; background:var(--to-vlak); border:none; padding:0; }
  /* De zoom uit het Weergave-tabblad staat inline op #wdPage en zou anders
     meegaan naar het papier: op 150% valt de rechtermarge van het vel af. */
  #wdPage{ zoom:1 !important; }
  .wd-page{ box-shadow:none; padding:0; max-width:none; }
  /* Hetzelfde voor de Excel-tool: alleen het raster op papier, zonder lint,
     zonder bladtabs en zonder de kaart eromheen. */
  body:has(#xlEditor:not(.pt-hidden)) *{ visibility:hidden; }
  body:has(#xlEditor:not(.pt-hidden)) .xl-wrap,
  body:has(#xlEditor:not(.pt-hidden)) .xl-wrap *{ visibility:visible; }
  body:has(#xlEditor:not(.pt-hidden)) .xl-wrap{ position:absolute; left:0; top:0; width:100%;
    max-height:none; overflow:visible; border:0; }
  .xl-grid td, .xl-grid th{ max-width:none; }
  .xl-grid td.xl-sel, .xl-grid th.xl-kopsel{ background:var(--to-vlak); }
}