:root{color-scheme:light dark;--grond: #ECEDEE;--vlak: #FFFFFF;--vlak-2: #F4F5F6;--lijn: #D5D8DB;--tekst: #121B24;--gedempt: #4E5A63;--accent: #A84D2C;--accent-zacht: #F7E6DF;--accent-tekst: #FFFFFF;--goed: #2E7D5B;--goed-zacht: #E3F3EB;--letop: #8A5A12;--letop-zacht: #FBF0DC;--fout: #B3261E;--fout-zacht: #FBE4E2;--focus: #1F9C8B}@media (prefers-color-scheme: dark){:root{--grond: #121B24;--vlak: #1C2836;--vlak-2: #283B4C;--lijn: #34485A;--tekst: #ECEDEE;--gedempt: #A9B0B6;--accent: #E17C5F;--accent-zacht: #3A2A24;--accent-tekst: #121B24;--goed: #6FCF97;--goed-zacht: #1E3A2C;--letop: #EDB79C;--letop-zacht: #3D2E1E;--fout: #F28B82;--fout-zacht: #4A2320;--focus: #5EC0CC}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--grond);color:var(--tekst);font:16px/1.5 Delight,system-ui,-apple-system,Segoe UI,sans-serif}button,input,textarea,select{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}a{color:var(--accent)}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}.app{min-height:100vh;display:flex;flex-direction:column}.kop{position:sticky;top:0;z-index:20;background:#121b24;color:#ecedee;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px}.kop img{height:22px;width:auto;display:block}.kop .rechts{display:flex;align-items:center;gap:6px;font-size:14px;color:#ecedee}.kop button{background:transparent;border:0;color:#ecedee;padding:10px;border-radius:10px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.kop button:hover{background:#283b4c}main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:16px 16px calc(96px + env(safe-area-inset-bottom))}h1{font-size:1.35rem;margin:0 0 4px;line-height:1.25}h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--gedempt);margin:22px 0 8px}.sub{color:var(--gedempt);margin:0 0 14px;font-size:14px}.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:12px;border:1px solid transparent;background:var(--accent);color:var(--accent-tekst);font-weight:600;cursor:pointer;text-decoration:none;transition:background-color .15s,opacity .15s}.knop:hover{filter:brightness(.95)}.knop:disabled{opacity:.55;cursor:not-allowed}.knop.stil{background:var(--vlak);color:var(--tekst);border-color:var(--lijn)}.knop.stil:hover{background:var(--vlak-2)}.knop.gevaar{background:var(--fout-zacht);color:var(--fout)}.knop.breed{width:100%}.knop.klein{min-height:44px;padding:0 14px;font-size:15px}.icoon{width:20px;height:20px;flex:none}.kaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:14px;padding:14px 16px}.lijst{display:flex;flex-direction:column;gap:10px}.rij{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;cursor:pointer}.rij:hover{background:var(--vlak-2)}.rij .inhoud{flex:1;min-width:0}.rij .titel{font-weight:600}.rij .meta{color:var(--gedempt);font-size:14px}.pil{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600;background:var(--vlak-2);color:var(--gedempt);white-space:nowrap}.pil.accent{background:var(--accent-zacht);color:var(--accent)}.pil.goed{background:var(--goed-zacht);color:var(--goed)}.pil.letop{background:var(--letop-zacht);color:var(--letop)}.pil.fout{background:var(--fout-zacht);color:var(--fout)}.melding{border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;margin:0 0 14px}.melding.fout{background:var(--fout-zacht);color:var(--fout)}.melding.letop{background:var(--letop-zacht);color:var(--letop)}.melding.goed{background:var(--goed-zacht);color:var(--goed)}.melding.info{background:var(--vlak);border:1px solid var(--lijn);color:var(--tekst)}.veld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.veld label{font-size:14px;font-weight:600}.veld input,.veld textarea{min-height:48px;padding:10px 12px;border-radius:10px;border:1px solid var(--lijn);background:var(--vlak);width:100%}.veld textarea{min-height:96px;resize:vertical}.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px}.filters button{flex:none;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--lijn);background:var(--vlak);cursor:pointer}.filters button[aria-pressed=true]{background:var(--tekst);color:var(--grond);border-color:var(--tekst)}.regel{border-top:1px solid var(--lijn);padding:12px 0}.regel:first-of-type{border-top:0}.regel .tekst{margin:0 0 8px}.tekst.weg{color:var(--gedempt);text-decoration:line-through}.regel .bron{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}.regel .acties{display:flex;gap:8px;flex-wrap:wrap}.regel .acties .knop{flex:1}.citaat{background:var(--vlak-2);border-left:3px solid var(--accent);border-radius:8px;padding:8px 10px;font-size:14px;color:var(--gedempt);margin:0 0 8px}.kaart.deck{display:flex;flex-direction:column;gap:12px;padding:18px 18px 16px}.kaart.deck .kop-rij{display:flex;justify-content:space-between;align-items:center}.kaart.deck .teller{font-size:13px;color:var(--gedempt);font-variant-numeric:tabular-nums}.kaart.deck .tekst{margin:0}.kaart.deck .tekst.hoofd,.kaart.deck .tekst.correctie{font-size:1.2rem;line-height:1.4}.kaart.deck .tekst.weg{font-size:1rem}.kaart.deck .tekst.weg+.tekst.correctie{margin-top:-6px}.kaart.deck .meta{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gedempt)}.kaart.deck .meta .staat.goed{color:var(--goed)}.kaart.deck .meta .staat.letop{color:var(--letop)}.kaart.deck .meta .staat.fout{color:var(--fout)}.kaart.deck .citaat{display:flex;flex-direction:column;gap:2px;margin:0;padding:2px 0 2px 12px;background:transparent;border-left:3px solid var(--accent);border-radius:0}.kaart.deck .citaat .label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gedempt)}.kaart.deck .citaat .woorden{font-style:italic;font-size:15px;color:var(--tekst)}.acties.gelijk{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}.acties.gelijk .knop{padding:0 8px}.navigatie{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:12px}.navigatie .knop{min-height:48px}.stapel{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.stapel .stip{width:8px;height:8px;border-radius:50%;background:var(--lijn)}.stapel .stip.klaar{background:var(--goed)}.stapel .stip.huidig{outline:2px solid var(--accent);outline-offset:2px}.citaat b{color:var(--tekst)}.onderbalk{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--grond) 70%,transparent);z-index:10}.onderbalk .binnen{max-width:640px;margin:0 auto;display:flex;gap:10px}.skelet{background:var(--vlak-2);border-radius:10px;height:18px;animation:pulse 1.2s ease-in-out infinite}.skelet.hoog{height:64px;border-radius:14px}@keyframes pulse{0%,to{opacity:.55}50%{opacity:1}}.puls{width:14px;height:14px;border-radius:50%;background:var(--fout);box-shadow:0 0 #b3261e80;animation:puls 1.4s ease-out infinite}@keyframes puls{0%{box-shadow:0 0 #b3261e73}to{box-shadow:0 0 0 14px #b3261e00}}.groot{font-size:2.2rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}.meter{display:flex;gap:4px;justify-content:center;align-items:flex-end;height:28px;margin-top:14px}.meter .balk{width:10px;height:100%;border-radius:3px;background:var(--lijn);transition:background-color .08s}.meter .balk.aan{background:var(--goed)}.keuze{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--lijn);border-radius:12px;background:var(--vlak);cursor:pointer;min-height:56px}.keuze.gekozen{border-color:var(--accent);background:var(--accent-zacht)}.keuze input{width:22px;height:22px;accent-color:var(--accent)}.status-lijst{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.status-lijst .kaart{text-align:center}.status-lijst .getal{font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums}.status-lijst .label{color:var(--gedempt);font-size:13px}
