/* EP-kit: kleuren en onderdelen (tegels, inloggen, account, EPdata). Het thema gebruikt dezelfde variabelen. */
:root{
  --ek-bg:#eef2f1; --ek-surface:#ffffff; --ek-sunk:#f6f8f7; --ek-ink:#18272a; --ek-muted:#5a6b6c; --ek-line:#d3dcda;
  --ek-accent:#0d6b5b; --ek-accent-hover:#0a5649; --ek-accent-ink:#ffffff; --ek-accent-soft:#d9ebe6;
  --ek-ok:#1f7a3f; --ek-ok-soft:#dcf0e2; --ek-fout:#a42323; --ek-fout-soft:#fbe3e1; --ek-warn:#9a5600;
  --ek-f-display:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
  --ek-f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ek-f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ek-r:8px; --ek-schaduw:0 1px 2px rgba(16,40,36,.06),0 4px 16px rgba(16,40,36,.06);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ek-bg:#101818; --ek-surface:#172222; --ek-sunk:#131d1d; --ek-ink:#e2eae8; --ek-muted:#97a9a7; --ek-line:#2a3a39;
  --ek-accent:#4fc0a4; --ek-accent-hover:#6fd0b8; --ek-accent-ink:#0b1a17; --ek-accent-soft:#1c3631;
  --ek-ok:#7fd69a; --ek-ok-soft:#173222; --ek-fout:#f19a92; --ek-fout-soft:#3a1d1b; --ek-warn:#f0b45a;
  --ek-schaduw:0 1px 2px rgba(0,0,0,.3); color-scheme:dark}}
:root[data-theme="dark"]{
  --ek-bg:#101818; --ek-surface:#172222; --ek-sunk:#131d1d; --ek-ink:#e2eae8; --ek-muted:#97a9a7; --ek-line:#2a3a39;
  --ek-accent:#4fc0a4; --ek-accent-hover:#6fd0b8; --ek-accent-ink:#0b1a17; --ek-accent-soft:#1c3631;
  --ek-ok:#7fd69a; --ek-ok-soft:#173222; --ek-fout:#f19a92; --ek-fout-soft:#3a1d1b; --ek-warn:#f0b45a;
  --ek-schaduw:0 1px 2px rgba(0,0,0,.3); color-scheme:dark}

/* Algemeen */
.epkit-icoon{width:24px;height:24px;flex:none}
.epkit-icoonvak{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--ek-accent-soft);color:var(--ek-accent);flex:none}
.epkit-klein{font-size:.85rem;color:var(--ek-muted)}
.epkit-knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--ek-accent);background:var(--ek-accent);color:var(--ek-accent-ink)!important;font:600 .95rem/1.2 var(--ek-f-body);padding:11px 18px;border-radius:6px;cursor:pointer;text-decoration:none!important;white-space:nowrap}
.epkit-knop:hover{background:var(--ek-accent-hover);border-color:var(--ek-accent-hover)}
.epkit-knop:disabled{opacity:.65;cursor:wait}
.epkit-knop--rand{background:transparent;color:var(--ek-accent)!important}
.epkit-knop--rand:hover{background:var(--ek-accent-soft)}
.epkit-knop--gevaar{background:var(--ek-fout);border-color:var(--ek-fout);color:#fff!important}
.epkit-knop--gevaar:hover{filter:brightness(.92);background:var(--ek-fout)}
.epkit-melding{margin:0 0 14px;padding:10px 14px;border-radius:6px;font-size:.92rem}
.epkit-melding--fout{background:var(--ek-fout-soft);color:var(--ek-fout)}
.epkit-melding--ok{background:var(--ek-ok-soft);color:var(--ek-ok)}
.epkit-kaart{background:var(--ek-surface);border:1px solid var(--ek-line);border-radius:var(--ek-r);padding:20px;box-shadow:var(--ek-schaduw)}

/* Voorpagina */
.epkit-held{padding:8px 0 26px;max-width:720px}
.epkit-held h1{font:700 clamp(2rem,5vw,3rem)/1.05 var(--ek-f-display);margin:0 0 12px;letter-spacing:-.01em;text-wrap:balance}
.epkit-held h1 span{color:var(--ek-accent)}
.epkit-held p{font-size:1.08rem;color:var(--ek-muted);margin:0;max-width:60ch}
.epkit-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.epkit-tegel{display:flex;flex-direction:column;gap:8px;background:var(--ek-surface);border:1px solid var(--ek-line);border-radius:var(--ek-r);padding:18px;color:var(--ek-ink)!important;text-decoration:none!important;box-shadow:var(--ek-schaduw);transition:border-color .15s,transform .15s}
.epkit-tegel:hover{border-color:var(--ek-accent);transform:translateY(-1px)}
.epkit-tegel:focus-visible{outline:2px solid var(--ek-accent);outline-offset:2px}
.epkit-tegel__kop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:4px}
.epkit-tegel__titel{font:600 1.3rem/1.15 var(--ek-f-display)}
.epkit-tegel__tekst{font-size:.92rem;color:var(--ek-muted);flex:1}
.epkit-tegel__actie{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.9rem;color:var(--ek-accent);margin-top:6px}
.epkit-tegel__actie .epkit-icoon{width:18px;height:18px;transition:transform .15s}
.epkit-tegel:hover .epkit-tegel__actie .epkit-icoon{transform:translateX(3px)}
.epkit-label{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;letter-spacing:.02em;padding:4px 9px;border-radius:999px;background:var(--ek-sunk);color:var(--ek-muted);border:1px solid var(--ek-line);white-space:nowrap}
.epkit-label .epkit-icoon{width:13px;height:13px}
.epkit-label--vrij{background:var(--ek-ok-soft);color:var(--ek-ok);border-color:transparent}
.epkit-tegels--klein{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:10px;margin:0 0 22px}
.epkit-tegels--klein .epkit-tegel{flex-direction:row;align-items:center;padding:10px 12px;gap:10px}
.epkit-tegels--klein .epkit-icoonvak{width:36px;height:36px}
.epkit-tegels--klein .epkit-tegel__titel{font-size:1.02rem}
.epkit-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding:20px 22px;border-radius:var(--ek-r);background:var(--ek-accent-soft)}
.epkit-band h2{font:600 1.35rem/1.2 var(--ek-f-display);margin:0 0 4px}
.epkit-band p{margin:0;color:var(--ek-muted);font-size:.95rem}
.epkit-voetnoot{margin:16px 0 0;font-size:.82rem;color:var(--ek-muted)}

/* Inloggen en registreren */
.epkit-toegang{max-width:560px;margin:8px auto 0}
.epkit-toegang__kop{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.epkit-toegang__kop h1{font:600 1.8rem/1.1 var(--ek-f-display);margin:0 0 6px}
.epkit-toegang__kop p{margin:0;color:var(--ek-muted)}
.epkit-toegang__tabs{display:flex;gap:4px;border-bottom:1px solid var(--ek-line)}
.epkit-toegang__tabs button{appearance:none;border:0;background:none;color:var(--ek-muted);font:600 .98rem var(--ek-f-body);padding:10px 14px;margin-bottom:-1px;border-bottom:3px solid transparent;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.epkit-toegang__tabs button[aria-selected="true"]{color:var(--ek-ink);border-bottom-color:var(--ek-accent)}
.epkit-gratis{font-size:.7rem;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--ek-ok-soft);color:var(--ek-ok)}
.epkit-toegang__vakken .epkit-form{background:var(--ek-surface);border:1px solid var(--ek-line);border-top:0;border-radius:0 0 var(--ek-r) var(--ek-r);padding:20px;box-shadow:var(--ek-schaduw)}
.epkit-toegang__vakken .epkit-form h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.epkit-form{display:grid;gap:14px}
.epkit-form[hidden]{display:none}
.epkit-form h2{font:600 1.25rem var(--ek-f-display);margin:0!important}
.epkit-form label{display:grid;gap:5px;font-size:.88rem;font-weight:500;color:var(--ek-ink)}
.epkit-form input[type=text],.epkit-form input[type=email],.epkit-form input[type=password],.epkit-epdata input[type=text]{width:100%;font:400 1rem var(--ek-f-body);color:var(--ek-ink);background:var(--ek-sunk);border:1px solid var(--ek-line);border-radius:6px;padding:10px 12px}
.epkit-form input:focus-visible,.epkit-epdata input:focus-visible{outline:2px solid var(--ek-accent);outline-offset:1px;border-color:var(--ek-accent)}
.epkit-form .epkit-vink{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.epkit-form .epkit-vink input{margin-top:3px;accent-color:var(--ek-accent);width:16px;height:16px;flex:none}
.epkit-form .epkit-knop{justify-self:start}
.epkit-form p{margin:0}
.epkit-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Account */
.epkit-account__kop{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}
.epkit-account__kop h1{font:600 1.9rem/1.1 var(--ek-f-display);margin:0 0 4px}
.epkit-account__kop p{margin:0}
.epkit-account__vakken{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;align-items:start}
.epkit-verwijder{margin-top:22px;font-size:.92rem}
.epkit-verwijder summary{cursor:pointer;color:var(--ek-muted)}
.epkit-verwijder .epkit-form{margin-top:12px;max-width:520px}

/* App-venster voor de rekenhulpen (hoogte regelt het thema) */
.epkit-appvak{height:calc(100dvh - 140px);min-height:520px}
.epkit-app__frame{display:block;width:100%;height:100%;border:0;background:var(--ek-bg)}

/* EPdata */
.epkit-paginakop{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.epkit-paginakop h1{font:600 1.9rem/1.1 var(--ek-f-display);margin:0 0 6px}
.epkit-paginakop p{margin:0;color:var(--ek-muted)}
.epkit-epdata{max-width:820px}
.epkit-epdata .epkit-kaart{margin-bottom:12px}
.sde-zoek{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.sde-zoek-label{flex:1 1 360px;display:grid;gap:6px;font-weight:600;font-size:.9rem}
.sde-zoek-label input{font-size:1.05rem!important;padding:12px 14px!important}
.sde-status{margin:14px 0 0;font-weight:600}
.sde-status.sde-fout{color:var(--ek-fout)}
.sde-gevonden{margin:16px 0 0;padding:12px 16px;border:1px solid var(--ek-line);border-left:4px solid var(--ek-accent);border-radius:6px;background:var(--ek-sunk)}
.sde-rij{display:flex;gap:12px;padding:3px 0;font-size:.95rem}
.sde-rij span{flex:0 0 120px;color:var(--ek-muted)}
.sde-dlrij{margin:14px 0 0}
.sde-dlrij:has(> [hidden]){display:none}