/* VvE Net Jaarkalender. Kleuren uit het thema, met terugvalwaarden. */
.kal-lijst { --_ink: var(--vn-ink, #14214F); --_groen: var(--vn-groen, #2346B8); --_vlak: var(--vn-vlak, #F3F6FB); --_zacht: var(--vn-zacht, #4A5677); --_spoed: var(--vn-spoed, #C4262E); --_wit: var(--vn-wit, #fff); --_rand: var(--vn-rand, #6A7593); }
.kal-maand { margin: 1.75rem 0 .6rem; }
.kal-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.kal-item { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: 1rem; align-items: center; padding: .8rem 1rem; border-radius: 10px; background: var(--_vlak); border-left: 4px solid transparent; }
.kal-item--te_laat { border-left-color: var(--_spoed); }
.kal-item--binnenkort { border-left-color: var(--vn-geel, #2FA8D8); }
.kal-item--gedaan { opacity: .7; }
.kal-item--gedaan .kal-titel a { text-decoration: line-through; }
.kal-datum { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--vn-wit, #fff); border-radius: 8px; padding: .35rem 0; line-height: 1.1; }
.kal-datum strong { font-size: 1.35rem; color: var(--_ink); font-variant-numeric: tabular-nums; }
.kal-datum span { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--_zacht); }
.kal-wat p { margin: 0; }
.kal-wat .vn-meta { margin-top: .2rem; font-size: .9rem; }
.kal-titel { font-weight: 700; }
.kal-titel a { color: var(--_ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kal-titel .vn-status { margin-left: .35rem; vertical-align: 1px; }
.kal-knop { padding: .5rem .9rem; font-size: .92rem; }
.kal-status--te_laat { background: color-mix(in srgb, var(--vn-spoed, #C4262E) 12%, #fff); color: var(--vn-spoed, #C4262E); }
.kal-status--binnenkort { background: color-mix(in srgb, var(--vn-geel, #2FA8D8) 22%, #fff); color: var(--vn-ink, #14214F); }
.kal-status--gedaan { background: #0E7A3E; color: #fff; }
.kal-status--verstreken, .kal-status--info { background: var(--vn-vlak, #F3F6FB); color: var(--vn-zacht, #4A5677); }
.kal-kaart--rood strong { color: var(--vn-spoed, #C4262E) !important; }
.kal-acties { white-space: nowrap; }
.kal-acties .vn-inline { display: inline; margin-left: .5rem; }
@media (max-width: 560px) { .kal-item { grid-template-columns: 3rem 1fr; } .kal-item > form { grid-column: 2; justify-self: start; } }
@media print { .kal-knop, .vn-tabs { display: none !important; } }