* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; font-family: var(--lettertype); font-size: var(--tekst-m); line-height: var(--regelhoogte); color: var(--kleur-tekst); background: var(--kleur-achtergrond); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--ruimte-3); }
h1 { font-size: var(--tekst-xl); } h2 { font-size: var(--tekst-l); } h3 { font-size: var(--tekst-m); }
p { margin: 0 0 var(--ruimte-3); }
a { color: var(--kleur-primair); }
:focus-visible { outline: 3px solid var(--kleur-focus); outline-offset: 2px; }
.zacht { color: var(--kleur-tekst-zacht); }
.klein { font-size: var(--tekst-s); }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* knoppen en invoer */
button, .knop { font: inherit; min-height: var(--aanraak); padding: 0 var(--ruimte-4); border-radius: var(--rond-klein); border: 1px solid var(--kleur-lijn); background: var(--kleur-vlak); color: var(--kleur-tekst); cursor: pointer; display: inline-flex; align-items: center; gap: var(--ruimte-2); text-decoration: none; }
button:hover, .knop:hover { border-color: var(--kleur-primair); }
button.primair { background: var(--kleur-primair); border-color: var(--kleur-primair); color: #fff; font-weight: 600; }
button.primair:hover { background: var(--kleur-primair-hover); }
button.gevaar { color: var(--kleur-fout); border-color: var(--kleur-fout); }
button.stil { border-color: transparent; background: transparent; }
button[disabled] { opacity: .55; cursor: not-allowed; }
input, select, textarea { font: inherit; min-height: var(--aanraak); width: 100%; padding: var(--ruimte-2) var(--ruimte-3); border: 1px solid var(--kleur-lijn); border-radius: var(--rond-klein); background: var(--kleur-vlak); color: var(--kleur-tekst); }
textarea { min-height: 120px; resize: vertical; }
input[type=checkbox] { width: 20px; min-height: 20px; height: 20px; }
label { display: block; font-weight: 600; margin-bottom: var(--ruimte-1); }
.veld { margin-bottom: var(--ruimte-4); }
.rij { display: flex; gap: var(--ruimte-3); align-items: center; flex-wrap: wrap; }
.rij > .groei { flex: 1 1 200px; }
.rij select { width: auto; max-width: 100%; }
label.normaal { font-weight: 400; }
.hulp { font-size: var(--tekst-s); color: var(--kleur-tekst-zacht); margin-top: var(--ruimte-1); }

/* kaarten en meldingen */
.kaart { background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--rond); padding: var(--ruimte-5); box-shadow: var(--schaduw); margin-bottom: var(--ruimte-5); }
.melding { padding: var(--ruimte-3) var(--ruimte-4); border-radius: var(--rond-klein); margin-bottom: var(--ruimte-4); border: 1px solid transparent; }
.melding.fout { background: var(--kleur-fout-licht); border-color: var(--kleur-fout); color: var(--kleur-fout); }
.melding.goed { background: var(--kleur-goed-licht); border-color: var(--kleur-goed); color: var(--kleur-goed); }
.melding.let-op { background: var(--kleur-let-op-licht); border-color: var(--kleur-let-op); color: var(--kleur-let-op); }
.leeg { text-align: center; padding: var(--ruimte-6); color: var(--kleur-tekst-zacht); }

/* inloggen */
.geheim { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--tekst-l); letter-spacing: .08em; background: var(--kleur-primair-licht); padding: var(--ruimte-3); border-radius: var(--rond-klein); word-break: break-all; user-select: all; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ruimte-2); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--tekst-m); }
.codes span { background: var(--kleur-primair-licht); padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--rond-klein); text-align: center; }

/* indeling met zijbalk */
.schil { display: grid; grid-template-columns: var(--zijbalk) minmax(0, 1fr); min-height: 100vh; }
.zijbalk { background: var(--kleur-vlak); border-right: 1px solid var(--kleur-lijn); padding: var(--ruimte-4); display: flex; flex-direction: column; gap: var(--ruimte-2); position: sticky; top: 0; height: 100vh; }
.zijbalk .merk { display: flex; align-items: center; gap: var(--ruimte-2); font-weight: 700; font-size: var(--tekst-l); color: var(--kleur-primair); padding: var(--ruimte-2); margin-bottom: var(--ruimte-3); }
.nav { display: flex; flex-direction: column; gap: var(--ruimte-1); }
.nav a { display: flex; align-items: center; gap: var(--ruimte-3); min-height: var(--aanraak); padding: 0 var(--ruimte-3); border-radius: var(--rond-klein); color: var(--kleur-tekst); text-decoration: none; font-weight: 500; }
.nav a:hover { background: var(--kleur-achtergrond); }
.nav a[aria-current=page] { background: var(--kleur-primair-licht); color: var(--kleur-primair); font-weight: 700; }
.nav svg, .knop svg, button svg { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zijbalk .onderkant { margin-top: auto; display: flex; flex-direction: column; gap: var(--ruimte-2); }
.inhoud { padding: var(--ruimte-5) var(--ruimte-6); width: 100%; min-width: 0; }   /* de hele breedte van het scherm */
/* pagina's met vooral formulieren en tekst blijven leesbaar smal */
.inhoud[data-pagina=instellingen], .inhoud[data-pagina=projecten], .inhoud[data-pagina=mensen] { max-width: 1200px; }
.kop { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-3); flex-wrap: wrap; margin-bottom: var(--ruimte-4); }
.kop h1 { margin: 0; }
.broodkruimel { font-size: var(--tekst-s); color: var(--kleur-tekst-zacht); margin-bottom: var(--ruimte-2); }

/* tabellen */
.tabelkader { overflow-x: auto; background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--rond); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--ruimte-3) var(--ruimte-4); border-bottom: 1px solid var(--kleur-lijn); vertical-align: top; }
th { font-size: var(--tekst-s); color: var(--kleur-tekst-zacht); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tr.klikbaar { cursor: pointer; } tr.klikbaar:hover td { background: var(--kleur-achtergrond); }
td.nr { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }

/* labels voor status */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: var(--tekst-s); font-weight: 600; background: var(--kleur-achtergrond); border: 1px solid var(--kleur-lijn); white-space: nowrap; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--status-nieuw); }
.badge.nieuw::before { background: var(--status-nieuw); } .badge.te_doen::before { background: var(--status-te_doen); }
.badge.bezig::before { background: var(--status-bezig); } .badge.validatie::before { background: var(--status-validatie); }
.badge.klaar::before { background: var(--status-klaar); }

/* filterknoppen */
.filters { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; margin-bottom: var(--ruimte-4); }
.filters button { min-height: 38px; border-radius: 999px; }
.filters button[aria-pressed=true] { background: var(--kleur-primair); border-color: var(--kleur-primair); color: #fff; }
.filters .teller { opacity: .75; font-variant-numeric: tabular-nums; }

/* bord */
.bord { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: var(--ruimte-3); overflow-x: auto; align-items: start; }
.bord .kolom { background: #edf1f6; border-radius: var(--rond); padding: var(--ruimte-3); min-height: 140px; }
.bord .kolom.over { outline: 3px dashed var(--kleur-primair); }
.bord .kolom h3 { display: flex; justify-content: space-between; font-size: var(--tekst-s); text-transform: uppercase; letter-spacing: .04em; color: var(--kleur-tekst-zacht); }
.kaartje { background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-left: 4px solid var(--status-nieuw); border-radius: var(--rond-klein); padding: var(--ruimte-2) var(--ruimte-3); margin-bottom: var(--ruimte-2); cursor: grab; box-shadow: var(--schaduw); }
.kaartje .nr { font-size: var(--tekst-s); color: var(--kleur-tekst-zacht); font-weight: 600; }
.kaartje .eig { font-size: var(--tekst-s); color: var(--kleur-tekst-zacht); }
.kaartje.nieuw { border-left-color: var(--status-nieuw); } .kaartje.te_doen { border-left-color: var(--status-te_doen); }
.kaartje.bezig { border-left-color: var(--status-bezig); } .kaartje.validatie { border-left-color: var(--status-validatie); } .kaartje.klaar { border-left-color: var(--status-klaar); }

/* backlog */
.item { background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--rond); margin-bottom: var(--ruimte-2); }
.item > .item-kop { display: flex; gap: var(--ruimte-3); align-items: center; padding: var(--ruimte-3) var(--ruimte-4); cursor: pointer; }
.item .sleutel { font-weight: 700; color: var(--kleur-primair); white-space: nowrap; }
.item .titel { flex: 1; }
.item .detail { border-top: 1px solid var(--kleur-lijn); padding: var(--ruimte-4); }
.taak { display: flex; gap: var(--ruimte-3); align-items: center; padding: var(--ruimte-1) 0; }
.taak .naam { flex: 1; }
.taak select { width: auto; min-height: 36px; }
.nieuwregel { display: flex; gap: var(--ruimte-2); margin-bottom: var(--ruimte-4); }

/* importvoorbeeld */
.tellers { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--ruimte-3); margin-bottom: var(--ruimte-4); }
.teller-blok { background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--rond); padding: var(--ruimte-3) var(--ruimte-4); }
.teller-blok b { display: block; font-size: var(--tekst-xl); }
.verschil del { background: var(--kleur-fout-licht); text-decoration: line-through; padding: 0 4px; border-radius: 3px; }
.verschil ins { background: var(--kleur-goed-licht); text-decoration: none; padding: 0 4px; border-radius: 3px; }

/* telefoon */
@media (max-width: 860px) {
  .schil { grid-template-columns: minmax(0, 1fr); }
  .zijbalk { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--ruimte-2) var(--ruimte-3); gap: var(--ruimte-1); }
  .zijbalk .merk { margin: 0; }
  .nav { display: grid; grid-template-columns: repeat(3, 1fr); flex: 1 1 100%; order: 3; }
  .nav a { flex-direction: column; justify-content: center; gap: 0; min-height: 56px; padding: var(--ruimte-1) var(--ruimte-2); font-size: var(--tekst-s); text-align: center; }
  .zijbalk .onderkant { order: 4; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 0; }
  .inhoud { padding: var(--ruimte-4); }
  .bord { grid-template-columns: repeat(5, 78vw); }
}
@media (prefers-reduced-motion: no-preference) { button, .nav a { transition: background .15s, border-color .15s; } }

.qr { width: 220px; max-width: 100%; margin: var(--ruimte-3) 0; border: 1px solid var(--kleur-lijn); border-radius: var(--rond-klein); overflow: hidden; background: #fff; }
.qr svg { display: block; width: 100%; height: auto; }

/* planning: tabel links, balken rechts (opzet zoals de Activiteiten-pagina in een planningstool) */
.planningkaart { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.planningkaart:hover { border-color: var(--kleur-primair); }
.plan-balk { display: flex; gap: var(--ruimte-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--ruimte-3); }
.plan-balk .filters { margin: 0; }
.plan-balk select, .plan-balk input[type=search] { width: auto; min-width: 170px; }
.plan-balk button, .plan-balk .filters button { min-height: 38px; }
.vinkje { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; }
.plan-kader { position: relative; overflow: auto; height: max(320px, calc(100vh - 380px)); min-height: 320px; background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--rond-klein); font-size: var(--tekst-s); }
.plan-kop { position: sticky; top: 0; z-index: 4; display: flex; width: max-content; background: var(--kleur-achtergrond); border-bottom: 1px solid var(--kleur-lijn); }
.plan-links-kop { position: sticky; left: 0; z-index: 5; display: flex; align-items: flex-end; height: 46px; background: var(--kleur-achtergrond); border-right: 1px solid var(--kleur-lijn); font-weight: 700; color: var(--kleur-tekst-zacht); }
.plan-links-kop .kol { padding: 0 6px 6px; }
.plan-lijf { display: flex; width: max-content; position: relative; }
.plan-links { position: sticky; left: 0; z-index: 3; background: var(--kleur-vlak); border-right: 1px solid var(--kleur-lijn); }
.plan-gantt, .plan-tijdkop { display: block; flex: none; }
.plan-rij { position: absolute; left: 0; right: 0; display: flex; align-items: center; border-bottom: 1px solid #eef1f5; cursor: default; }
.plan-rij.act { cursor: pointer; color: var(--kleur-tekst-zacht); }       /* grijs: de klant plant, dit is alleen lezen */
.plan-rij.act:hover, .plan-rij.item:hover { background: var(--kleur-primair-licht); }
.plan-rij.gekozen { background: var(--kleur-primair-licht); box-shadow: inset 3px 0 0 var(--kleur-primair); }
.plan-rij.wbs { background: #f1f4f9; font-weight: 700; color: var(--kleur-tekst); }
.plan-rij.item { cursor: pointer; color: var(--kleur-tekst); }              /* normale kleur: dit is ons werk */
.plan-rij .kol { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.plan-rij .kol.groei, .plan-links-kop .kol.groei { flex: 1 1 auto; min-width: 0; }
.kol.rechts { text-align: right; font-variant-numeric: tabular-nums; }
.kol.nr { font-variant-numeric: tabular-nums; }
.plan-pijl { min-height: 22px; width: 22px; padding: 0; border: 0; background: transparent; justify-content: center; }
.plan-naam { display: flex; align-items: center; gap: 6px; }
.mijl { color: var(--kleur-tekst); }
.tellerbadge, .let-op-badge { padding: 0 7px; font-size: 12px; }
.tellerbadge::before { display: none; }
.let-op-badge { background: var(--kleur-let-op-licht); border-color: var(--kleur-let-op); color: var(--kleur-let-op); }
.let-op-badge::before { display: none; }
.item-naam .sleutel { font-weight: 700; color: var(--kleur-primair); }
.kritiek-tekst { color: var(--kleur-fout); font-weight: 700; }
/* balken */
.tk-bg { fill: var(--kleur-achtergrond); }
.tk-lijn { stroke: var(--kleur-lijn); }
.tk-tekst { fill: var(--kleur-tekst); font-size: 12px; font-weight: 700; }
.tk-tekst.klein { font-size: 10.5px; font-weight: 400; fill: var(--kleur-tekst-zacht); }
.tk-tekst.weekend { fill: var(--kleur-fout); }
.rooster { stroke: #eef1f5; } .rooster.maand { stroke: var(--kleur-lijn); }
.statuslijn { stroke: var(--kleur-fout); stroke-width: 1.5; stroke-dasharray: 4 3; }
.rij-gekozen { fill: var(--kleur-primair-licht); }
.bal-vlak { fill: #a9bff0; } .bal-voortgang { fill: var(--kleur-primair); }
.bal.klaar .bal-vlak { fill: #6f8dd8; }
.bal.kritiek .bal-vlak { fill: #f0a9a2; } .bal.kritiek .bal-voortgang { fill: #b3261e; }
.bal-mijlpaal { fill: var(--kleur-tekst); }
.bal-wbs { fill: var(--kleur-tekst); }
.bal-tekst { fill: var(--kleur-tekst-zacht); font-size: 11px; }
.item-bal { fill: var(--status-te_doen); opacity: .85; } .item-bal.bezig { fill: var(--status-bezig); } .item-bal.klaar { fill: var(--status-klaar); }
.item-bal.gewijzigd { stroke: var(--kleur-fout); stroke-width: 2; }
.relatie { fill: none; stroke: #8794a6; stroke-width: 1; } .relatie.actief { stroke: var(--kleur-primair); stroke-width: 1.8; }
.rel-pijl { fill: #8794a6; }
/* detailpaneel */
.plan-detail { margin-top: var(--ruimte-3); background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--rond-klein); padding: var(--ruimte-3) var(--ruimte-4); }
.plan-detail-kop { display: flex; gap: var(--ruimte-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--ruimte-3); }
.plan-detail-kop .filters { margin: 0 0 0 auto; }
.dl { display: grid; gap: 2px; }
.dl-regel { display: flex; gap: var(--ruimte-3); align-items: center; padding: 4px 0; border-bottom: 1px solid #eef1f5; flex-wrap: wrap; }
.dl-regel .groei { flex: 1 1 200px; }
.dl-k { width: 190px; color: var(--kleur-tekst-zacht); }
.twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ruimte-5); }
.controles summary { cursor: pointer; font-weight: 600; display: flex; gap: var(--ruimte-2); align-items: center; }
ul.compact { margin: 0 0 var(--ruimte-3); padding-left: var(--ruimte-5); }
@media (max-width: 700px) { .plan-kader { height: 60vh; } .dl-k { width: 100%; } }
.dl-regel .sleutel { font-weight: 700; color: var(--kleur-primair); white-space: nowrap; }
.planning-chip { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ===== Scrum: backlog, sprints, taakbord, burndown ===== */
.backlog-balk { display: flex; gap: var(--ruimte-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--ruimte-3); }
.backlog-balk input[type=search] { width: auto; min-width: 220px; flex: 1 1 220px; }
.backlog-balk select { width: auto; }
.nieuw-item select { width: auto; } .nieuw-item .smal, input.smal { width: 84px; flex: none; text-align: right; }
.item.epic { border-left: 4px solid var(--status-validatie); }
.epic-pijl { min-height: 28px; width: 28px; padding: 0; border: 0; background: transparent; justify-content: center; }
.item-kop { flex-wrap: wrap; }
.soort { font-size: var(--tekst-s); font-weight: 600; padding: 0 8px; border-radius: 4px; background: #eef1f5; color: var(--kleur-tekst); border: 1px solid var(--kleur-lijn); white-space: nowrap; }
.soort-epic { background: #efe8fa; border-color: #cdbbea; } .soort-bug { background: var(--kleur-fout-licht); border-color: #e9b9b5; }
.soort-feature { background: var(--kleur-primair-licht); border-color: #b9d9ee; } .soort-spike { background: var(--kleur-let-op-licht); border-color: #ecd29b; }
.prio { font-size: var(--tekst-s); font-weight: 700; padding: 0 8px; border-radius: 4px; white-space: nowrap; }
.prio-hoog { background: var(--kleur-let-op-licht); color: var(--kleur-let-op); } .prio-urgent { background: var(--kleur-fout-licht); color: var(--kleur-fout); }
.sprintchip { font-size: var(--tekst-s); padding: 0 8px; border-radius: 999px; border: 1px solid var(--kleur-primair); color: var(--kleur-primair-hover); white-space: nowrap; }
.statuspunt { width: 12px; height: 12px; border-radius: 50%; background: var(--status-nieuw); flex: none; }
.statuspunt.bezig { background: var(--status-bezig); } .statuspunt.klaar { background: var(--status-klaar); }
.tag { font: inherit; font-size: var(--tekst-s); min-height: 0; padding: 0 10px; border-radius: 999px; border: 1px solid var(--kleur-lijn); background: #eef1f5; color: var(--kleur-tekst); display: inline-flex; align-items: center; white-space: nowrap; }
button.tag { min-height: 32px; cursor: pointer; opacity: .75; } button.tag.aan { opacity: 1; font-weight: 700; box-shadow: inset 0 0 0 2px var(--kleur-tekst); }
.tag-blauw { background: var(--kleur-primair-licht); border-color: #b9d9ee; } .tag-groen { background: var(--kleur-goed-licht); border-color: #b7dfc7; }
.tag-geel { background: var(--kleur-let-op-licht); border-color: #ecd29b; } .tag-rood { background: var(--kleur-fout-licht); border-color: #e9b9b5; } .tag-paars { background: #efe8fa; border-color: #cdbbea; }
.tags { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; align-items: center; }
.tag-nieuw { display: inline-flex; gap: var(--ruimte-2); } .tag-nieuw input { width: 150px; min-height: 32px; }
.tags-blok h3, .detail h3 { margin: var(--ruimte-4) 0 var(--ruimte-2); font-size: var(--tekst-m); }
.velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--ruimte-3); }
.veldje label { display: block; font-size: var(--tekst-s); font-weight: 600; color: var(--kleur-tekst-zacht); margin-bottom: 2px; }
.taak-kop, .taak-rij { display: flex; gap: var(--ruimte-2); align-items: center; flex-wrap: wrap; }
.taak-kop { font-size: var(--tekst-s); font-weight: 600; color: var(--kleur-tekst-zacht); }
.taak-kop .naam, .taak-rij .naam { flex: 1 1 200px; min-width: 140px; }
.taak-kop .eigenaar, .taak-rij .eigenaar { width: 140px; } .taak-kop .smal { width: 84px; text-align: right; } .taak-kop .datum, .taak-rij .datum { width: 138px; } .taak-kop .status-kol { width: 130px; }
.taak-rij input, .taak-rij select { min-height: 36px; }
.taak-rij select { width: 124px; } .taak-rij select.eigenaar { width: 140px; }
.taak-rij { padding: 2px 0; border-bottom: 1px solid #eef1f5; }
@media (max-width: 860px) { .taak-kop { display: none; } }
.opmerking { padding: var(--ruimte-2) 0; border-bottom: 1px solid #eef1f5; }
.opmerking-kop { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; }
.opmerking-tekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.opmerkingen textarea { min-height: 64px; }
.dialoog { border: 1px solid var(--kleur-lijn); border-radius: var(--rond); padding: var(--ruimte-5); max-width: min(560px, 92vw); color: var(--kleur-tekst); background: var(--kleur-vlak); }
.dialoog::backdrop { background: rgba(10, 28, 49, .45); }
a.knop { min-height: var(--aanraak); }
/* sprints */
.sprint { margin-bottom: var(--ruimte-4); }
.sprint-kop { display: flex; gap: var(--ruimte-3); align-items: center; flex-wrap: wrap; } .sprint-kop h2 { margin: 0; }
.sprintstatus.actief::before { background: var(--status-bezig); } .sprintstatus.afgerond::before { background: var(--status-klaar); } .sprintstatus.gepland::before { background: var(--status-te_doen); }
.sprint-afgerond { opacity: .85; }
.sprint-cijfers { display: flex; gap: var(--ruimte-4); flex-wrap: wrap; margin: var(--ruimte-2) 0; color: var(--kleur-tekst-zacht); }
.sprint-cijfers b { color: var(--kleur-tekst); }
.voortgang { height: 10px; border-radius: 999px; background: #e3e8ef; overflow: hidden; margin-bottom: var(--ruimte-3); }
.voortgang-vul { height: 100%; background: var(--status-klaar); }
.sprint-acties { margin-bottom: var(--ruimte-3); }
.sprint-nieuw { margin-bottom: var(--ruimte-4); }
/* taakbord met rijen per backlog-item */
.bord2 { display: grid; gap: var(--ruimte-2); overflow-x: auto; align-items: stretch; }
.bord2.rijen { grid-template-columns: 200px repeat(5, minmax(170px, 1fr)); }
.bord2.kolommen { grid-template-columns: repeat(5, minmax(170px, 1fr)); }
.bord2 > .bord-kop { display: contents; }
.bord-kop > div { font-size: var(--tekst-s); text-transform: uppercase; letter-spacing: .04em; color: var(--kleur-tekst-zacht); font-weight: 700; padding: var(--ruimte-1) var(--ruimte-2); }
.bord2 .cel { background: #edf1f6; border-radius: var(--rond-klein); padding: var(--ruimte-2); min-height: 56px; }
.bord2 .cel.over { outline: 3px dashed var(--kleur-primair); }
.bord-itemcel { padding: var(--ruimte-2); font-size: var(--tekst-s); } .bord-itemcel b { color: var(--kleur-primair); }
.kaart-meta { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; align-items: center; }
.te-laat { color: var(--kleur-fout); font-weight: 700; }
.kaartje select.klein { width: 100%; margin-top: var(--ruimte-1); min-height: 34px; }
/* burndown */
.grafiekkader { background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--rond); padding: var(--ruimte-3); margin-bottom: var(--ruimte-3); }
svg.grafiek { width: 100%; height: auto; display: block; }
svg.grafiek .raster { stroke: #e3e8ef; stroke-width: 1; } svg.grafiek .weekend { fill: #f1f4f9; }
svg.grafiek .as { fill: var(--kleur-tekst-zacht); font-size: 12px; }
svg.grafiek .lijn-ideaal { fill: none; stroke: var(--kleur-tekst-zacht); stroke-width: 2; stroke-dasharray: 6 5; }
svg.grafiek .lijn-werkelijk { fill: none; stroke: var(--kleur-primair); stroke-width: 3; }
svg.grafiek .punt { fill: var(--kleur-primair); stroke: #fff; stroke-width: 1.5; }
.legenda { display: flex; gap: var(--ruimte-4); flex-wrap: wrap; font-size: var(--tekst-s); color: var(--kleur-tekst-zacht); }
.legenda i { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--kleur-primair); vertical-align: middle; margin-right: 6px; }
.legenda i.sleutel-ideaal { border-top: 3px dashed var(--kleur-tekst-zacht); } .legenda i.sleutel-weekend { height: 12px; border: 0; background: #f1f4f9; border: 1px solid var(--kleur-lijn); }

/* project kiezen: kop bovenaan het menu van een project */
.projectkop { display: flex; flex-direction: column; gap: var(--ruimte-2); padding: var(--ruimte-2) var(--ruimte-1) var(--ruimte-3); margin-bottom: var(--ruimte-2); border-bottom: 1px solid var(--kleur-lijn); }
.projectkop .terug { display: inline-flex; align-items: center; gap: var(--ruimte-1); font-size: var(--tekst-s); color: var(--kleur-tekst-zacht); text-decoration: none; }
.projectkop .terug:hover { color: var(--kleur-primair); }
.projectkop .terug svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.projectkop .projectnaam { font-size: var(--tekst-l); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.projectkop select { width: 100%; }
.zijbalk .onderkant > a { color: var(--kleur-tekst-zacht); padding: 0 var(--ruimte-2); display: flex; align-items: center; gap: var(--ruimte-2); min-height: 44px; }
.zijbalk .onderkant > a svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 800px) { .projectkop { flex: 1 1 100%; order: 2; border-bottom: 0; padding: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--ruimte-3); } }

/* menu links inklappen tot alleen icoontjes (alleen op brede schermen; op de telefoon staat het menu al compact) */
.menuknop { align-self: flex-end; min-height: 36px; padding: 0 var(--ruimte-2); }
.menuknop svg { width: 20px; height: 20px; }
html[data-menu=smal] .menuknop svg { transform: rotate(180deg); }
@media (min-width: 801px) {
  html[data-menu=smal] .schil { grid-template-columns: 76px minmax(0, 1fr); }
  html[data-menu=smal] .zijbalk { padding: var(--ruimte-3) var(--ruimte-2); align-items: stretch; }
  html[data-menu=smal] .zijbalk .tekst, html[data-menu=smal] .zijbalk .alleen-breed { display: none; }
  html[data-menu=smal] .zijbalk .merk { justify-content: center; padding: var(--ruimte-1); }
  html[data-menu=smal] .menuknop { align-self: center; }
  html[data-menu=smal] .nav a, html[data-menu=smal] .zijbalk .onderkant a, html[data-menu=smal] .zijbalk .onderkant button { justify-content: center; padding: 0; }
  html[data-menu=smal] .projectkop { align-items: center; padding: var(--ruimte-1) 0 var(--ruimte-2); }
  html[data-menu=smal] .projectkop .projectnaam { font-size: var(--tekst-s); }
}
@media (max-width: 800px) { .menuknop { display: none; } }

/* backlog: slepen om iets onder een epic te zetten of de volgorde te wijzigen */
.item-kop[draggable=true] { cursor: grab; }
.item .greep { color: var(--kleur-tekst-zacht); font-size: 1.1rem; line-height: 1; margin-right: calc(var(--ruimte-2) * -1); user-select: none; }
.item.wordt-gesleept { opacity: .45; }
.item-kop.drop-voor { box-shadow: 0 -3px 0 0 var(--kleur-primair); }
.item-kop.drop-na { box-shadow: 0 3px 0 0 var(--kleur-primair); }
.item-kop.drop-in { background: var(--kleur-primair-licht); outline: 2px solid var(--kleur-primair); outline-offset: -2px; border-radius: var(--rond); }
.sleepzone { display: none; border: 2px dashed var(--kleur-lijn); border-radius: var(--rond); padding: var(--ruimte-3); text-align: center; color: var(--kleur-tekst-zacht); }
.sleept .sleepzone { display: block; }
.sleepzone.drop-uit { border-color: var(--kleur-primair); background: var(--kleur-primair-licht); color: var(--kleur-tekst); }
.sleephint { margin: 0 0 var(--ruimte-3); }

/* uitklapmenu (bijvoorbeeld "Planning beheren") */
.menu { position: relative; margin-left: auto; }
.menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--ruimte-2); min-height: var(--aanraak); padding: 0 var(--ruimte-4); border: 1px solid var(--kleur-lijn); border-radius: var(--rond-klein); background: var(--kleur-vlak); font-weight: 600; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--kleur-primair-licht); border-color: var(--kleur-primair); }
.menu-lijst { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 310px; display: flex; flex-direction: column; gap: 2px; padding: var(--ruimte-2); background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--rond); box-shadow: 0 8px 24px rgba(15, 30, 55, .16); }
.menu-lijst > button, .menu-lijst > a { justify-content: flex-start; border: 0; background: transparent; text-align: left; width: 100%; text-decoration: none; color: var(--kleur-tekst); display: flex; align-items: center; gap: var(--ruimte-3); }
.menu-lijst > button:hover, .menu-lijst > a:hover { background: var(--kleur-primair-licht); }
.menu-lijst svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* controles tussen planning en backlog: één slanke regel */
.kaart.controles { padding: var(--ruimte-2) var(--ruimte-4); margin-bottom: var(--ruimte-3); }
.kaart.controles summary { font-size: var(--tekst-s); }

/* popup: een venster bovenop de pagina; popups stapelen */
.popup { width: min(980px, 96vw); max-height: 92vh; padding: 0; border: 1px solid var(--kleur-lijn); border-radius: var(--rond); background: var(--kleur-vlak); color: var(--kleur-tekst); box-shadow: 0 16px 48px rgba(10, 28, 49, .35); }
.popup[open] { display: flex; flex-direction: column; }
.popup::backdrop { background: rgba(10, 28, 49, .4); }
.popup-kop { display: flex; align-items: center; gap: var(--ruimte-3); padding: var(--ruimte-3) var(--ruimte-4); border-bottom: 1px solid var(--kleur-lijn); flex: none; }
.popup-titel { margin: 0; flex: 1; font-size: var(--tekst-l); min-width: 0; overflow-wrap: anywhere; }
.popup-sluit { margin-left: auto; font-size: 1.2rem; }
.popup-lijf { overflow: auto; padding: var(--ruimte-4); flex: 1; }
.tekstknop { min-height: 0; padding: 0; border: 0; background: none; color: var(--kleur-primair); text-decoration: underline; font-weight: 600; }
.dl-regel.klikbaar { cursor: pointer; }
.dl-regel.klikbaar:hover { background: var(--kleur-primair-licht); }
.kaartje[role=button] { cursor: pointer; }
@media (max-width: 700px) { .popup { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; } }

/* Hoogte: gebruik de ruimte die er is (net als de breedte). De planning vult het scherm, borden worden zo hoog als het scherm. */
@media (min-width: 861px) {
  .inhoud:has(.plan-kader) { height: 100vh; overflow: auto; display: flex; flex-direction: column; box-sizing: border-box; }
  .inhoud:has(.plan-kader) > .pagina { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .pagina:has(> .plan-kader) > * { flex: none; }
  .pagina:has(> .plan-kader) > .plan-kader { flex: 1 1 0; height: auto; min-height: 320px; }
  .bord .kolom { min-height: calc(100vh - 240px); }
  .bord2.kolommen .cel { min-height: calc(100vh - 300px); }
}

/* team in het menu */
.teamkop { display: flex; flex-direction: column; gap: var(--ruimte-2); margin-top: var(--ruimte-2); padding-top: var(--ruimte-2); border-top: 1px dashed var(--kleur-lijn); }
.teamkop .terug { display: inline-flex; align-items: center; gap: var(--ruimte-1); font-size: var(--tekst-s); color: var(--kleur-tekst-zacht); text-decoration: none; }
.teamkop .terug:hover { color: var(--kleur-primair); }
.teamkop .terug svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.teamkop .teamnaam { display: flex; align-items: center; gap: var(--ruimte-2); font-weight: 700; color: var(--kleur-primair); overflow-wrap: anywhere; }
.teamkop .teamnaam svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.teamkop select { width: 100%; }
html[data-menu=smal] .teamkop { align-items: center; }

/* teams */
.teamraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--ruimte-4); align-items: start; }
.teamkaart h2 { margin: 0; } .teamkaart h2 a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--ruimte-2); }
.teamkaart h2 svg { width: 22px; height: 22px; stroke: var(--kleur-primair); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.keuze { display: flex; gap: var(--ruimte-3); align-items: flex-start; margin: 0 0 var(--ruimte-3); font-weight: 400; }
.keuze input { margin-top: 4px; flex: none; }
.keuze .hulp { display: block; }
.teamchip { font-size: var(--tekst-s); padding: 0 8px; border-radius: 999px; background: #e8efff; border: 1px solid #c5d4f5; white-space: nowrap; color: var(--kleur-tekst); }
.teamchip.geen { background: #f1f1f1; border-color: var(--kleur-lijn); color: var(--kleur-tekst-zacht); }

/* sprintpagina: links de backlog van het team, rechts de sprints */
.sprintpagina { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: var(--ruimte-5); align-items: start; }
.sprintbacklog { position: sticky; top: var(--ruimte-4); max-height: calc(100vh - 2 * var(--ruimte-4)); display: flex; flex-direction: column; overflow: hidden; margin-bottom: 0; }
.sprintbacklog h2 { margin-bottom: var(--ruimte-1); }
.sprintbacklog-lijst { overflow: auto; flex: 1 1 auto; min-height: 120px; margin-top: var(--ruimte-2); }
.sprintbacklog.drop-uit { outline: 3px dashed var(--kleur-primair); outline-offset: -3px; background: var(--kleur-primair-licht); }
.sb-item { display: flex; gap: var(--ruimte-2); align-items: flex-start; padding: var(--ruimte-2); border: 1px solid var(--kleur-lijn); border-left: 4px solid var(--kleur-primair); border-radius: var(--rond-klein); background: var(--kleur-vlak); margin-bottom: var(--ruimte-2); cursor: grab; }
.sb-item:hover { box-shadow: var(--schaduw); }
.sb-item .greep, .sprint-regel .greep { color: var(--kleur-tekst-zacht); user-select: none; }
.sprintlijst .kop { margin-bottom: var(--ruimte-3); }
.sprint.drop-in { outline: 3px dashed var(--kleur-primair); outline-offset: -3px; background: var(--kleur-primair-licht); }
.sprint-regel { cursor: grab; }
.sprintdoel { margin: 0 0 var(--ruimte-3); }
.sprint-leeg { border: 2px dashed var(--kleur-lijn); border-radius: var(--rond-klein); padding: var(--ruimte-4); text-align: center; }
.sleept-sprint .sprint:not(.sprint-afgerond) .sprint-leeg { border-color: var(--kleur-primair); }
.afgerond-lijst summary { cursor: pointer; font-weight: 600; margin: var(--ruimte-3) 0; }
@media (max-width: 1000px) { .sprintpagina { grid-template-columns: minmax(0, 1fr); } .sprintbacklog { position: static; max-height: 60vh; } }

/* planning: knop om een activiteit in de backlog te zetten */
.plan-bl { display: flex; align-items: center; justify-content: center; }
.plan-plus { min-height: 22px; width: 28px; height: 22px; padding: 0; border-radius: 999px; border: 1px solid var(--kleur-primair); color: var(--kleur-primair); background: var(--kleur-vlak); font-weight: 700; line-height: 1; justify-content: center; }
.plan-plus:hover, .plan-plus:focus-visible { background: var(--kleur-primair); color: #fff; }
.plan-toevoegmenu { z-index: 1000; background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--rond-klein); box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: var(--ruimte-2); display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.plan-toevoegmenu button { justify-content: flex-start; width: 100%; }
.plan-toevoegmenu .klein { padding: 2px var(--ruimte-2) var(--ruimte-1); }

/* werk naar een ander team slepen */
.teamstrook { display: none; position: fixed; z-index: 50; left: calc(var(--zijbalk) + var(--ruimte-4)); right: var(--ruimte-4); bottom: var(--ruimte-4); gap: var(--ruimte-3); align-items: center; flex-wrap: wrap; padding: var(--ruimte-3); background: var(--kleur-vlak); border: 1px solid var(--kleur-primair); border-radius: var(--rond); box-shadow: 0 8px 28px rgba(0,0,0,.22); }
.sleept-backlog .teamstrook { display: flex; }
.teamdoel { display: inline-flex; align-items: center; gap: var(--ruimte-2); flex: 1 1 140px; justify-content: center; min-height: 52px; padding: 0 var(--ruimte-4); border: 2px dashed var(--kleur-lijn); border-radius: var(--rond); font-weight: 600; }
.teamdoel svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.teamdoel.drop-uit { border-color: var(--kleur-primair); background: var(--kleur-primair-licht); }
.keuzeknoppen { display: flex; flex-direction: column; gap: var(--ruimte-2); align-items: stretch; }
.item.buiten-team .item-kop { opacity: .6; }
@media (max-width: 860px) { .teamstrook { left: var(--ruimte-3); right: var(--ruimte-3); } }

/* sprints en plannings open en dicht klappen */
details.sprint > summary, details.planningkaart > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--ruimte-3); flex-wrap: wrap; }
details.sprint > summary::-webkit-details-marker, details.planningkaart > summary::-webkit-details-marker { display: none; }
details.sprint > summary::before, details.planningkaart > summary::before { content: "▸"; color: var(--kleur-tekst-zacht); width: 1em; flex: none; }
details.sprint[open] > summary::before, details.planningkaart[open] > summary::before { content: "▾"; }
details.sprint > summary h2, details.planningkaart > summary h2 { margin: 0; }
details.sprint[open] > summary, details.planningkaart[open] > summary { margin-bottom: var(--ruimte-3); }
.sprint-samen { margin-left: auto; }
details.sprint[open] .sprint-samen { display: none; }
.planningkaart .planning-lijf { display: flex; flex-direction: column; gap: var(--ruimte-2); }
.planning-lijf-kop { display: flex; gap: var(--ruimte-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--ruimte-3); }
.planning-lijf-kop .knop { margin-left: auto; }
details.planningkaart { margin-bottom: var(--ruimte-3); }
details.planningkaart[open] .sprint-samen { display: none; }

/* een lang menu (met teams) blijft bereikbaar op een laag scherm */
@media (min-width: 861px) { .zijbalk { overflow-y: auto; overscroll-behavior: contain; } }
.sprint-regel { flex-wrap: nowrap; } .sprint-regel .groei { min-width: 0; }

/* inlogscherm: grijs paneel links, wit rechts (kleuren, handschrift en zeshoeken van www.ald2.nl) */
@font-face { font-family: 'Permanent Marker'; src: url('/lettertypen/PermanentMarker-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
.inlogpagina { min-height: 100vh; display: grid; grid-template-columns: minmax(300px, 5fr) 6fr; background: #fff; }
.inlog-paneel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: var(--ruimte-6); padding: 48px; color: var(--kleur-tekst); background: var(--kleur-grijs); }
.inlog-paneel > :not(.inlog-netwerk) { position: relative; z-index: 1; }
.inlog-merk img { display: block; height: 52px; width: auto; }
.inlog-kop { font-family: 'Permanent Marker', var(--lettertype); font-size: 2.1rem; line-height: 1.3; font-weight: 400; letter-spacing: .01em; margin: 0 0 var(--ruimte-5); max-width: 16ch; }
.inlog-uitleg { align-self: flex-start; max-width: 100%; padding: var(--ruimte-5) 28px; background: var(--kleur-grijs-licht); border: 1px solid #e4e4e4; border-radius: 16px; box-shadow: 0 6px 20px rgba(10, 28, 49, .05); }
.inlog-uitleg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ruimte-3); }
.inlog-uitleg li { display: flex; gap: var(--ruimte-3); align-items: flex-start; }
.inlog-uitleg .vink { flex: none; width: 26px; height: 24px; background: var(--merk-oranje); color: #fff; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); display: inline-flex; align-items: center; justify-content: center; font-size: var(--tekst-s); font-weight: 700; }
.inlog-voet { margin: 0; font-size: var(--tekst-s); color: var(--kleur-tekst-zacht); }
/* decoratief netwerk met zachte beweging */
.inlog-netwerk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.nw-lijn { stroke: #c9c9c4; stroke-width: 1.5; stroke-dasharray: 5 7; stroke-linecap: round; animation: nw-stroom 14s linear infinite; }
.nw-rood { fill: var(--merk-rood); } .nw-oranje { fill: var(--merk-oranje); } .nw-roze { fill: var(--merk-roze); }
.nw-groen { fill: var(--merk-groen); } .nw-blauw { fill: var(--kleur-primair); } .nw-geel { fill: var(--merk-geel); }
.nw-tros { transform-box: fill-box; transform-origin: center; }
.nw-zweef1 { animation: nw-zweef 7s ease-in-out infinite; }
.nw-zweef2 { animation: nw-zweef 9s ease-in-out -3s infinite; }
@keyframes nw-zweef { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(6px, -12px) rotate(8deg); } }
@keyframes nw-stroom { to { stroke-dashoffset: -96; } }
@media (prefers-reduced-motion: reduce) { .nw-lijn, .nw-zweef1, .nw-zweef2 { animation: none; } }
.inlog-kolom { display: flex; align-items: center; justify-content: center; padding: var(--ruimte-6) var(--ruimte-4); background: #fff; }
.inlog { width: 100%; max-width: 440px; margin: 0; background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: 16px; box-shadow: 0 12px 32px rgba(10, 28, 49, .08); padding: 40px 36px; }
.inlog h1 { font-family: 'Permanent Marker', var(--lettertype); font-weight: 400; font-size: 1.9rem; letter-spacing: .01em; margin-bottom: var(--ruimte-2); }
.inlog .inlog-sub { margin-bottom: var(--ruimte-5); }
.inlog input { min-height: 48px; }
.inlog form > button.primair, .inlog > form > .rij > button.primair { min-height: 48px; }
.inlog form > button.primair { width: 100%; }
.inlog button.primair { border-radius: 999px; }
@media (max-width: 860px) {
  .inlogpagina { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .inlog-paneel { padding: var(--ruimte-4) var(--ruimte-5); }
  .inlog-uitleg, .inlog-voet { display: none; }
  .inlog-netwerk { opacity: .7; }
  .inlog-kolom { align-items: flex-start; padding-top: var(--ruimte-5); }
  .inlog { padding: var(--ruimte-5); border-radius: var(--rond); box-shadow: var(--schaduw); }
}

/* overzicht van project en team */
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--ruimte-3); margin-bottom: var(--ruimte-5); }
.tegel { display: flex; flex-direction: column; gap: 2px; padding: var(--ruimte-3) var(--ruimte-4); background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-left: 5px solid var(--kleur-lijn); border-radius: var(--rond); text-decoration: none; color: var(--kleur-tekst); }
.tegel:hover { border-color: var(--kleur-primair); }
.tegel b { font-size: var(--tekst-xl); line-height: 1.1; }
.tegel span { font-size: var(--tekst-s); color: var(--kleur-tekst-zacht); }
.tegel.status-nieuw { border-left-color: var(--status-nieuw); } .tegel.status-klaar_voor_schatting { border-left-color: var(--status-te_doen); }
.tegel.status-klaar_voor_sprint { border-left-color: var(--status-validatie); } .tegel.status-in_sprint { border-left-color: var(--status-bezig); } .tegel.status-klaar { border-left-color: var(--status-klaar); }
.tweekolom { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--ruimte-4); align-items: start; }
ul.schoon { list-style: none; margin: 0 0 var(--ruimte-3); padding: 0; } ul.schoon li { padding: var(--ruimte-1) 0; border-bottom: 1px solid var(--kleur-lijn); }
.doelenlijst { list-style: none; margin: 0 0 var(--ruimte-3); padding: 0; }
.doelenlijst li { display: flex; gap: var(--ruimte-2); align-items: baseline; padding: var(--ruimte-1) 0; }
.doelenlijst li.klaar { color: var(--kleur-tekst-zacht); text-decoration: line-through; }
.vinkje-klein { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--kleur-lijn); display: inline-flex; align-items: center; justify-content: center; font-size: var(--tekst-s); color: var(--status-klaar); }

/* mensen-matrix */
table.matrix td.midden, table.matrix th.midden { text-align: center; }
table.matrix tr.groep td { background: var(--kleur-achtergrond); font-weight: 600; color: var(--kleur-tekst-zacht); padding-top: var(--ruimte-3); }
table.matrix tr.zacht td { color: var(--kleur-tekst-zacht); }
table.matrix select { min-height: 36px; padding-top: 0; padding-bottom: 0; }

/* backlog in statuskolommen */
.weergavekeuze { display: inline-flex; border: 1px solid var(--kleur-lijn); border-radius: var(--rond-klein); overflow: hidden; }
.weergavekeuze .weergave { border: 0; border-radius: 0; min-height: 38px; }
.weergavekeuze .weergave.aan { background: var(--kleur-primair-licht); color: var(--kleur-primair); font-weight: 600; }
.bl-kolommen { display: flex; gap: var(--ruimte-3); align-items: flex-start; overflow-x: auto; padding-bottom: var(--ruimte-3); }
.bl-kolom { flex: 1 1 180px; min-width: 170px; background: var(--kleur-achtergrond); border: 1px solid var(--kleur-lijn); border-top: 4px solid var(--kleur-lijn); border-radius: var(--rond); }
.bl-kolom:not([open]) { flex: 0 0 auto; min-width: 0; }
.bl-kolom.status-nieuw { border-top-color: var(--status-nieuw); } .bl-kolom.status-klaar_voor_schatting { border-top-color: var(--status-te_doen); }
.bl-kolom.status-klaar_voor_sprint { border-top-color: var(--status-validatie); } .bl-kolom.status-in_sprint { border-top-color: var(--status-bezig); } .bl-kolom.status-klaar { border-top-color: var(--status-klaar); }
.bl-kolom.uitgelicht { box-shadow: 0 0 0 3px var(--kleur-primair-licht); }
.bl-kolom.drop-kolom { background: var(--kleur-primair-licht); }
.bl-kolom-kop { display: flex; gap: var(--ruimte-2); align-items: center; padding: var(--ruimte-2) var(--ruimte-3); cursor: pointer; font-weight: 600; list-style: none; }
.bl-kolom-kop::-webkit-details-marker { display: none; }
.bl-kolom-kop::before { content: '▾'; color: var(--kleur-tekst-zacht); } .bl-kolom:not([open]) > .bl-kolom-kop::before { content: '▸'; }
.bl-kolom:not([open]) > .bl-kolom-kop .bl-kolom-naam { writing-mode: vertical-rl; }
.bl-kolom .teller { background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: 999px; padding: 0 8px; font-size: var(--tekst-s); }
.bl-kolom-items { display: flex; flex-direction: column; gap: var(--ruimte-2); padding: 0 var(--ruimte-2) var(--ruimte-2); min-height: 60px; }
.leeg-kolom { padding: var(--ruimte-2); }
.bl-kaart { background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--rond-klein); padding: var(--ruimte-2) var(--ruimte-3); cursor: pointer; box-shadow: var(--schaduw); }
.bl-kaart[draggable=true] { cursor: grab; }
.bl-kaart:hover { border-color: var(--kleur-primair); }
.bl-kaart.wordt-gesleept { opacity: .4; }
.bl-kaart.drop-voor { box-shadow: 0 -3px 0 0 var(--kleur-primair); } .bl-kaart.drop-na { box-shadow: 0 3px 0 0 var(--kleur-primair); }
.bl-kaart-kop { display: flex; gap: var(--ruimte-2); align-items: center; font-size: var(--tekst-s); }
.bl-kaart-titel { margin: 2px 0 4px; line-height: 1.35; }
.bl-kaart-voet { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: var(--tekst-s); }
.statuschip { font-size: var(--tekst-s); padding: 0 8px; border-radius: 999px; border: 1px solid var(--kleur-lijn); white-space: nowrap; }
.statuschip.status-klaar_voor_sprint { border-color: var(--status-validatie); color: var(--status-validatie); } .statuschip.status-in_sprint { border-color: var(--status-bezig); color: var(--status-bezig); } .statuschip.status-klaar { border-color: var(--status-klaar); color: var(--status-klaar); }
.bl-kolom:not([open]) > .bl-kolom-kop .klein { display: none; }
@media (min-width: 861px) { .bl-kolom-items { max-height: calc(100vh - 300px); overflow-y: auto; } }
/* planning: een activiteit naar een team slepen */
.plan-rij[draggable=true] { cursor: grab; }
.plan-rij.wordt-gesleept { opacity: .5; }

/* sprintdoelen */
.doelenblok { margin: var(--ruimte-2) 0 var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-3); background: var(--kleur-achtergrond); border-radius: var(--rond-klein); }
.doelenblok h3 { margin-bottom: var(--ruimte-1); }
.doel-regel { display: flex; gap: var(--ruimte-2); align-items: center; padding: 3px 0; }
.doel-regel.klaar .doel-titel { text-decoration: line-through; color: var(--kleur-tekst-zacht); }
.doel-titel { text-align: left; padding: 0 4px; min-height: 28px; font-weight: 600; }
.doelkeuze { max-width: 180px; }
.bord-doelen { margin-bottom: var(--ruimte-3); } .bord-doelen > summary { cursor: pointer; } .bord-doelen .doelenblok { background: transparent; padding: 0; }
.bord-kop > div.dicht { padding: var(--ruimte-1) 0; }
.bord-kop > div.dicht .kolomnaam { writing-mode: vertical-rl; font-size: 11px; }
.bord-kop .kolom-pijl { min-height: 22px; width: 22px; padding: 0; border: 0; background: transparent; }
.bord2 .cel.dicht { min-height: 56px; display: flex; align-items: flex-start; justify-content: center; padding: var(--ruimte-1); }
.bord-doelen .doelenblok h3 { display: none; }
.bord-kop > div.dicht { display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* mijn werk */
.mw-belangrijk { display: flex; gap: var(--ruimte-2); align-items: center; flex-wrap: wrap; padding: var(--ruimte-1) 0; border-bottom: 1px solid var(--kleur-lijn); }
.mw-kaart.te-laat-kaart { border-left: 4px solid var(--kleur-fout); }
.mw-kaart.isklaar { opacity: .7; }
.mw-kaart.wordt-gesleept { opacity: .4; }
.mw-kaart.drop-voor { box-shadow: 0 -3px 0 0 var(--kleur-primair); } .mw-kaart.drop-na { box-shadow: 0 3px 0 0 var(--kleur-primair); }
.mw-kaart[draggable=true] { cursor: grab; }

/* de balk bovenaan het rechterdeel */
.bovenbalk { position: sticky; top: 0; z-index: 20; display: flex; gap: var(--ruimte-4); align-items: center; flex-wrap: wrap; margin: calc(-1 * var(--ruimte-5)) calc(-1 * var(--ruimte-6)) var(--ruimte-4); padding: var(--ruimte-2) var(--ruimte-6); background: var(--kleur-vlak); border-bottom: 1px solid var(--kleur-lijn); min-height: 52px; }
.bb-links { display: flex; gap: var(--ruimte-2); align-items: center; flex-wrap: wrap; }
.bb-links svg { width: 18px; height: 18px; stroke: var(--kleur-tekst-zacht); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bb-pijl { color: var(--kleur-tekst-zacht); }
.bb-keuze select { min-height: 36px; padding-top: 0; padding-bottom: 0; width: auto; max-width: 260px; font-weight: 600; }
.bb-werkbalk { flex: 1 1 320px; display: flex; justify-content: flex-end; }
.bb-werkbalk .backlog-balk, .bb-werkbalk .plan-balk { margin: 0; width: 100%; justify-content: flex-end; }
.bb-werkbalk input[type=search] { min-width: 180px; }
@media (max-width: 860px) { .bovenbalk { margin: calc(-1 * var(--ruimte-4)) calc(-1 * var(--ruimte-4)) var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-4); position: static; } .bb-werkbalk { justify-content: flex-start; } }

/* rijen zoals een backlog-item (sprint, sprintdoelen): #, naam, wie, punten, status, voortgang */
.bl-rij { display: grid; grid-template-columns: 88px minmax(0, 2.4fr) minmax(0, 1fr) 60px 90px 120px minmax(0, 1fr) 36px; gap: 8px; align-items: center; padding: 6px 8px; background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--rond-klein); margin-bottom: 4px; font-size: var(--tekst-s); }
.bl-rij--kop { background: transparent; border: 0; font-weight: 700; color: var(--kleur-tekst-zacht); margin-bottom: 0; padding-top: 2px; padding-bottom: 2px; }
.bl-rij:not(.bl-rij--kop):hover { background: var(--kleur-primair-licht); }
.bl-rij--doel { grid-template-columns: 32px minmax(0, 2.4fr) minmax(0, 1fr) 70px minmax(0, 1fr); }
.bl-rij .bl-c-nr { display: inline-flex; gap: 4px; align-items: center; } .bl-rij .bl-c-naam { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.bl-rij .rechts { text-align: right; } .bl-rij .bl-c-acties { text-align: right; }
.bl-c-balk { display: flex; gap: 6px; align-items: center; } .bl-c-balk .voortgang.klein { flex: 1; height: 8px; margin: 0; }
.bl-rij .doelkeuze { max-width: 100%; min-height: 30px; padding-top: 0; padding-bottom: 0; }
.bl-rij .doel-titel { font-weight: 600; }
@media (max-width: 1100px) { .bl-rij { grid-template-columns: 80px minmax(0, 2fr) 60px 90px 36px; } .bl-rij > :nth-child(3), .bl-rij > :nth-child(6), .bl-rij > :nth-child(7) { display: none; } .bl-rij--doel { grid-template-columns: 32px minmax(0, 2fr) 70px; } .bl-rij--doel > :nth-child(3), .bl-rij--doel > :nth-child(5) { display: none; } }

/* presentatiestand van het taakbord (volledig scherm) */
body.bs-presentatie main.inhoud { background: var(--kleur-achtergrond); padding: var(--ruimte-4) var(--ruimte-5); overflow: auto; }
body.bs-presentatie .bovenbalk .bb-links { display: none; }
body.bs-presentatie .bord2 { font-size: 1.15rem; } body.bs-presentatie .kaartje { padding: var(--ruimte-3) var(--ruimte-4); }
body.bs-presentatie .kaartje select { display: none; }
body.bs-presentatie .bord-kop > div { font-size: var(--tekst-m); }
/* in een sprintkaart is minder ruimte: #, naam, punten, status, doel, acties */
.sprint .bl-rij { grid-template-columns: 76px minmax(0, 2fr) 48px 84px minmax(90px, 1fr) 32px; }
.sprint .bl-rij > :nth-child(3), .sprint .bl-rij > :nth-child(6) { display: none; }
.sprint .bl-rij--doel { grid-template-columns: 32px minmax(0, 2fr) minmax(0, 1fr) 60px minmax(0, 1fr); }
.sprint .bl-rij--doel > :nth-child(3), .sprint .bl-rij--doel > :nth-child(5) { display: block; }