/* ============================================================================
   Sales-portal — simac PHI DATA
   Structuur van de canonieke app-schil (uzgent-tracking/huisstijl/), maar in
   Simac's EIGEN kleuren en niet in de co-brand met Blyott.

   Wat er anders is dan de gedeelde schil, en waarom:
     - de signatuurband was blauw→paars→rood, de arc van Blyott náár Simac.
       Hier is het Simac-navy → Simac-rood: hun eigen boog.
     - het accent was Blyott-blauw #0096ff. Hier is het Simac-rood #cc142f —
       dat is de kleur die in het logo staat en waar het merk op leest.
     - de donkere schil was #181927 (Blyott-navy). Hier Simac-navy #00005B.

   Tokens komen uit blyott-website/CLAUDE-DESIGN.md, uit de regels die daar
   uitdrukkelijk gemarkeerd staan als "alleen Simac-context".

   De schil blijft in BEIDE weergaven donker — dat is de merkband. Alleen het
   werkvlak eronder flipt.
   ============================================================================ */

:root{
  --navy:#00005B;          /* Simac-navy */
  --navy-deep:#000038;     /* dieper, voor kop- en voetbalk */
  --rood:#cc142f;          /* Simac-rood — het accent */
  --rood-zacht:#ff6b7f;    /* rood op donkere vlakken */
  --grijs:#72808A;         /* Simac-grijs, PMS 430 */
  --green:#3eb388;
  --orange:#f99b1c;
  --sig:linear-gradient(100deg,#00005B 0%,#5A0A44 52%,#CC142F 100%);
  --wash:linear-gradient(112deg,rgba(0,0,91,.62),rgba(0,0,56,.46) 40%,
         rgba(90,10,68,.34) 66%,rgba(204,20,47,.34));
  --r:14px;
  --r-sm:9px;
}

/* werkvlak — licht is de basis, donker wint via het attribuut.
   color-scheme staat er expliciet bij: zonder dat tekent de browser een
   uitgeklapte <select> in het SYSTEEMthema, dus witte opties onder een
   donkere knop. */
:root, :root[data-theme=light]{
  color-scheme:light;
  --text:#1b2230; --muted:#5f6b75; --light:#72808A;
  --surface:#f5f6f8; --surface2:#eceef2; --line:#e7e9ee; --line2:#e3e7ee;
  --panel:#fff; --bg:#fff;
  --accent:#cc142f; --accent-ink:#cc142f;
  --chip-goed:#E8F7EF; --chip-slecht:#FDECEF;
}
/* Geen donkere variant: cijfers lezen beter op licht, en een schakelaar is een
   keuze die niemand hier hoeft te maken. De kop- en voetbalk zijn wél donker —
   dat is de merkband van Simac, geen thema. */

*{box-sizing:border-box}
/* Het hidden-attribuut moet altijd winnen. `.login{display:grid}` heeft dezelfde
   specificiteit als de browserregel `[hidden]{display:none}` en staat later in
   de cascade, waardoor de aanmeldkaart zichtbaar bleef tijdens een sessie. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:"Proxima Nova","Proxima Nova Rg",-apple-system,BlinkMacSystemFont,
    "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.5; color:var(--text); background:var(--bg);
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* ---------- kopbalk ---------- */
.hd{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden;
  padding:calc(14px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right))
          14px calc(22px + env(safe-area-inset-left));
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;z-index:5}
.hd .wash{position:absolute;inset:0;background:var(--wash);opacity:.55;pointer-events:none}
.hd .glow{position:absolute;width:340px;height:340px;border-radius:50%;pointer-events:none;
  filter:blur(38px);opacity:.5}
.hd .glow.b{left:-90px;top:-190px;background:radial-gradient(circle,#1b1e8f,transparent 68%)}
.hd .glow.r{right:-70px;bottom:-230px;background:radial-gradient(circle,#cc142f,transparent 68%)}
.hd > *{position:relative}

.lock{display:flex;align-items:center;gap:14px;min-width:0}
.lock img{height:26px;width:auto;display:block}
.lock .bar{width:1px;height:26px;background:rgba(255,255,255,.32);flex:none}
.lock .naam{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.82);white-space:nowrap}

.ctx{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.75);min-width:0}

.stats{display:flex;gap:26px;margin-left:auto}
.stat b{font-size:26px;font-weight:800;display:block;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.stat span{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.78);letter-spacing:.1em;
  text-transform:uppercase;margin-top:3px;display:block}
.stat.on b{color:var(--rood-zacht)}

.thema{display:flex;background:rgba(255,255,255,.1);border-radius:var(--r-sm);padding:3px;
  gap:2px;margin-left:20px;flex:none}
.thema button{border:0;background:transparent;color:rgba(255,255,255,.62);width:34px;height:30px;
  border-radius:6px;cursor:pointer;display:grid;place-items:center;padding:0}
.thema button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.thema button[aria-pressed=true]{background:#fff;color:var(--navy-deep)}
.thema button:focus-visible{outline:2px solid var(--rood-zacht);outline-offset:2px}

/* knoppen in de kopbalk — zelfde vorm als de weergaveschakelaar ernaast */
.hdknoppen{display:flex;gap:8px;align-items:center;margin-left:14px;flex:none}
.hdknoppen a,.hdknoppen button{display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.86);border:0;border-radius:var(--r-sm);
  padding:7px 13px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;text-decoration:none}
.hdknoppen a:hover,.hdknoppen button:hover{background:rgba(255,255,255,.18)}
.hdknoppen a:focus-visible,.hdknoppen button:focus-visible{outline:2px solid var(--rood-zacht);outline-offset:2px}

.sig{height:4px;background:var(--sig);flex:none}

/* ---------- werkvlak ---------- */
main{flex:1;width:100%;max-width:92rem;margin:0 auto;padding:26px 22px 40px}

.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.tab{background:none;border:0;font:inherit;padding:0 0 10px;font-size:14px;font-weight:800;
  letter-spacing:-.01em;color:var(--muted);border-bottom:3px solid transparent;
  margin-bottom:-1px;cursor:pointer}
.tab[aria-selected=true]{color:var(--text);border-color:var(--accent)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Geen kotjes: zachte vlakken en hairlines in plaats van overal een kader. */
.kaart{background:var(--panel);border-radius:var(--r);padding:22px 24px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 0 0 1px var(--line)}
.kaart + .kaart{margin-top:18px}

.kop{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.kop h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em}
.kop .sub{font-size:12.5px;color:var(--muted)}

/* de drie kerncijfers */
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.cijfer{min-width:0}
.cijfer .lbl{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:6px}
.cijfer .val{font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;display:block}
.cijfer .bij{font-size:12px;color:var(--muted);margin-top:4px;display:block}

/* voortgangsbalk met het pro-rata streepje */
/* Ruimte boven de balk voor het "op schema"-label; zonder die marge botst het
   met de bijschriften onder de cijfers. */
.balk{position:relative;height:14px;border-radius:999px;background:var(--surface2);
  overflow:visible;margin:30px 0 8px}
.balk .vul{position:absolute;inset:0 auto 0 0;border-radius:999px;
  background:linear-gradient(90deg,#00005B,#3a3fb0);transition:width .5s ease}
.balk .vul.achter{background:linear-gradient(90deg,#8a1020,#cc142f)}
.balk .vul.voor{background:linear-gradient(90deg,#1f7a5c,#3eb388)}
/* het streepje "waar zou ik moeten staan" */
.balk .merk{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--text);
  opacity:.55;border-radius:1px}
.balk .merk::after{content:attr(data-label);position:absolute;top:-19px;left:50%;
  transform:translateX(-50%);font-size:10px;font-weight:700;letter-spacing:.06em;
  color:var(--muted);white-space:nowrap}

.balkvoet{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;
  color:var(--muted);flex-wrap:wrap}
.balkvoet b{color:var(--text);font-variant-numeric:tabular-nums}

.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 11px;
  font-size:12px;font-weight:700}
.chip.goed{background:var(--chip-goed);color:var(--green)}
.chip.slecht{background:var(--chip-slecht);color:var(--rood)}
.chip.rustig{background:var(--surface2);color:var(--muted)}
/* een marge boven 100% of onder 0 is geen prestatie maar een datafout */
.verdacht{color:var(--orange);font-weight:700}

/* voorbehoud bij de marge — geen alarm, wel zichtbaar */
.voorbehoud{margin-top:14px;padding:11px 14px;border-radius:var(--r-sm);
  background:var(--surface);font-size:12.5px;color:var(--muted);line-height:1.45}
.voorbehoud b{color:var(--text);font-weight:700}

/* tabel */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:0 12px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
/* Zonder een minimum plakken de koppen op een telefoon aan elkaar tot
   "MARGETARGETBEHAALDAANDEEL". De kaart scrollt, de pagina niet. */
th.num,td.num{padding-left:14px}
th+th,td+td{padding-left:14px}
td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;padding-right:0}
.mini{height:6px;border-radius:999px;background:var(--surface2);overflow:hidden;min-width:70px}
.mini i{display:block;height:100%;border-radius:999px;background:var(--accent)}

.leeg{padding:30px 0;text-align:center;color:var(--muted);font-size:13.5px}

/* login */
.login{flex:1;display:grid;place-items:center;padding:30px 22px}
.login .kaart{width:100%;max-width:26rem}
.login h1{margin:0 0 6px;font-size:20px;font-weight:800;letter-spacing:-.01em}
.login p{margin:0 0 20px;color:var(--muted);font-size:13.5px}
label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
input[type=email],input[type=text],input[type=number],select{
  width:100%;padding:10px 13px;border-radius:var(--r-sm);border:1px solid var(--line2);
  background:var(--panel);color:var(--text);font:inherit;font-size:14.5px}
input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px;
  border-color:transparent}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:16px;padding:11px 18px;border:0;border-radius:var(--r-sm);
  background:var(--accent);color:#fff;font:inherit;font-size:14.5px;font-weight:800;cursor:pointer}
.knop:hover{filter:brightness(1.06)}
.knop.rustig{background:var(--surface2);color:var(--text);width:auto;margin-top:0}
.knop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Aanmelden met Microsoft. Wit met een rand, zoals Microsoft zelf voorschrijft
   en zoals iedereen die knop kent — niet in ons accentblauw, want dan leest hij
   als de hoofdknop terwijl de mailcode dat is zolang beide bestaan. */
.knop.ms{background:#fff;color:#1b2230;border:1px solid var(--line);
  text-decoration:none;margin-top:0}
.knop.ms:hover{filter:none;background:var(--surface2)}
/* Modules van het dashboard. De actieve krijgt een accentrandje links; de rest
   blijft rustig, want "coming soon" mag niet even hard roepen als wat er is. */
.modules{display:grid;gap:10px}
.module{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface2)}
.module.aan{background:var(--surface);border-left:3px solid var(--accent)}
.module .mtop{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.module .mtop b{font-size:14.5px}
.module .sub{font-size:12.5px;color:var(--muted);line-height:1.5}
/* `.chip.rustig` heeft dezelfde achtergrond als de kaart van een module die
   nog niet live is — dan is het chipje onzichtbaar. Hier dus een eigen vlak. */
.module .chip.rustig{background:var(--surface);border:1px solid var(--line)}
.ofwel{display:flex;align-items:center;gap:10px;margin:16px 0 2px;
  color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.ofwel::before,.ofwel::after{content:"";flex:1;height:1px;background:var(--line)}
.melding{margin-top:14px;font-size:13px;padding:10px 13px;border-radius:var(--r-sm)}
.melding.ok{background:var(--chip-goed);color:var(--green)}
.melding.fout{background:var(--chip-slecht);color:var(--rood)}

/* ---------- voetbalk ---------- */
.ft{background:var(--navy-deep);color:rgba(255,255,255,.72);padding:9px 22px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ft .rule{width:46px;height:1px;background:rgba(255,255,255,.3)}
.ft b{font-size:10px;font-weight:800;letter-spacing:.2em;color:rgba(255,255,255,.82);min-width:0}
.ft .stand{margin-left:auto;font-size:10px;color:rgba(255,255,255,.45);letter-spacing:.1em;
  font-variant-numeric:tabular-nums}

/* ---------- telefoon ---------- */
@media (max-width:760px){
  .hd{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:10px;
    padding:10px 14px}
  .lock{grid-area:1/1;align-self:center}
  .lock img{height:21px}
  .lock .bar{height:21px}
  .lock .naam{font-size:11.5px}
  .thema{grid-area:1/2;margin-left:0}
  .hdknoppen{grid-area:4/1/auto/-1;margin-left:0}
  .hdknoppen a,.hdknoppen button{font-size:12px;padding:6px 11px}
  .ctx{grid-area:2/1;align-self:center;font-size:10px;letter-spacing:.13em}
  .stats{grid-area:3/1/auto/-1;margin-left:0;gap:20px}
  .stat b{font-size:21px}
  main{padding:18px 14px 32px}
  .kaart{padding:18px 16px}
  .cijfer .val{font-size:21px}
  table{font-size:13.5px}
  .kaart{overflow-x:auto}
  /* Op 390px passen zes kolommen niet. Het staafje is sfeer, geen informatie —
     dat gaat als eerste weg; de cijfers blijven. */
  table .weg-op-mobiel{display:none}
  .chip{font-size:11px;padding:2px 8px}
  .kop{gap:10px}
  .kop > span[style*="margin-left:auto"]{margin-left:0 !important;width:100%}
}

/* ---------- eigen keuzelijst ----------
   De native <select>-popup wordt door het besturingssysteem getekend en is niet
   te stylen — vandaar deze. De echte select blijft eronder staan als bron van
   waarheid, alleen onzichtbaar. Zie keuzelijst.js. */
.kies{position:relative;display:inline-block}
.kies-echt{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;
  margin:0;padding:0;border:0}
.kies-knop{display:inline-flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px 9px 14px;border-radius:var(--r-sm);border:1px solid var(--line2);
  background:var(--panel);color:var(--text);font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;text-align:left;line-height:1.3}
.kies-knop:hover{border-color:var(--accent)}
.kies-knop:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.kies-knop svg{width:15px;height:15px;margin-left:auto;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transition:transform .15s}
.kies-knop[aria-expanded=true] svg{transform:rotate(180deg);opacity:.9}
.kies-tekst{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.kies-lijst{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:100%;
  max-height:250px;overflow-y:auto;padding:5px;border-radius:var(--r-sm);
  background:var(--panel);border:1px solid var(--line2);
  box-shadow:0 12px 28px rgba(0,0,20,.16),0 2px 6px rgba(0,0,20,.10)}
.kies-lijst.omhoog{top:auto;bottom:calc(100% + 6px)}
.kies-optie{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;
  font-size:14px;cursor:pointer;white-space:nowrap;color:var(--text)}
.kies-optie span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.kies-optie:hover,.kies-optie.aan{background:var(--surface2)}
.kies-optie[aria-selected=true]{font-weight:700;color:var(--accent-ink)}
.kies-vink{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.kies-optie[aria-selected=true] .kies-vink{opacity:1}

/* Getalvelden zonder de browser-pijltjes: bij een targetraster staan er
   tientallen naast elkaar en dan is dat alleen maar ruis. */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input.bedrag,input.maand{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* aanklikbare rij in het teamoverzicht */
tr.klik{cursor:pointer;transition:background .1s}
tr.klik:hover td{background:var(--surface)}

/* uitklapbare rij in het teamoverzicht */
tr.klik{cursor:pointer;transition:background .1s}
tr.klik:hover td{background:var(--surface)}
tr.klik.open td{background:var(--surface)}
tr.klik .pijl{display:inline-block;width:12px;color:var(--muted);font-size:11px}
tr.detail td{background:var(--surface);border-bottom:1px solid var(--line)}

/* uitklapbare rij in het teamoverzicht */
tr.klik{cursor:pointer;transition:background .1s}
tr.klik:hover td{background:var(--surface)}
tr.klik.open td{background:var(--surface)}
tr.klik .pijl{display:inline-block;width:13px;color:var(--muted);font-size:11px}
tr.detail td{background:var(--surface)}
tr.detail table td{border-bottom:1px solid var(--line2);padding:7px 12px 7px 0;font-size:13.5px}
.detailkop{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
@media (max-width:760px){ tr.detail > td > div{grid-template-columns:minmax(0,1fr) !important} }

/* de uitleg onder de cijfers — rustig, niet als waarschuwing */
.uitlegkaart #uitleg p{margin:0 0 11px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.uitlegkaart #uitleg p:last-child{margin-bottom:0}
.uitlegkaart #uitleg b{color:var(--text);font-weight:700}

/* factuurregel aanklikbaar binnen een uitgeklapte verkoper */
tr.klikfac{cursor:pointer}
tr.klikfac:hover td{background:var(--surface2)}
tr.facdetail td{background:var(--surface2);border-bottom:1px solid var(--line2)}

/* voorbij het target: een eigen segment dat rechts uitsteekt */
.balk .vul.vol{background:linear-gradient(90deg,#1f7a5c,#3eb388)}
.balk .over{position:absolute;top:0;bottom:0;border-radius:0 999px 999px 0;
  background:repeating-linear-gradient(135deg,#3eb388,#3eb388 5px,#2f9a75 5px,#2f9a75 10px)}

/* de teambalk boven de tabel */
.teambalk{margin:4px 0 22px}
.teambalk .balk{margin:26px 0 8px}

/* zelf een periode kiezen */
.vrijperiode{display:flex;align-items:center;gap:10px;margin:-8px 0 20px;flex-wrap:wrap}
.vrijperiode label{margin:0;font-size:10.5px}
.vrijperiode input[type=date]{width:auto;padding:11px 12px;min-height:44px}
.vrijperiode .knop{margin-top:0;width:auto}

/* de balk naast "Behaald": vol tot het target, daarna een tweede segment */
.mini i.gehaald{background:var(--green)}
.mini u{position:absolute;top:0;bottom:0;left:100%;border-radius:0 999px 999px 0;
  background:repeating-linear-gradient(135deg,#3eb388,#3eb388 4px,#2f9a75 4px,#2f9a75 8px)}
.mini{overflow:visible}

/* ============================================================================
   PWA — navigatie onderaan
   Op een telefoon staat de duim onderaan, niet bovenaan. De balk moet boven de
   home-indicator blijven: vandaar de safe-area-inset, en `100dvh` op body zodat
   de systeembalken niet meegerekend worden (100vh doet dat wel, en dan valt de
   onderste knop buiten beeld).
   ============================================================================ */
.tabbalk{position:sticky;bottom:0;z-index:40;display:flex;margin-top:auto;
  background:var(--navy-deep);border-top:1px solid rgba(255,255,255,.1);
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.tabbalk button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:0;color:rgba(255,255,255,.55);font:inherit;font-size:10.5px;
  font-weight:700;letter-spacing:.04em;padding:10px 4px 9px;cursor:pointer}
.tabbalk button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tabbalk button[aria-current=page]{color:#fff}
.tabbalk button[aria-current=page] svg{stroke-width:2}
.tabbalk button[aria-current=page]::before{content:"";position:absolute;top:0;
  left:50%;transform:translateX(-50%);width:34px;height:3px;
  border-radius:0 0 3px 3px;background:var(--rood-zacht)}
.tabbalk button{position:relative}
.tabbalk button:focus-visible{outline:2px solid var(--rood-zacht);outline-offset:-3px}

/* zoekveld boven de teamlijst */
.zoek{width:100%;margin:0 0 16px;padding:11px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line2);background:var(--panel);color:var(--text);
  font:inherit;font-size:15px}
.zoek:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}

/* menu onder "Meer" */
.menu{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:var(--r-sm);
  overflow:hidden}
.menuknop{width:100%;text-align:left;background:var(--panel);border:0;font:inherit;font-size:15px;
  font-weight:600;color:var(--text);padding:15px 16px;cursor:pointer}
.menuknop:hover{background:var(--surface)}
.menuknop:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.uitleg p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.uitleg p:last-child{margin-bottom:0}
.uitleg b{color:var(--text);font-weight:700}

.detailraster{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:26px;padding:6px 0 14px}
.maandraster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.maandraster label{display:block}
.maandraster span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.maandraster input{margin-top:3px}

@media (max-width:760px){
  main{padding-bottom:8px}
  .detailraster{grid-template-columns:minmax(0,1fr);gap:16px}
  .maandraster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tabs{gap:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap}
}

/* ── de splitsing onder een dealslijst ───────────────────────────────────── */
.deelsom { margin-top: 12px; border-top: 1px solid var(--lijn); padding-top: 10px; }
.deelrij { display: grid; grid-template-columns: 1fr auto; align-items: baseline;
           gap: 2px 12px; padding: 4px 0; }
.deelrij b { font-variant-numeric: tabular-nums; }
.deelrij .sub { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.deelnoot { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.chip.zacht { background: #eef1f4; color: var(--navy); }
.chip.grijs { background: #f3f4f5; color: var(--muted); }
tr.geenklik { cursor: default; }
.blok { margin-top: 4px; }
.blok + .blok { margin-top: 18px; }
.blokkop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
           font-weight: 600; color: var(--navy); padding: 6px 0 2px; }
.blokkop span { font-weight: 400; font-size: 12px; color: var(--muted); }
.deelin { margin: 2px 0 8px; padding-left: 12px; border-left: 2px solid var(--lijn); }
.deelin .deelrij b { font-weight: 500; }


/* ============================================================================
   PWA — de scherpe randjes
   Aanleiding: een screenshot uit de geïnstalleerde app. De naam liep dwars door
   de klok van de telefoon, "Zelf kiezen" viel van het scherm, en de voettekst
   stond ónder de navigatiebalk.
   ============================================================================ */

/* Geen grijze flits bij het aantikken, en de app veert niet mee als een pagina. */
* { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: contain; }

/* De periodekiezer is breder dan een telefoon. Hij schuift al, maar dat was niet
   te zien: nu loopt de laatste tab zichtbaar weg onder een vervaging. */
.tabs { position: relative; }
@media (max-width: 720px) {
  .tabsrand { position: relative; }
  .tabsrand::after {
    content: ""; position: absolute; right: 0; top: 0; bottom: 10px; width: 34px;
    background: linear-gradient(to right, transparent, var(--bg) 78%);
    pointer-events: none;
  }
  .tabs { scroll-snap-type: x proximity; padding-right: 26px; }
  .tab { scroll-snap-align: start; }
}

/* Aanraken moet voelbaar zijn zonder animatie die vertraagt. */
.tabbalk button { transition: color .12s ease; }
.tabbalk button:active { color: #fff; }
.knop:active, .menuknop:active, tr.klik:active { opacity: .72; }

/* De voettekst staat nu in de inhoud en niet meer onder de navigatie; in de
   geïnstalleerde app is hij daar overbodig, want het logo staat al bovenaan.
   Wat blijft staan is de enige regel die telt: hoe vers de cijfers zijn. */


/* Tikdoelen: alles wat een vinger raakt haalt 44px. */
.tabbalk button { min-height: 52px; }
.tab { min-height: 44px; padding-left: 8px; padding-right: 8px; }
.knop { min-height: 44px; }
.tabs { gap: 10px; }


/* De periodekiezer heeft twee sets labels: voluit waar het past, kort op een
   telefoon. Zo hoeft niemand te ontdekken dat een balk zijwaarts schuift. */
.tab .kort { display: none; }
@media (max-width: 560px) {
  .tab .vol { display: none; }
  .tab .kort { display: inline; }
  .tabs { gap: 20px; }
  .tabsrand::after { display: none; }
}

/* Onderaan stonden twee donkere balken op elkaar: de signatuur en daaronder de
   navigatie. In de geïnstalleerde app blijft alleen de navigatie donker; de
   datum van de laatste synchronisatie wordt gewone, rustige tekst in de pagina. */
html.app .ft { background: transparent; padding: 12px 22px 16px; }
html.app .ft b, html.app .ft .rule { display: none; }
html.app .ft .stand { color: var(--muted); margin-left: 0; }
html.app .sig { display: none; }

/* Zonder cijfers is de kopbalk een leeg blauw vlak van tweehonderd pixels.
   Dan mag hij inklappen tot het logo en de naam. */
html.kop-leeg .hd { padding-bottom: 10px; }


/* ── het strookje achter de klok van de telefoon ──────────────────────────── */
.statusveilig { display: none; }
html.app .statusveilig {
  display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 4;
  height: env(safe-area-inset-top); background: var(--navy-deep);
}

/* ── de kopbalk blijft staan ──────────────────────────────────────────────
   Hij scrolde weg en verdween onder de strook achter de klok: dan zie je in
   de app nergens meer waar je bent. Nu blijft hij plakken, en daarom moet hij
   klein: alleen het logo en bij wie je kijkt. De cijfers die erin stonden zijn
   geen verlies, want ze staan een centimeter lager in de kaart nog eens.       */
html.app .hd {
  display: flex !important; position: sticky; top: 0; z-index: 30;
  padding-top: calc(9px + env(safe-area-inset-top)); padding-bottom: 9px;
  flex-wrap: nowrap; gap: 12px; align-items: center;
}
html.app .hd .stats { display: none; }
html.app .hd .lock img { height: 19px; }
html.app .hd .ctx {
  margin: 0 0 0 auto; font-size: 10.5px; letter-spacing: .12em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%;
}
html.app .hd .hdknoppen { margin-left: 0; }
html.app .sig { display: none; }

table th .kort { display: none; }

/* ── teamtabel op een telefoon ────────────────────────────────────────────── */
.pctmobiel { display: none; }
table td.num, table th.num { white-space: nowrap; width: 1%; }
.naamcel .wie { display: inline; }

@media (max-width: 560px) {
  /* Vier kolommen passen niet; het percentage verhuist onder de naam en de
     kolomkoppen worden korter. Zo blijft Binnengehaald zichtbaar — dat is het
     cijfer waar het om draait. */
  .pctkolom { display: none; }
  .naamcel { line-height: 1.3; }
  .naamcel .wie { font-size: 14px; }
  .pctmobiel { display: block; font-size: 11.5px; color: var(--muted);
               letter-spacing: .02em; margin-top: 1px; }
  table td.num, table th.num { font-size: 13.5px; padding-left: 8px; }
  table th .vol { display: none; }
  table th .kort { display: inline !important; }
}

/* De voortgangsbalk plakte tegen de kolomkoppen. */
.balkblok, .kaart > table { margin-top: 4px; }
.kaart .balk, .kaart .balkuitleg { margin-bottom: 0; }
.kaart > table { margin-top: 14px; }

/* Bij een lange naam ("Sophie Emmanuel Eeman") brak de tekst af en bleef het
   pijltje alleen op de eerste regel achter. Een raster houdt het pijltje naast
   de naam en het percentage eronder, hoe lang de naam ook is. */
.naamcel { display: grid; grid-template-columns: 14px minmax(0, 1fr);
           column-gap: 6px; align-items: start; }
.naamcel .pijl { grid-column: 1; grid-row: 1; line-height: 1.45; }
.naamcel .wie { grid-column: 2; grid-row: 1; }
.naamcel .pctmobiel { grid-column: 2; grid-row: 2; }


/* iOS zoomt automatisch in zodra je een veld onder 16px aantikt. Dat verspringt
   het hele scherm zijwaarts, en een testbrowser laat dat nooit zien. */
input[type=email], input[type=text], input[type=number], input[type=date], select {
  font-size: 16px;
}

/* In de app staat het logo al in de kopbalk; het woordmerk ernaast duwde de
   naam van de bekeken verkoper eroverheen ("SALEHS ANS VANBELLINGEN"). */
html.app .hd .lock .bar, html.app .hd .lock .naam { display: none; }

/* Afmelden hoorde niet als vierde identieke regel tussen de menu-items. */
.menu form.afmelden { margin-top: 14px; }
.menu form.afmelden .menuknop { color: var(--muted); }
.knop.rustig.weg { color: var(--rood); }
.knop.rustig.weg:hover { border-color: var(--rood); }

/* Drie knoppen onder elkaar maakte elke rij drie keer zo hoog. */
.knoprij { text-align: right; }
.knoprij .knop { margin: 3px 0 3px 6px; }
@media (max-width: 560px) {
  .knoprij { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .knoprij .knop { margin: 0; }
}
.chip.goed { background: #e6f4ee; color: #1f6b4f; }

/* Een tweede regel in een cel: het cijfer dat het cijfer erboven verklaart.
   Dat stond eerst in een eigen kolom, en die viel op een telefoon weg — juist
   op de schermen waarmee iemand de cijfers narekent. */
.onder { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted);
         letter-spacing: 0; margin-top: 2px; white-space: nowrap; }
th .onder { text-transform: none; }
.merken { display: block; margin-top: 3px; }


/* De afmeldknop stond als grijze balk in het menu doordat het formulier zelf
   het vlak van .menu erfde. */
.menu form.afmelden { background: none; border-top: 1px solid var(--line); margin-top: 6px; }
.knop.klein { min-height: 40px; padding: 8px 12px; font-size: 12.5px; }

/* Op een telefoon is er naast de naam geen ruimte voor drie knoppen; dan
   stapelen ze en wordt elke rij drie keer zo hoog. Onder de naam hebben ze de
   volle breedte en passen ze op één of twee regels. */
@media (max-width: 560px) {
  .toegangtabel tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .toegangtabel td { display: block; padding: 0; border: 0; }
  .toegangtabel .knoprij { justify-content: flex-start; margin-top: 9px; }
  .toegangtabel .knoprij .knop { flex: 0 0 auto; }
}

/* ── grafiek: twaalf maanden naast het target ─────────────────────────────── */
.grafiek { margin: 6px 0 2px; }
.gbalken { display: flex; align-items: stretch; gap: 6px; height: 150px; }
.gmaand { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
          align-items: stretch; gap: 6px; background: none; border: 0; padding: 0;
          font: inherit; cursor: pointer; }
.gkolom { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 4px; }
.gmaand:hover .gkolom, .gmaand:focus-visible .gkolom { background: rgba(0, 0, 91, .06); }
.gmaand:focus-visible { outline: none; }
.gstaaf { position: absolute; left: 0; right: 0; bottom: 0;
          background: var(--navy); border-radius: 3px 3px 0 0; }
.gstaaf.gehaald { background: #2f9a75; }
.gnietgemeten { position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
                background: repeating-linear-gradient(90deg,var(--line2),var(--line2) 3px,transparent 3px,transparent 6px); }
.gdoel { position: absolute; left: -2px; right: -2px; height: 2px; background: var(--rood);
         border-radius: 2px; }
.glabel { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .04em;
          text-align: center; text-transform: uppercase; }
.glegenda { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
            font-size: 11.5px; color: var(--muted); margin-top: 12px; }
.glegenda .gs, .glegenda .gd, .glegenda .gn { width: 12px; height: 3px; border-radius: 2px; }
.glegenda .gs { background: var(--navy); height: 10px; width: 8px; }
.glegenda .gs.gehaald { background: #2f9a75; }
.glegenda .gd { background: var(--rood); }
.glegenda .gn { background: repeating-linear-gradient(90deg,var(--line2),var(--line2) 3px,transparent 3px,transparent 6px); }
.glegenda .gs { margin-left: 8px; }
.glegenda .gs:first-child { margin-left: 0; }
.glegenda .gd, .glegenda .gn { margin-left: 8px; }

/* ── verhouding nieuw / liep al ───────────────────────────────────────────── */
.verhouding { margin-top: 4px; }
.vbalk { display: flex; height: 12px; border-radius: 999px; overflow: hidden;
         background: var(--chip); margin-bottom: 12px; }
.vbalk i { display: block; }
.vnieuw { background: var(--navy); }
.voud { background: #9aa7b1; }
.vstip { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
         margin-right: 6px; vertical-align: baseline; }

/* ── aandeel per klant ────────────────────────────────────────────────────── */
.klantbalk { display: block; height: 4px; border-radius: 999px; background: var(--chip);
             margin-top: 5px; max-width: 190px; }
.klantbalk i { display: block; height: 100%; border-radius: 999px; background: var(--navy); opacity: .55; }
.uitlegkolom { line-height: 1.55; }
.uitlegkolom b { color: var(--navy); }
.chevron { color: var(--muted); font-weight: 400; margin-left: 8px; }
.glegenda .gs.gehaald { background: #2f9a75; }
.glegenda .gs { margin-left: 8px; }
.glegenda .gs:first-child { margin-left: 0; }

/* ── uitleesregel bij de grafiek ──────────────────────────────────────────── */
.guitlees { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
            min-height: 44px; padding: 8px 0 12px; font-size: 13.5px; }
.guitlees b { font-size: 15px; color: var(--navy); width: 100%; }
.guitlees span { white-space: nowrap; font-variant-numeric: tabular-nums; }
.guitlees i { font-style: normal; color: var(--muted); font-size: 11.5px;
              text-transform: uppercase; letter-spacing: .08em; margin-right: 3px; }
.guitlees em { font-style: normal; color: var(--muted); font-size: 11.5px; }
.guitlees .gniets { color: var(--muted); }
.gvlak { fill: transparent; cursor: pointer; }
.gvlak:hover, .gvlak:focus { fill: var(--navy); fill-opacity: .06; outline: none; }

/* ============================================================================
   DESKTOP — zijbalk in plaats van een tabbalk onderaan
   Onderaan is een duimpatroon: op een telefoon staat je hand daar, op een
   laptop kijkt je oog naar linksboven. Vanaf 1000px verhuist dezelfde
   navigatie dus naar de zijkant, met de labels naast de iconen in plaats van
   eronder. Het is dezelfde knoppenlijst uit dezelfde functie — alleen anders
   neergezet, zodat er geen tweede menu te onderhouden valt.
   ============================================================================ */
@media (min-width: 1000px) {
  :root { --zijbalk: 236px; }

  .tabbalk {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--zijbalk);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 2px; padding: 22px 12px calc(18px + env(safe-area-inset-bottom));
    border-top: 0; border-right: 1px solid rgba(255, 255, 255, .12);
    margin-top: 0; z-index: 50;
  }
  .tabbalk button {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start;
    gap: 12px; padding: 12px 14px; font-size: 13px; letter-spacing: .02em;
    border-radius: 10px; min-height: 46px; text-align: left;
  }
  .tabbalk button svg { width: 20px; height: 20px; flex: 0 0 auto; }
  .tabbalk button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
  .tabbalk button[aria-current=page] { background: rgba(255, 255, 255, .1); }
  /* Het streepje stond boven het icoon; staand hoort het aan de zijkant. */
  .tabbalk button[aria-current=page]::before {
    top: 9px; bottom: 9px; left: 0; height: auto; width: 3px;
    transform: none; border-radius: 0 3px 3px 0;
  }

  /* De rest van de pagina schuift op. De kopbalk blijft over de volle breedte
     van dat deel staan, zodat de rode signatuurlijn doorloopt. */
  .hd, .sig, main, .ft, .login { margin-left: var(--zijbalk); }
  html.app .hd { position: static; }
  .statusveilig { display: none !important; }

  /* Een kaart van tweeduizend pixels breed leest niemand; cijfers die drie
     schermen uit elkaar staan hou je niet naast elkaar in je hoofd. */
  main, .login { max-width: 1160px; }
  #scherm { padding-right: 26px; }
}

/* Boven de 1600px de inhoud centreren in plaats van links laten plakken. */
@media (min-width: 1600px) {
  main, .login { margin-left: auto; margin-right: auto;
                 padding-left: var(--zijbalk); box-sizing: content-box; }
}

/* ── notitieboek ──────────────────────────────────────────────────────────── */
.bezoekform { display: grid; gap: 12px; margin: 14px 0 4px; }
.bezoekform label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em;
                    text-transform: uppercase; color: var(--muted); }
.bezoekform input[type=text], .bezoekform input[type=date], .bezoekform textarea {
  width: 100%; margin-top: 5px; font-size: 16px; }
.bezoekform textarea { padding: 11px 13px; border: 1px solid var(--line2); border-radius: var(--r-sm);
                       background: var(--panel); color: var(--text); font: inherit; font-size: 16px;
                       line-height: 1.55; resize: vertical; }
.bezoekform textarea:focus, .bezoekform input:focus { outline: 2px solid var(--navy); outline-offset: -2px; }
.veldrij { display: flex; gap: 12px; flex-wrap: wrap; }
.veldrij label { flex: 0 0 auto; }
.veldrij label.breed { flex: 1 1 200px; min-width: 0; }

.bezoeklijst { margin-top: 4px; }
.bezoek { border-top: 1px solid var(--line); }
.bezoek:last-child { border-bottom: 1px solid var(--line); }
.bezoekkop { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 13px 0;
             background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.bezoek.open .bezoekkop { background: var(--chip); }
.bdatum { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; }
.bklant { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.bonderwerp { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.bmerk { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

.bezoekdetail { padding: 4px 0 16px; }
.bnotitie { white-space: pre-wrap; line-height: 1.6; padding: 6px 0 12px; }
.bestanden { display: grid; gap: 6px; margin: 4px 0 12px; }
.bestand { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
           background: var(--chip); border-radius: var(--r-sm); }
.bestand a { color: var(--navy); font-weight: 600; word-break: break-word; }
.bestand .sub { margin-left: auto; white-space: nowrap; }
.bezoekknoppen { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.veldkop { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em;
           text-transform: uppercase; color: var(--muted); }
/* De categoriekiezer staat onder de periodekiezer en moet duidelijk een tweede,
   lichtere keuze zijn — anders lijken het twee rijen van hetzelfde. */
.katkiezer { border-bottom: 0; margin-top: -10px; margin-bottom: 14px; gap: 14px; }
.katkiezer .tab { font-size: 12.5px; font-weight: 700; color: var(--muted);
                  padding-bottom: 6px; min-height: 38px; }
.katkiezer .tab[aria-selected=true] { color: var(--navy); }
.katkiezer .tab[aria-selected=true]::after { height: 2px; }
.regelkop td { font-weight: 800; color: var(--navy); padding-top: 12px; letter-spacing: .01em; }
.regelnotitie td { color: var(--muted); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }

/* ── salesmeeting ─────────────────────────────────────────────────────────── */
.mblok { border-top: 1px solid var(--line); padding: 16px 0 6px; }
.mkop { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mkop h3 { margin: 0; font-size: 15.5px; font-weight: 800; }
.mcijfers { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mlijst { margin: 0 0 12px; }
.mlijsttitel { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
               color: var(--muted); margin-bottom: 5px; }
.mpunt, .mafspraak { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0;
                     border-bottom: 1px solid var(--line); line-height: 1.5; }
.mpunt span, .mafspraak > span { flex: 1 1 auto; min-width: 0; }
.mafspraak .sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.mafspraak input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto;
                                  accent-color: var(--navy); }
.mafspraak.klaar > span { color: var(--muted); text-decoration: line-through; }
.mafspraak.laat .sub { color: var(--rood); }
.mtoevoeg { display: flex; gap: 8px; padding-top: 8px; }
.mtoevoeg input[type=text] { flex: 1 1 auto; min-width: 0; font-size: 16px; }
.mtoevoeg input[type=date] { flex: 0 0 auto; width: auto; font-size: 16px; }
.mopen { background: var(--chip); border-radius: var(--r-sm); padding: 12px 14px; margin: 12px 0 6px; }
.mopen .mafspraak:last-child { border-bottom: 0; }
.mdeelnemers { padding: 12px 0 4px; border-top: 1px solid var(--line); }
.mchips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.mchip { border: 1px solid var(--line2); background: var(--panel); color: var(--muted);
         border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 12.5px;
         font-weight: 600; cursor: pointer; min-height: 38px; }
.mchip.aan { background: var(--navy); border-color: var(--navy); color: #fff; }
.monderwerp { color: var(--navy); }
.mtoevoeg input.smal { flex: 0 0 30%; min-width: 110px; }

/* ── sorteerbare kolomkoppen ──────────────────────────────────────────────── */
th.sorteerkop { cursor: pointer; user-select: none; position: relative; }
th.sorteerkop:hover { color: var(--navy); }
th.sorteerkop::after { content: "↕"; opacity: .3; margin-left: 5px; font-size: 10px; }
th.sorteerkop[data-richting=op]::after { content: "↑"; opacity: 1; color: var(--rood); }
th.sorteerkop[data-richting=af]::after { content: "↓"; opacity: 1; color: var(--rood); }
th.sorteerkop:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.meerknop { display: block; width: 100%; margin-top: 4px; padding: 11px 0; min-height: 44px;
            background: none; border: 0; border-top: 1px solid var(--line);
            color: var(--navy); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.meerknop:hover { background: var(--chip); }
.bezig { padding: 34px 0; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ── geraamte tijdens het laden ───────────────────────────────────────────
   Vormen op de plek waar de echte inhoud komt. Geen draaiend wieltje: dat
   zegt "wacht", een geraamte zegt "hier komt het". */
.skelet { display: block; background: linear-gradient(90deg,
            var(--chip) 25%, var(--surface2) 37%, var(--chip) 63%);
          background-size: 400% 100%; border-radius: 8px; height: 14px;
          animation: skelet 1.4s ease-in-out infinite; }
.skelet.kop { height: 22px; width: 180px; margin-bottom: 22px; }
.skelet.balk { height: 14px; border-radius: 999px; margin-top: 20px; }
.skeletrij { display: flex; gap: 40px; }
.skeletrij .skelet { height: 34px; width: 150px; }
@keyframes skelet { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
@media (prefers-reduced-motion: reduce) { .skelet { animation: none } }