/* Acties & planning – telefoon eerst, breder op de Mac. Kleuren zoals project "app". */
:root{
  --papier: #F6F4EF;
  --vlak: #FFFFFF;
  --inkt: #1E2A32;
  --inkt-zacht: #5A6B74;
  --lijn: #DDD6C7;
  --accent: #2F5D62;
  --accent-zacht: #E4EEEC;
  --laat: #B5482E;
  --laat-zacht: #F6E3DD;
  --nu: #A86A00;
  --straal: 8px;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --navhoogte: 60px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --papier: #161C20; --vlak: #1F272C; --inkt: #E6E9EA; --inkt-zacht: #9AA8AF; --lijn: #34404A;
    --accent: #6FB3B8; --accent-zacht: #23373A; --laat: #F08A6E; --laat-zacht: #3A2622; --nu: #E0A84A;
    color-scheme: dark;
  }
}

*{box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
html, body{margin: 0; background: var(--papier); color: var(--inkt); font: 16px/1.4 var(--sans);}
body{-webkit-font-smoothing: antialiased; padding-bottom: calc(var(--navhoogte) + env(safe-area-inset-bottom) + 24px);}
a{color: var(--accent);}
h1, h2, h3{margin: 0; font-weight: 600;}
h1{font-family: var(--serif); font-size: 26px;}
button, input, select, textarea{font: inherit; color: inherit;}
button{cursor: pointer;}
svg{width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
.klein{font-size: 13px; color: var(--inkt-zacht);}
.leeg{color: var(--inkt-zacht); padding: 12px 0; list-style: none;}
.laden{color: var(--inkt-zacht); padding: 40px 0; text-align: center;}
.hint{background: var(--accent-zacht); padding: 10px 12px; border-radius: var(--straal); font-size: 14px;}
.laat{color: var(--laat);}

/* ---------- kop en navigatie ---------- */
header.top{
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  background: var(--papier); border-bottom: 1px solid var(--lijn);
}
.merk{display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--inkt); text-decoration: none; margin-right: auto;}
.merk img{border-radius: 6px;}
.ik{border: 1px solid var(--lijn); background: var(--vlak); border-radius: 999px; padding: 5px 12px; font-size: 14px;}
.ik:empty{display: none;}

.hoofdnav{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; background: var(--vlak); border-top: 1px solid var(--lijn);
  padding-bottom: env(safe-area-inset-bottom);
}
.hoofdnav a{
  flex: 1; height: var(--navhoogte); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--inkt-zacht); text-decoration: none; font-size: 11px;
}
.hoofdnav a.actief{color: var(--accent); font-weight: 600;}
body.uitgelogd .hoofdnav, body.uitgelogd .ik{display: none;}

main{max-width: 980px; margin: 0 auto; padding: 16px;}
main.breed{max-width: none;}

@media (min-width: 760px){
  body{padding-bottom: 40px;}
  .hoofdnav{position: static; border: 0; background: none; padding: 0; gap: 4px; margin-right: auto;}
  .hoofdnav a{flex: none; height: auto; flex-direction: row; gap: 6px; font-size: 15px; padding: 7px 12px; border-radius: var(--straal);}
  .hoofdnav a.actief{background: var(--accent-zacht);}
  .hoofdnav svg{width: 18px; height: 18px;}
  .merk{margin-right: 16px;}
  main{padding: 24px;}
}

/* ---------- pagina-onderdelen ---------- */
.paginakop{display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;}
.titel{display: flex; align-items: center; gap: 12px; flex-wrap: wrap;}
.terug{font-size: 14px; text-decoration: none; display: inline-block; margin-bottom: 2px;}
.project-kop h1{border-left: 5px solid var(--kleur); padding-left: 10px;}
.projectinfo{display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--inkt-zacht); margin-bottom: 10px;}
.omschrijving{white-space: pre-wrap; margin: 0 0 14px; font-size: 15px;}
.balk{display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 4px;}

.filters{display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;}
.filters select{flex: 1 1 140px; min-width: 0;}
.bladeren{display: flex; gap: 4px;}
select, input:not([type=checkbox]):not([type=radio]), textarea{
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--straal); padding: 9px 10px; width: 100%; min-width: 0;
}
textarea{resize: vertical;}
select:focus, input:focus, textarea:focus{outline: 2px solid var(--accent); outline-offset: -1px;}
.knop-klein, .knoppen button, .opm-nieuw button{
  border: 1px solid var(--lijn); background: var(--vlak); border-radius: var(--straal); padding: 7px 12px; font-size: 14px; white-space: nowrap;
}
button.hoofd{background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;}
@media (prefers-color-scheme: dark){ button.hoofd{color: #10181B;} }
button.gevaar{color: var(--laat);}
button:disabled{opacity: .5;}
button.link{border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; font-size: inherit;}

.snel{display: flex; gap: 8px; margin-bottom: 12px;}
.snel input{flex: 3;}
.snel select{flex: 2;}
.snel button{flex: none; width: 44px; border: 0; border-radius: var(--straal); background: var(--accent); color: #fff; font-size: 22px;}
@media (max-width: 520px){ .snel{flex-wrap: wrap;} .snel input{flex-basis: 100%;} }

.tabs{display: flex; gap: 4px; border-bottom: 1px solid var(--lijn); margin-bottom: 12px;}
.tabs a{padding: 8px 12px; text-decoration: none; color: var(--inkt-zacht); border-bottom: 2px solid transparent; margin-bottom: -1px;}
.tabs a.actief{color: var(--accent); border-color: var(--accent); font-weight: 600;}

/* ---------- groepen en actieregels ---------- */
.groep{margin: 18px 0;}
.groep > h2{font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-zacht); margin-bottom: 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;}
.groep.laat > h2{color: var(--laat);}
.groep.mijlpaal > h2{text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--inkt);}
.groep.afgerond{opacity: .6;}
.mijlpaal-naam{border: 0; background: none; padding: 0; font-weight: 600; color: var(--inkt);}
.week.huidig > h2{color: var(--accent);}
.teller{font-size: 12px; background: var(--accent-zacht); color: var(--accent); border-radius: 999px; padding: 1px 8px; font-weight: 600; letter-spacing: 0;}

ul.acties, ul.lijst{list-style: none; margin: 0; padding: 0; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--straal); overflow: hidden;}
ul.acties:empty{display: none;}
.actie{display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--lijn); cursor: pointer;}
.actie:first-child{border-top: 0;}
.actie:hover{background: var(--accent-zacht);}
.vink{flex: none; width: 24px; height: 24px; margin-top: 1px; border: 2px solid var(--inkt-zacht); border-radius: 50%; background: none; color: #fff; font-size: 13px; line-height: 1; padding: 0;}
.prio-hoog .vink{border-color: var(--laat);}
.is-klaar .vink{background: var(--accent); border-color: var(--accent);}
.is-klaar .actie-titel{text-decoration: line-through; color: var(--inkt-zacht);}
.actie-hoofd{flex: 1; min-width: 0;}
.actie-titel{overflow-wrap: anywhere;}
.prio{color: var(--laat); font-weight: 700; margin-right: 4px;}
.actie-meta{display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 13px; color: var(--inkt-zacht);}
.actie-meta:empty{display: none;}
.actie-wie{flex: none; display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; max-width: 40%;}

.projectlabel{display: inline-flex; align-items: center; gap: 5px;}
.projectlabel::before{content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--kleur);}
.duur{white-space: nowrap;}
.tag{white-space: nowrap; color: var(--accent);}
.deadline.laat{color: var(--laat); font-weight: 600;}
.deadline.nu{color: var(--nu); font-weight: 600;}
.status{font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--accent-zacht); color: var(--accent);}
.status.s-wacht{background: var(--laat-zacht); color: var(--laat);}

.wie{display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--papier); border: 1px solid var(--lijn); margin: 1px 2px 1px 0; white-space: nowrap;}
.wie.ik{background: var(--accent-zacht); border-color: transparent; color: var(--accent);}
.wie.team{background: color-mix(in srgb, var(--kleur) 15%, transparent); border-color: transparent; color: var(--inkt);}
.wie.team::before{content: '👥 '; font-size: 10px;}
.wie.rond{width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;}
.wie.rond.groot{width: 36px; height: 36px; font-size: 13px; flex: none;}

.mijlpaal-regel{display: block; padding: 8px 12px; margin-bottom: 6px; border-left: 4px solid var(--kleur); background: var(--vlak); border-radius: var(--straal); color: var(--inkt); text-decoration: none;}
.mijlpaal-regel b{font-weight: 600;}
.lopend{margin-top: 6px;}

/* ---------- lijsten (mensen) ---------- */
ul.lijst li{display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--lijn); cursor: pointer;}
ul.lijst li:first-child{border-top: 0;}
ul.lijst li:hover{background: var(--accent-zacht);}
ul.lijst li > div{flex: 1; min-width: 0;}
ul.lijst li.inactief{opacity: .55;}
.kleurblok{width: 14px; height: 36px; border-radius: 4px; flex: none;}

/* ---------- projectkaarten ---------- */
.kaarten{display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;}
.kaart{display: block; background: var(--vlak); border: 1px solid var(--lijn); border-top: 5px solid var(--kleur); border-radius: var(--straal); padding: 14px; color: var(--inkt); text-decoration: none;}
.kaart:hover{border-color: var(--kleur);}
.kaart-kop{display: flex; justify-content: space-between; gap: 8px; align-items: flex-start;}
.kaart h2{font-size: 18px;}
.st-gepauzeerd, .st-afgerond, .st-gearchiveerd{opacity: .75;}
.afgekapt{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 0;}
.voortgang{height: 6px; background: var(--papier); border-radius: 3px; margin: 12px 0 8px; overflow: hidden;}
.voortgang span{display: block; height: 100%; background: var(--kleur);}
.kaart-meta{display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--inkt-zacht);}

/* ---------- tijdlijn ---------- */
.tijdlijn-wrap{overflow-x: auto; border: 1px solid var(--lijn); border-radius: var(--straal); background: var(--vlak);}
.tijdlijn{border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13px;}
.tijdlijn th, .tijdlijn td{border-left: 1px solid var(--lijn); padding: 6px; text-align: center; height: 40px;}
.tijdlijn thead th{font-weight: 600; border-bottom: 1px solid var(--lijn);}
.tijdlijn tbody th{text-align: left; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; border-left: 5px solid var(--kleur); position: sticky; left: 0; background: var(--vlak); z-index: 1;}
.tijdlijn tbody th a{color: var(--inkt); text-decoration: none;}
.tijdlijn tbody tr + tr > *{border-top: 1px solid var(--lijn);}
.tijdlijn td.in-periode{background: color-mix(in srgb, var(--kleur) 18%, transparent);}
.tijdlijn .huidig{box-shadow: inset 0 0 0 2px var(--accent);}
.tijdlijn td{vertical-align: top;}
.tijdlijn{table-layout: fixed;}
.tijdlijn:not(.ingezoomd) thead th:first-child{width: 150px;}
.tijdlijn.ingezoomd{width: max-content; min-width: 100%;}
.tijdlijn.ingezoomd .weekgroep{height: auto; padding: 4px 6px; border-bottom: 1px solid var(--lijn);}
.tijdlijn.ingezoomd thead th.dag{height: auto; padding: 4px 2px; font-weight: 500;}
.tijdlijn.ingezoomd .weekend{background: color-mix(in srgb, var(--inkt) 5%, transparent);}
.tijdlijn.ingezoomd td.in-periode.weekend{background: color-mix(in srgb, var(--kleur) 10%, color-mix(in srgb, var(--inkt) 5%, transparent));}
.tijdlijn.ingezoomd .weekstart{border-left: 2px solid var(--lijn);}
.tijdlijn.ingezoomd td.dag{padding: 6px 3px;}
.tijdlijn td.te-vol{background: var(--laat-zacht);}
.tijdlijn.ingezoomd td{height: 64px; padding: 8px 4px;}
.tijdlijn.ingezoomd .blok{height: 16px;}
.tijdlijn tr.agenda-rij > *{border-top: 1px dashed var(--lijn) !important; height: auto; padding-top: 5px; padding-bottom: 5px; background: color-mix(in srgb, var(--inkt) 3%, var(--vlak));}
.tijdlijn tr.agenda-rij th{font-weight: 400;}
.tijdlijn tr.met-agenda > *{padding-bottom: 4px;}
.dagbalk{position: relative; height: 14px; border-radius: 3px; background: color-mix(in srgb, var(--inkt) 7%, transparent);}
.afspraak, .afspraak-voorbeeld{background: color-mix(in srgb, var(--inkt) 45%, transparent); border-radius: 2px;}
.afspraak{position: absolute; top: 0; bottom: 0; min-width: 2px;}
.afspraak-voorbeeld{display: inline-block; width: 16px; height: 9px; vertical-align: middle;}
.afspraak.s-voorlopig, .afspraak-voorbeeld.s-voorlopig{background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--inkt) 45%, transparent) 0 3px, transparent 3px 6px);}
.afspraak.s-afwezig, .afspraak-voorbeeld.s-afwezig{background: color-mix(in srgb, var(--inkt) 70%, transparent);}
.afspraak.s-elders, .afspraak-voorbeeld.s-elders{background: color-mix(in srgb, var(--accent) 50%, transparent);}
.weekbalk{height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--inkt) 7%, transparent); overflow: hidden;}
.weekbalk span{display: block; height: 100%; background: color-mix(in srgb, var(--inkt) 45%, transparent);}
.agenda-cel .vak-uren{margin-top: 2px;}
.afspraken{list-style: none; margin: 4px 0 0; padding: 0; text-align: left; font-size: 11px; line-height: 1.25;}
.afspraken li{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 0;}
.afspraken li + li{border-top: 1px dotted var(--lijn);}
.afspraken .tijd{color: var(--inkt-zacht); font-variant-numeric: tabular-nums;}
.afspraken .locatie{display: block; color: var(--inkt-zacht); overflow: hidden; text-overflow: ellipsis;}
.afspraken li.s-voorlopig{font-style: italic;}
.afspraken li.s-afwezig{font-weight: 600;}
.fout-hint{background: var(--laat-zacht); color: var(--laat);}
.agenda-sectie{margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--lijn);}
.agenda-sectie input[name=url]{font-family: ui-monospace, Menlo, monospace; font-size: 13px;}
.tijdlijn td.te-vol .vak-uren{color: var(--laat); font-weight: 600;}
.tijdlijn tfoot > tr > *{border-top: 2px solid var(--lijn); font-weight: 600; font-size: 12px; white-space: nowrap;}
.tijdlijn tfoot th{text-align: left; position: sticky; left: 0; background: var(--vlak);}
.blokken{display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin-top: 2px;}
.blok{display: inline-block; height: 14px; padding: 0; border: 0; border-radius: 3px; background: var(--kleur, var(--accent)); vertical-align: middle; cursor: pointer;}
.blok:hover, .blok:focus-visible{outline: 2px solid var(--inkt); outline-offset: 1px;}
.blok.te-laat{outline: 2px solid var(--laat); outline-offset: 1px;}
.blok.hoog{box-shadow: inset 0 -3px 0 var(--laat);}
.blok.onbekend{background: transparent; border: 1.5px dashed var(--kleur, var(--inkt-zacht));}
.blok.voorbeeld{background: var(--inkt-zacht); cursor: default; height: 10px;}
.blok.voorbeeld.onbekend{background: transparent; border-color: var(--inkt-zacht);}
.legenda{line-height: 1.9;}
.vak-uren{font-size: 11px; color: var(--inkt-zacht); margin-top: 3px;}
.tijdlijn tr.tussenkop th{position: static; border-left: 0; background: var(--papier); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--inkt-zacht); height: auto; padding: 4px 8px;}
.tijdlijn.ingezoomd tbody th .klein{font-weight: 400; overflow: hidden; text-overflow: ellipsis;}
.ruit{color: var(--kleur); font-size: 16px;}
.aantal{display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 999px; background: var(--inkt); color: var(--vlak); font-weight: 600; font-size: 11px;}

/* ---------- venster (detail en formulieren): midden in beeld, op de telefoon schermvullend ---------- */
#sluier{position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40;}
#paneel{
  position: fixed; inset: 0; z-index: 50;
  background: var(--papier); overflow-y: auto; opacity: 0; transform: scale(.97); transition: opacity .18s ease, transform .18s ease, visibility .18s;
  padding: max(16px, env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
  visibility: hidden;
}
body.paneel-open #paneel{opacity: 1; transform: none; visibility: visible;}
@media (min-width: 760px){
  #paneel{
    inset: auto; top: 50%; left: 50%; width: min(640px, calc(100% - 48px)); max-height: calc(100vh - 80px);
    transform: translate(-50%, -48%); border-radius: 12px; padding: 22px 26px 26px; box-shadow: 0 18px 50px rgba(0,0,0,.25);
  }
  body.paneel-open #paneel{transform: translate(-50%, -50%);}
}
body.paneel-open #sluier{opacity: 1; pointer-events: auto;}
body.paneel-open{overflow: hidden;}
.paneel-kop{display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px;}
.paneel-kop h2{font-family: var(--serif); font-size: 22px;}
.sluit{border: 0; background: none; font-size: 20px; padding: 4px 8px; color: var(--inkt-zacht);}

.formulier{display: flex; flex-direction: column; gap: 12px;}
.formulier label, .formulier .veld{display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--inkt-zacht);}
.formulier label > input, .formulier label > select, .formulier label > textarea{font-size: 16px; color: var(--inkt);}
.formulier label.vinkje, label.vinkje{flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: var(--inkt);}
.formulier h3{font-size: 16px;}
.rij2{display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.knoppen{display: flex; gap: 8px; justify-content: space-between; margin-top: 6px;}
.knoppen button{padding: 10px 16px; font-size: 15px;}

.segment{display: inline-flex; border: 1px solid var(--lijn); border-radius: var(--straal); overflow: hidden; background: var(--vlak); flex-wrap: wrap;}
.segment label{flex-direction: row !important; flex: 1;}
.segment input{position: absolute; opacity: 0; pointer-events: none;}
.segment span{display: block; padding: 7px 12px; font-size: 14px; color: var(--inkt); cursor: pointer; text-align: center; width: 100%;}
.segment label + label span{border-left: 1px solid var(--lijn);}
.segment input:checked + span{background: var(--accent); color: #fff;}
@media (prefers-color-scheme: dark){ .segment input:checked + span{color: #10181B;} }
.segment input:focus-visible + span{outline: 2px solid var(--accent); outline-offset: -2px;}
.segment.klein span{padding: 5px 10px; font-size: 13px;}

.chips{display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px;}
.chip input{position: absolute; opacity: 0; pointer-events: none;}
.chip span{display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt); font-size: 14px; cursor: pointer;}
.chip span[style]{border-left: 4px solid var(--kleur);}
.chip input:checked + span{background: var(--accent); border-color: var(--accent); color: #fff;}
@media (prefers-color-scheme: dark){ .chip input:checked + span{color: #10181B;} }
.chip input:focus-visible + span{outline: 2px solid var(--accent);}
.wie-kiezer .klein{margin-top: 2px;}

.kleuren{display: flex; gap: 8px; flex-wrap: wrap;}
.kleuren input{position: absolute; opacity: 0;}
.kleuren span{display: block; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 3px solid transparent;}
.kleuren input:checked + span{border-color: var(--inkt); box-shadow: inset 0 0 0 2px var(--papier);}

.opmerkingen{margin-top: 26px; border-top: 1px solid var(--lijn); padding-top: 14px;}
.opmerkingen h3{font-size: 16px; margin-bottom: 8px;}
.opmerkingen ul{list-style: none; padding: 0; margin: 0 0 10px;}
.opmerkingen li{padding: 8px 0; border-bottom: 1px solid var(--lijn);}
.opm-tekst{white-space: pre-wrap; overflow-wrap: anywhere;}
.opm-nieuw{display: flex; gap: 8px; align-items: flex-end;}

/* ---------- inloggen ---------- */
.inloggen{max-width: 360px; margin: 10vh auto 0; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; padding: 24px;}
.inloggen button{padding: 11px; border-radius: var(--straal); border: 0;}

/* ---------- knop nieuw en meldingen ---------- */
.nieuw-knop{
  display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--papier); font-size: 14px; font-weight: 600; padding: 6px 14px 6px 11px;
}
.nieuw-knop span[aria-hidden]{font-size: 19px; line-height: 1; font-weight: 400;}
#melding{
  position: fixed; left: 50%; bottom: calc(var(--navhoogte) + env(safe-area-inset-bottom) + 84px); transform: translate(-50%, 20px);
  background: var(--inkt); color: var(--papier); padding: 10px 16px; border-radius: var(--straal); font-size: 14px;
  opacity: 0; pointer-events: none; transition: all .2s; z-index: 60; max-width: calc(100% - 32px);
}
#melding.zichtbaar{opacity: 1; transform: translate(-50%, 0);}
#melding.fout{background: var(--laat); color: #fff;}
@media (min-width: 760px){ #melding{bottom: 32px;} }

/* wachtwoord tonen */
.ww{position: relative; display: block;}
.ww input{padding-right: 76px !important; font-size: 16px; color: var(--inkt);}
.ww-toon{position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--accent); font-size: 14px; padding: 6px 10px;}

/* sub-acties (afvinklijst in het actievenster) */
.subacties{margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--lijn);}
.subacties h3 .klein{font-weight: 400; margin-left: 6px;}
.subacties ul{list-style: none; margin: 8px 0; padding: 0;}
.subacties li{display: flex; align-items: center; gap: 6px; padding: 3px 0;}
.subacties li + li{border-top: 1px dotted var(--lijn);}
.subacties input[type=checkbox]{width: 18px; height: 18px; flex: none; accent-color: var(--accent);}
.subacties input[type=text]{flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; padding: 5px 6px; border-radius: 6px; font-size: 15px;}
.subacties input[type=text]:hover, .subacties input[type=text]:focus{border-color: var(--lijn); background: var(--vlak); outline: none;}
.subacties li.is-klaar input[type=text]{text-decoration: line-through; color: var(--inkt-zacht);}
.subacties li button{border: 0; background: none; color: var(--inkt-zacht); padding: 4px 6px; border-radius: 6px; font-size: 13px;}
.subacties li button:hover:not(:disabled){background: var(--accent-zacht); color: var(--inkt);}
.subacties li button:disabled{opacity: .25; cursor: default;}
.sub-nieuw{display: flex; gap: 6px;}
.sub-nieuw input{flex: 1; padding: 7px 10px; border: 1px solid var(--lijn); border-radius: var(--straal); background: var(--vlak);}
.sub-nieuw button{padding: 0 14px; border: 0; border-radius: var(--straal); background: var(--accent); color: var(--papier); font-size: 18px;}
.sub-teller.alles-klaar{color: var(--accent);}

/* actievenster: breed, kolommen naast elkaar (smal scherm: onder elkaar) */
.actie-kolommen, .kol{display: flex; flex-direction: column; gap: 12px;}
@media (min-width: 1000px){
  #paneel.breed{width: min(1280px, calc(100% - 48px)); max-height: calc(100vh - 32px); padding: 18px 26px 20px;}
  #paneel.breed .paneel-kop{margin-bottom: 10px;}
  .actie-raster{display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 30px; align-items: start;}
  .actie-raster.nieuw{grid-template-columns: 1fr;}
  .actie-kolommen{display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; align-items: start;}
  .actie-zij{border-left: 1px solid var(--lijn); padding-left: 26px; max-height: calc(100vh - 120px); overflow-y: auto;}
  .actie-zij .subacties{margin-top: 0; padding-top: 0; border-top: 0;}
  .actie-zij .opmerkingen{margin-top: 20px;}
}