@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(/css/hanken-grotesk-regular.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(/css/hanken-grotesk-bold.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:italic;font-weight:400;font-display:swap;src:url(/css/hanken-grotesk-italic.woff2) format("woff2")}
:root{--blauw:#1860c0;--blauw2:#124e9e;--knop:#206bc4;--knop2:#1a579f;--groen:#7bce23;--tekst:#1d2633;--grijs:#6b7686;--rand:#d5dde8;--bg:#eef3fa;--rood:#c62828}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font:16px/1.5 'Hanken Grotesk',sans-serif;color:var(--tekst);background:var(--bg);display:flex;flex-direction:column;min-height:100vh}
header{position:sticky;top:0;z-index:10;background:linear-gradient(90deg,#0d2547 0%,#1a3a66 100%);height:calc(40px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));display:flex;align-items:center;gap:12px;flex-shrink:0}
header a{color:#fff;text-decoration:none;font-weight:700;font-size:22px;letter-spacing:-.3px;display:inline-flex;align-items:center;gap:8px}
header a span{color:var(--groen)}
header svg{width:28px;height:28px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:48px 16px}
.kaart{background:#fff;width:100%;max-width:420px;border-radius:10px;box-shadow:0 4px 20px rgba(24,96,192,.12);overflow:hidden}
.kaart-kop{border-top:4px solid var(--groen);padding:26px 28px 8px}
h1{margin:0 0 4px;font-size:24px;color:var(--blauw)}
.sub{margin:0;color:var(--grijs);font-size:14px}
.kaart form,.kaart .acties{padding:12px 28px 26px}
label{display:block;font-weight:600;font-size:14px;margin:14px 0 6px}
.veld{position:relative;display:flex;align-items:center}
.veld>svg{position:absolute;left:12px;width:20px;height:20px;stroke:var(--grijs);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
input{width:100%;font:inherit;padding:11px 44px 11px 42px;border:1px solid var(--rand);border-radius:6px;background:#fafcff;transition:border-color .15s,box-shadow .15s}
input:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(24,96,192,.18);background:#fff}
.toon{position:absolute;right:6px;background:none;border:0;padding:6px;cursor:pointer;border-radius:4px;display:flex}
.toon svg{width:20px;height:20px;stroke:var(--grijs);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.toon[aria-pressed=true] svg{stroke:var(--blauw)}
.toon:focus-visible{outline:2px solid var(--blauw)}
.rij{display:flex;justify-content:flex-end;margin-top:8px;font-size:14px}
a{color:var(--blauw)}
a:hover{color:var(--blauw2)}
.knop{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:22px;padding:12px;font:inherit;font-weight:700;color:#fff;background:var(--knop);border:0;border-radius:6px;cursor:pointer;transition:background .15s}
.knop:hover{background:var(--knop2)}
.knop:focus-visible{outline:3px solid var(--groen);outline-offset:2px}
.knop svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.knop:disabled{opacity:.6;cursor:wait}
.hint{font-size:13px;color:var(--grijs);margin:6px 0 0}
.melding{margin:16px 28px 0;padding:10px 14px;border-radius:6px;font-size:14px}
.melding.fout{background:#fdecea;color:var(--rood);border-left:4px solid var(--rood)}
.melding.ok{background:#eef8e4;color:#3d6e0b;border-left:4px solid var(--groen)}
.voet{border-top:1px solid #e6ebf2;padding:16px 28px;text-align:center;font-size:14px;color:var(--grijs);background:#f8fafd}
footer{text-align:center;font-size:13px;color:var(--grijs);padding:20px}
@media(max-width:480px){main{padding:20px 12px}.kaart-kop,.kaart form,.kaart .acties{padding-left:20px;padding-right:20px}.melding{margin:16px 20px 0}}

header .uitlog{margin:0;display:flex}
header .uitlog button{background:none;border:0;padding:4px;cursor:pointer;display:flex;border-radius:6px}
header .uitlog button:hover{background:rgba(255,255,255,.15)}
header .uitlog button:focus-visible{outline:2px solid #fff;outline-offset:2px}
main.home{display:block;text-align:left;padding:24px 20px;max-width:1100px;width:100%;margin:0 auto}
header .uitlog svg{width:24px;height:24px}
[hidden]{display:none!important}
.balk{display:flex;gap:12px;align-items:center}
.zoek{position:relative;flex:1;display:flex;align-items:center}
.zoek svg{position:absolute;left:12px;width:20px;height:20px;stroke:var(--grijs);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.zoek input{padding-top:7px;padding-bottom:7px;padding-right:12px;background:#fff}
.knop-toevoegen{display:inline-flex;align-items:center;gap:6px;padding:7px 16px 7px 12px;font:inherit;font-weight:700;color:#fff;background:var(--knop);border:0;border-radius:6px;cursor:pointer;white-space:nowrap;transition:background .15s}
.knop-toevoegen:hover{background:var(--knop2)}
.knop-toevoegen:focus-visible{outline:3px solid var(--groen);outline-offset:2px}
.knop-toevoegen svg{width:20px;height:20px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round}
.jaar h2{font-size:18px;color:var(--blauw);margin:28px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--groen)}
.ev-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:10px}
.ev{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:14px;row-gap:4px;min-width:0;padding:10px;background:#fff;border:1px solid transparent;border-radius:10px;box-shadow:0 2px 8px rgba(24,96,192,.08);text-decoration:none;color:var(--tekst);transition:border-color .15s,box-shadow .15s}
.ev:hover{border-color:var(--blauw);box-shadow:0 4px 14px rgba(24,96,192,.15);color:var(--tekst)}
.ev:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}
.ev-naam{grid-column:1/-1;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev img,.ev-logo{width:100px;height:60px;object-fit:contain;flex-shrink:0;border-radius:6px;background:#f3f6fa}
span.ev-logo{display:flex;align-items:center;justify-content:center}
span.ev-logo svg{width:32px;height:32px;fill:none;stroke:#2185d0;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ev-tekst{display:flex;flex-direction:column;gap:2px;height:60px;min-width:0}
.ev-tekst span{display:flex;align-items:center;gap:5px;font-size:13px;line-height:16px;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-tekst svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ev-tekst .ev-st{align-self:flex-start;margin-top:auto;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;font-size:12px;font-weight:700;line-height:16px;overflow:visible;background:var(--st-bg);color:var(--st-tk)}
.ev-st::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--st)}
.ev-st.pre{--st:#767676;--st-bg:#f0f0f0;--st-tk:#4a4a4a}
.ev-st.open{--st:#21ba45;--st-bg:#e8f7ec;--st-tk:#167a2e}
.ev-st.dicht{--st:#db2828;--st-bg:#fcebeb;--st-tk:#a51d1d}
.leeg{color:var(--grijs);text-align:center;padding:40px 0}
dialog{border:0;border-top:4px solid var(--groen);border-radius:10px;padding:0;width:calc(100% - 32px);max-width:420px;box-shadow:0 10px 40px rgba(0,0,0,.25);color:var(--tekst)}
dialog::backdrop{background:rgba(20,40,70,.5)}
.dlg{padding:24px 28px 26px}
.dlg h2{margin:0 0 4px;font-size:22px;color:var(--blauw)}
.dlg .melding{margin:14px 0 0}
.dlg-knoppen{display:flex;gap:10px;margin-top:22px}
.dlg-knoppen .knop{margin:0;flex:1}
.knop:disabled{opacity:.6;cursor:wait}
.knop2{flex:1;padding:12px;font:inherit;font-weight:700;color:var(--knop);background:#fff;border:1px solid var(--rand);border-radius:6px;cursor:pointer}
.knop2:hover{background:var(--bg)}
@media(max-width:480px){main.home{padding:16px 12px}.dlg{padding:20px}header img{width:140px;height:auto}}

.ev-w{position:relative;min-width:0}
.ev-w .ev{height:100%}
.ev-w .ev-naam{padding-right:34px}
.ev-acties{position:absolute;top:.4rem;right:.4rem;z-index:2}
.ev-acties button,.ev-acties a{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:6px;background:#fff;color:#555;cursor:pointer}
.ev-acties button:hover,.ev-acties a:hover{background:#eef3fb;color:#1860c0}
.ev-acties button:disabled{opacity:.4;cursor:default;background:#fff;color:#555}
.ev-acties .ev-del:hover{color:#c0392b}
.ev-menu{display:none;flex-direction:column;gap:2px;padding:2px;margin:-2px;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.ev-acties.open .ev-menu{display:flex}
.ev-acties.open .ev-meer{display:none}
.ev-acties svg,header .gebruiker svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
header .gebruiker{display:flex;align-items:center;gap:6px;min-width:0;padding:4px 8px;border:0;border-radius:6px;background:none;color:#fff;font:inherit;font-weight:700;cursor:pointer}
header .gebruiker span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header .gebruiker:focus-visible{outline:2px solid #fff;outline-offset:2px}
header .gebruiker:hover{background:rgba(255,255,255,.15)}

.knop.rood{background:var(--rood)}
.knop.rood:hover{background:#a31f1f}
@media(hover:none){.ev-del{opacity:1}}

header .home,header .help{display:flex;padding:4px;border-radius:6px}
header .home:hover,header .help:hover{background:rgba(255,255,255,.15)}
header .home:focus-visible,header .help:focus-visible{outline:2px solid #fff;outline-offset:2px}
header .home svg,header .help svg{width:24px;height:24px}
header .help{margin-left:auto}
html:has(body.frame),body.frame{overflow:hidden;height:100%;min-height:0}
main.frame{position:fixed;top:calc(40px + env(safe-area-inset-top));left:0;right:0;bottom:0;display:block;padding:0}
main.frame iframe{display:block;width:100%;height:100%;border:0;background:#fff}

.naam-ini{display:none}
@media(max-width:480px){header{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));gap:8px}header .gebruiker{padding:2px}header .gebruiker svg,header .gebruiker .naam-vol{display:none}header .gebruiker .naam-ini{display:block;width:28px;height:28px;line-height:28px;text-align:center;letter-spacing:0;border-radius:50%;background:var(--groen);color:#0d2547;font-size:13px}}.faq{max-width:760px;margin:0 auto}
.faq h1{margin:0 0 16px}
.faq details{background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(24,96,192,.08);margin-bottom:10px}
.faq summary{position:relative;padding:14px 44px 14px 16px;font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--blauw)}
.faq details[open] summary::after{content:"−"}
.faq summary:focus-visible{outline:2px solid var(--blauw);outline-offset:2px;border-radius:10px}
.faq details>div{padding:0 16px 14px}