/* Frissere, responsive laag over style.css */
:root {
  --merk: #811b05;
  --merk-licht: #a3260b;
  --achtergrond: #f4f5f7;
  --kaart: #fff;
  --rand: #e2e5ea;
  --tekst: #1c2228;
  --zacht: #66707b;
  --schaduw: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
  --balk: 52px;
  --merk-zacht: #f7ebe8;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--achtergrond);
  color: var(--tekst);
  font-size: 15px;
  margin: 0;
}

/* ---------- Appbalk ---------- */
/* Vast bovenin, ook als je in het brede rooster naar rechts scrollt */
body { padding-top: var(--balk); }
.appbalk {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: var(--balk); box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 12px;
  background: var(--merk); color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.appbalk .titel { font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; text-decoration: none; }
.appbalk .acties { display: flex; align-items: center; gap: 4px; }
.appbalk a.icoon, .appbalk summary {
  color: #fff; text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 10px; border-radius: 8px; list-style: none;
}
.appbalk summary::-webkit-details-marker { display: none; }
.appbalk a.icoon:hover, .appbalk summary:hover, .appbalk details[open] > summary { background: rgba(255,255,255,.15); }
.appbalk .fa { font-size: 18px; }
.appbalk summary.actief { background: #fff; color: var(--merk); }

details.menu { position: relative; }
.menu-inhoud {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 220px; max-height: 70vh; overflow-y: auto;
  background: var(--kaart); color: var(--tekst);
  border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.2);
  padding: 6px 0;
}
.menu-inhoud.rechts { left: auto; right: 0; }
#kolommen-menu .menu-inhoud { left: auto; right: 0; }
.menu-inhoud label, .menu-inhoud a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; color: var(--tekst); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.menu-inhoud label:hover, .menu-inhoud a:hover { background: #f1eee6; }
.menu-inhoud button {
  margin: 6px 14px; padding: 6px 12px; border: 1px solid var(--rand);
  background: #fff; border-radius: 6px; cursor: pointer;
}

/* ---------- Tabel ---------- */
table.rooster { border: 0; background: var(--kaart); font-size: 14px; }
table.rooster thead th { top: var(--balk); background: #fff !important; color: var(--tekst); font-weight: 600; box-shadow: inset 0 -2px 0 var(--merk); }
table.rooster td { border-bottom: 1px solid #edf0f3; background: #fff; }
table.rooster tr:nth-child(even) td { background: #fafbfc; }
table.rooster tr:hover td { background: #fbf4f2; }
table.rooster tbody th { background: var(--merk-zacht); color: var(--merk); border-bottom: 1px solid #efdcd7; }
.kop-icoon { color: #a7afb8; margin-left: 6px; text-decoration: none; }
.kop-icoon:hover { color: var(--merk); }
/* Namenvakken en naamlabels in de huisstijl in plaats van donkergrijs */
.rooster .select-pure__select { background: #fff; border-color: var(--rand); box-shadow: none; }
/* Namen als gewone tekst; het kruisje om iemand weg te halen verschijnt pas bij aanwijzen.
   Op een touchscreen kun je niet aanwijzen, daar blijft een licht kruisje staan. */
.rooster .select-pure__selected-label { background: none; color: var(--tekst); padding: 1px 0; font-size: 14px; }
.rooster .select-pure__selected-label i { color: #b5bcc4; }
.rooster .select-pure__selected-label i:hover { color: var(--merk); }
@media (hover: hover) {
  .rooster .select-pure__selected-label i { visibility: hidden; }
  .rooster .select-pure__select:hover .select-pure__selected-label i,
  .rooster .select-pure__select--opened .select-pure__selected-label i { visibility: visible; }
}
.rooster input[type=text] { border: 1px solid transparent; border-radius: 4px; padding: 3px 4px; background: transparent; font: inherit; }
.rooster input[type=text]:hover, .rooster input[type=text]:focus { border-color: var(--rand); background: #fff; }

#naar-vandaag { border-radius: 24px; font-size: 15px; }

/* ---------- Kaartweergave voor kleine schermen ---------- */
.rooster .open-pagina, .rooster .klap { display: none; }
@media (max-width: 760px) { .rooster .open-pagina, .rooster .klap { display: inline; } }
@media (max-width: 760px) {
  .appbalk .tekst { display: none; }
  table.rooster, table.rooster tbody { display: block; width: auto; white-space: normal; table-layout: auto; }
  table.rooster thead { display: none; }
  table.rooster tr {
    display: block; margin: 12px 10px; background: var(--kaart);
    border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.12); overflow: hidden;
  }
  table.rooster tbody th {
    display: block; position: static; text-align: left;
    padding: 10px 14px; font-size: 16px;
  }
  table.rooster td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 14px; background: var(--kaart) !important; width: auto;
  }
  table.rooster td::before {
    content: attr(data-label); color: #666; font-size: 13px; flex: 0 0 40%;
  }
  table.rooster td > * { flex: 1 1 auto; min-width: 0; text-align: right; }
  table.rooster td input[type=text] { width: 100%; text-align: right; font-size: 16px; }
  table.rooster td input[type=checkbox] { flex: 0 0 auto; width: 20px; height: 20px; }
  table.rooster tr:hover td { background: var(--kaart) !important; }
  /* Ingeklapt: alleen datum en tijd; één kaart tegelijk is uitgeklapt (zie rooster.php) */
  table.rooster tr:not(.open) { display: flex; align-items: center; margin: 6px 10px; cursor: pointer; }
  table.rooster tr:not(.open) th { flex: 1 1 auto; }
  table.rooster tr:not(.open) td:not(.tijdcel) { display: none; }
  table.rooster tr:not(.open) { background: var(--merk-zacht); }
  table.rooster tr:not(.open) th { border-bottom: 0; }
  table.rooster tr:not(.open) td.tijdcel { flex: 0 0 auto; padding: 10px 6px; font-size: 16px; border: 0; color: var(--merk); background: var(--merk-zacht) !important; }
  table.rooster tr:not(.open) td.tijdcel::before { display: none; }
  table.rooster tr:not(.open) td.tijdcel input { width: 4.5em; }
  table.rooster tbody th { display: flex !important; align-items: center; gap: 10px; cursor: pointer; }
  table.rooster tbody th .naar-dienst { flex: 1 1 auto; color: inherit; text-decoration: none; }
  table.rooster tr:not(.open) th .open-pagina, table.rooster tr:not(.open) th .klap { display: none; }
  table.rooster th .open-pagina { color: var(--merk); }
  table.rooster tr.open th .klap { color: #b5bcc4; transform: rotate(180deg); }
  table.rooster tr:not(.open) { padding-right: 14px; }
  table.rooster tr:not(.open) th { padding-right: 0; }
  table.rooster tr.open { box-shadow: 0 2px 10px rgba(0,0,0,.18); }
  /* Verborgen kolommen blijven verborgen: die regels staan in #verborgen-kolommen met display:none */
}

/* ---------- Gewone pagina's (layout.php) ---------- */
.inhoud { max-width: 1040px; margin: 0 auto; padding: 28px 24px 64px; box-sizing: border-box; }
.inhoud.smal { max-width: 600px; }
.inhoud.breed { max-width: none; }
.paginakop { margin-bottom: 24px; }
.paginakop h1 { font-size: 26px; font-weight: 650; letter-spacing: -.01em; margin: 0; }
.paginakop .kruimel { display: inline-flex; align-items: center; gap: 6px; color: var(--zacht); text-decoration: none; font-size: 14px; margin-bottom: 6px; }
.paginakop .kruimel:hover { color: var(--merk); }
.paginakop .uitleg { margin: 6px 0 0; }
.inhoud h2 { font-size: 17px; font-weight: 600; margin: 28px 0 12px; }
.kaart h2 { margin-top: 0; }
.kaart {
  background: var(--kaart); border: 1px solid var(--rand); border-radius: 14px; padding: 20px 22px;
  box-shadow: var(--schaduw); margin-bottom: 20px;
}
.kaart.scroll { overflow-x: auto; padding: 0; width: fit-content; max-width: 100%; }
.uitleg { color: var(--zacht); font-size: 14px; line-height: 1.5; }
.melding { padding: 12px 16px; border-radius: 10px; margin: 0 0 20px; background: #e6f4ea; color: #1e5631; }
.melding.fout { background: #fde7e7; color: #8a1c1c; outline: none; }
.verborgen { display: none !important; }

.knop, button.knop, input.knop {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--merk); color: #fff; border: 0; border-radius: 8px;
  padding: 9px 16px; font: inherit; cursor: pointer; text-decoration: none;
}
.knop:hover { background: var(--merk-licht); }

.formulier label { display: block; margin: 0 0 12px; font-size: 14px; color: #444; }
/* Een fieldset is een kaart met een kopje erin */
.formulier fieldset { background: var(--kaart); border: 1px solid var(--rand); border-radius: 12px; padding: 18px 20px 20px; margin: 0 0 18px; box-shadow: var(--schaduw); min-width: 0; }
.formulier legend { float: left; width: 100%; padding: 0; margin: 0 0 12px; font-size: 17px; font-weight: 600; color: var(--tekst); }
.formulier legend + * { clear: both; }
.formulier fieldset legend + label { margin-top: 0; }
.formulier legend .fa { color: var(--merk); width: 22px; }
.formulier fieldset label { margin: 14px 0 4px; }
.formulier fieldset .uitleg { margin: 8px 0 0; }
.plaatshouders { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 6px 0 0; font-size: 14px; color: var(--zacht); }
.plaatshouders dt, .plaatshouders dd { margin: 0; }
.plaatshouders code { background: var(--merk-zacht); color: var(--merk); padding: 1px 6px; border-radius: 4px; font-size: 13px; }
/* De opslaanknop blijft onderin beeld bij een lang formulier */
.opslaanbalk { position: sticky; bottom: 0; z-index: 5; padding: 12px 0; margin: 0 0 18px; background: var(--achtergrond); border-top: 1px solid var(--rand); }
.inhoud input[type=text], .inhoud input[type=email], .inhoud input[type=tel], .inhoud input[type=password], .inhoud input[type=search],
.inhoud input[type=date], .inhoud input[type=time], .inhoud select, .inhoud textarea {
  display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
  padding: 8px 10px; border: 1px solid var(--rand); border-radius: 8px;
  font: inherit; font-size: 15px; background: #fff; color: var(--tekst);
}
.inhoud input:focus, .inhoud select:focus, .inhoud textarea:focus { outline: 2px solid rgba(129,27,5,.25); border-color: var(--merk); }
.formulier label.vinkje { display: flex; align-items: center; gap: 8px; color: var(--tekst); }
.formulier label.vinkje input { width: 18px; height: 18px; margin: 0; }
.inhoud input.bewaard { border-color: #2e7d32; background: #eef8ef; }
.inhoud input.fout, button.fout { border-color: #c62828; outline: 2px solid #c62828; }

table.lijst { width: 100%; border-collapse: collapse; }
table.lijst th, table.lijst td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; }
table.lijst thead th { font-size: 13px; color: #666; font-weight: 600; }
table.lijst td input[type=text], table.lijst td input[type=email], table.lijst td input[type=tel] { margin: 0; }
table.lijst tr.inactief td input[type=text] { color: #999; }

.groepkeuze { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.groepkeuze label { font-weight: 600; }
.inhoud .groepkeuze select { width: auto; min-width: 200px; margin: 0; }

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.raster .kaart { margin: 0; }
table.lijst td.midden, table.lijst th.midden { text-align: center; }
table.lijst td.actie { text-align: right; white-space: nowrap; }
table.lijst td.nowrap { white-space: nowrap; }
table.lijst tr.nieuw td { background: #fbf8f3; }
.kaart.scroll.vol { width: auto; }
table.gebruikers td { padding: 6px 8px; }

/* Rechtenmatrix */
table.lijst.rechten { width: auto; min-width: 50%; }
table.rechten th, table.rechten td { white-space: nowrap; padding: 4px 3px; }
table.rechten tbody th { padding-right: 12px; }
/* Kolomnamen verticaal, zodat de matrix smal blijft */
table.rechten thead th.schuin { vertical-align: bottom; padding-bottom: 8px; }
table.rechten thead th.schuin span { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; color: var(--tekst); font-weight: normal; font-size: 13px; }
table.rechten tbody tr:hover th, table.rechten tbody tr:hover td { background: #f7f3ee; }
table.rechten td, table.rechten thead th.schuin { text-align: center; }
table.rechten tbody th { font-weight: normal; position: sticky; left: 0; background: #fff; }
button.recht { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; font-size: 16px; }
table.rechten .beheerkolom { border-right: 2px solid var(--rand); padding-right: 10px; }
.recht.beheer[data-state="2"] { background: var(--merk); }
span.recht { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 20px; border-radius: 4px; font-size: 12px; vertical-align: middle; }
.recht[data-state="0"] { background: #f2f2f2; color: #c4c4c4; }
.recht[data-state="1"] { background: #3c9a4a; color: #fff; }
.recht[data-state="2"] { background: #f08c1a; color: #fff; }

.mailvoorbeeld { overflow-x: auto; padding: 0; }

/* Lijsten worden kaartjes op smalle schermen */
@media (max-width: 760px) {
  .inhoud { padding: 20px 16px 48px; }
  .paginakop h1 { font-size: 22px; }
  .kaart { padding: 16px; }
  table.lijst:not(.rechten) thead { display: none; }
  table.lijst:not(.rechten), table.lijst:not(.rechten) tbody, table.lijst:not(.rechten) tr { display: block; }
  table.lijst:not(.rechten) tr { padding: 8px 0; border-bottom: 1px solid #ddd; }
  table.lijst:not(.rechten) td { display: flex; align-items: center; gap: 10px; border: 0; padding: 4px 0; }
  table.lijst:not(.rechten) td::before { content: attr(data-label); flex: 0 0 30%; color: #666; font-size: 13px; }
  table.lijst:not(.rechten) td.naam { font-weight: 600; }
  table.lijst:not(.rechten) td.naam::before { display: none; }
  table.lijst:not(.rechten) td.actie { justify-content: flex-end; }
  table.lijst:not(.rechten) td.midden { justify-content: flex-start; text-align: left; }
  table.lijst:not(.rechten) tr { padding: 8px 14px; }
}

/* ---------- Beheerpagina ---------- */
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.tegel {
  display: block; padding: 22px; background: var(--kaart); border: 1px solid var(--rand); border-radius: 14px;
  box-shadow: var(--schaduw); color: var(--tekst); text-decoration: none; transition: transform .12s, box-shadow .12s;
}
.tegel:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10); transform: translateY(-2px); }
.tegel .fa { font-size: 26px; color: var(--merk); }
.tegel strong { display: block; margin: 10px 0 4px; font-size: 16px; }
.tegel span { color: var(--zacht); font-size: 14px; line-height: 1.4; }

/* Meerdere namen in één cel onder elkaar; vanaf drie namen in twee kolommen,
   zodat bijvoorbeeld vier collectanten de rij niet te hoog maken */
.rooster .select-pure__label { display: grid; grid-template-columns: auto; justify-content: start; justify-items: start; gap: 2px 14px; }
.rooster .select-pure__label:has(> :nth-child(3)) { grid-template-columns: auto auto; }
.rooster .select-pure__selected-label { margin: 0; white-space: nowrap; }
.rooster .select-pure__selected-label i { margin-left: 4px; }

/* Compactere rijen in het rooster */
.rooster td { padding: 7px 6px; }
table.rooster tbody th { padding: 7px 8px; }
.rooster .select-pure__select { min-height: 36px; padding: 4px 8px; }
.rooster .select-pure__options { top: 100%; }
.rooster textarea { field-sizing: content; width: 16em; min-height: 36px; max-height: 6em; resize: vertical; font: inherit; box-sizing: border-box; border: 1px solid var(--rand); border-radius: 6px; padding: 7px 8px; background: #fff; }
.rooster .discontainer { margin-bottom: 0; }
@media (max-width: 760px) {
  /* In de kaartweergave lopen de namen gewoon door over de breedte */
  .rooster .select-pure__label, .rooster .select-pure__label:has(> :nth-child(3)) { display: flex; flex-wrap: wrap; }
}

/* De vaste datumkolom niet doorzichtig maken bij diensten in het verleden,
   anders schemert de rest van de rij erdoorheen bij horizontaal scrollen */
table.rooster tr.verleden th { opacity: 1; color: #c49a90; }

/* Een kort formulier op brede schermen op één regel */
@media (min-width: 761px) {
  .formulier.naast { display: flex; align-items: flex-end; gap: 12px; }
  .formulier.naast label { flex: 1; margin: 0; }
  .formulier.naast .knop { flex: 0 0 auto; }
}

/* Tweede knop naast een hoofdknop */
.knop.licht, button.knop.licht { background: #fff; color: var(--merk); border: 1px solid var(--rand); }
.knop.licht:hover { background: var(--merk-zacht); }

/* ---------- Persoon: kalender per dienstdoende ---------- */
.persoonkeuze { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; }
.persoonkeuze label { font-weight: 600; }
.persoonkeuze select { width: auto; max-width: 100%; min-width: 240px; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 8px; background: #fff; font: inherit; }
.persoonkeuze label.vinkje { font-weight: normal; display: flex; align-items: center; gap: 6px; }
.kalender { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-bottom: 18px; }
.kalender .maand { margin: 0; }
.kalender h2 { text-transform: capitalize; margin: 0 0 10px; }
.dagen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dagnaam { font-size: 12px; color: var(--zacht); text-align: center; padding-bottom: 2px; }
.dag { min-height: 46px; border-radius: 6px; padding: 3px 4px; background: #fafbfc; font-size: 12px; overflow: hidden; }
.dag .nummer { display: block; color: var(--zacht); }
.dag.voorbij { opacity: .55; }
.dag.vandaag .nummer { color: var(--merk); font-weight: 700; }
.dag.ingedeeld { background: var(--merk-zacht); box-shadow: inset 0 0 0 1px #e6c9c1; cursor: default; }
.dag.ingedeeld .nummer { color: var(--merk); font-weight: 700; }
.dag .taak { display: block; color: var(--merk); font-size: 11px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .dag { min-height: 36px; }
  .dag .taak { display: none; }
  .dag.ingedeeld { background: var(--merk); }
  .dag.ingedeeld .nummer { color: #fff; }
}
.kalender { max-height: 75vh; overflow-y: auto; padding: 4px; position: relative; }
.kalenderkop { margin: 0 0 10px; }
.rijlijst { max-height: 300px; overflow-y: auto; position: relative; }
.rijlijst thead th { position: sticky; top: 0; background: #fff; }
.kalender .maand.deze { box-shadow: 0 0 0 2px var(--merk-zacht), var(--schaduw); }
a.dag { color: inherit; text-decoration: none; display: block; }
a.dag.ingedeeld:hover { box-shadow: inset 0 0 0 2px var(--merk); }

/* ---------- Eén dienst (dienst.php) ---------- */
.dienstnav { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 16px; }
.dienstnav .knop { text-decoration: none; }
.dienstkaart .kenmerken { margin: 0 0 12px; }
.kenmerk { display: inline-block; margin: 0 6px 6px 0; padding: 3px 10px; border-radius: 12px; background: var(--merk-zacht); color: var(--merk); font-size: 13px; }
table.dienstrijen { width: 100%; border-collapse: collapse; }
table.dienstrijen th, table.dienstrijen td { text-align: left; vertical-align: top; padding: 9px 0; border-bottom: 1px solid #edf0f3; }
table.dienstrijen th { width: 40%; padding-right: 12px; font-weight: normal; color: var(--zacht); }
table.dienstrijen tr:last-child th, table.dienstrijen tr:last-child td { border-bottom: 0; }
.zacht { color: #b5bcc4; }
a.naar-dienst { color: inherit; text-decoration: none; }
a.naar-dienst:hover { text-decoration: underline; }
table.dienstrijen a { color: var(--merk); text-decoration: none; } table.dienstrijen a:hover { text-decoration: underline; }

/* ---------- Nieuw jaar ---------- */
.nieuwjaar-keuze .rij2 { display: flex; flex-wrap: wrap; gap: 0 16px; }
.nieuwjaar-keuze .rij2 label { flex: 1 1 200px; }
.extra-diensten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 6px 28px; }
.extra-dienst { display: grid; grid-template-columns: 1fr 7.5em 7.5em; align-items: center; gap: 8px; }
.extra-dienst label.vinkje { margin: 0; }
.extra-dienst input[type=checkbox] { flex: 0 0 auto; }
.extra-dienst .zacht { color: var(--zacht); font-size: 13px; white-space: nowrap; }
.inhoud .extra-dienst input[type=time] { margin: 0; padding: 4px 6px; }
table.voorstel td { vertical-align: middle; padding-top: 4px; padding-bottom: 4px; }
.inhoud table.voorstel input[type=date], .inhoud table.voorstel input[type=time] { display: inline-block; width: auto; margin: 0; }
.inhoud table.voorstel input[type=text] { margin: 0; min-width: 16em; }
table.voorstel .dagnaam-kort { display: inline-block; width: 1.6em; color: var(--zacht); font-size: 13px; }
table.voorstel tr.inactief input { color: #999; }
table.voorstel td.zacht { font-size: 13px; }
@media (max-width: 760px) {
  .extra-dienst { grid-template-columns: minmax(0, 1fr) 6.5em; gap: 0 8px; }
  .extra-dienst .zacht { grid-column: 1; grid-row: 2; padding-left: 26px; }
  .extra-dienst input[type=time] { grid-column: 2; grid-row: 1 / span 2; }
  .inhoud .extra-dienst input[type=time] { width: 100%; min-width: 0; padding: 4px; }
  .extra-dienst .zacht { white-space: normal; }
  .inhoud table.voorstel input[type=date] { width: 9.5em; }
  .inhoud table.voorstel input[type=time] { width: 6.5em; }
  /* Voorstel compact: vinkje, dag, datum en tijd op één regel, omschrijving eronder */
  table.voorstel tr { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  table.voorstel td { padding: 0 !important; }
  table.voorstel td::before { display: none; }
  table.voorstel td[data-label=Omschrijving] { flex: 1 1 100%; }
  .inhoud table.voorstel input[type=text] { min-width: 0; width: 100%; }
  table.voorstel td.zacht:empty { display: none; }
}