.studiekalender { max-width: 640px; }
.kalender-bediening { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0; }
.kalender-maand { margin: 0; font-size: clamp(1.05rem, 3vw, 1.3rem); text-transform: capitalize; }
.kalender-maandknop { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--line); border-radius: var(--pill); color: var(--ink); background: var(--surface); font: inherit; cursor: pointer; transition: transform 180ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease), opacity 180ms var(--ease); }
.kalender-maandknop:disabled { opacity: .35; cursor: default; }
.kalender-weekdagen, .kalender-dagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(4px, 1.4vw, 10px); }
.kalender-weekdagen { margin-bottom: 10px; text-align: center; font-size: .8rem; color: var(--ink-soft); }
.kalender-dag { min-width: 0; aspect-ratio: 1.1; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease), background-color 180ms var(--ease), color 180ms var(--ease); }
.kalender-dag, .kalender-staal { background: var(--surface); color: var(--ink); }
.kalender-dag[data-intensiteit="1"], .kalender-staal[data-intensiteit="1"] { background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.kalender-dag[data-intensiteit="2"], .kalender-staal[data-intensiteit="2"] { background: color-mix(in srgb, var(--accent) 24%, var(--card)); }
.kalender-dag[data-intensiteit="3"], .kalender-staal[data-intensiteit="3"] { background: var(--accent); color: var(--white); }
.kalender-dag[data-intensiteit="4"], .kalender-staal[data-intensiteit="4"] { background: var(--accent-dark); color: var(--white); }
html[data-theme="dark"] .kalender-dag[data-intensiteit="3"], html[data-theme="dark"] .kalender-dag[data-intensiteit="4"] { color: var(--bg); }
.kalender-dag.is-onbekend { border-style: dashed; color: var(--ink-soft); background: transparent; }
.kalender-dag.is-toekomst { background: transparent; color: var(--ink-soft); border-style: dotted; opacity: .6; }
.kalender-dag[aria-current="date"] { box-shadow: inset 0 0 0 1px var(--ink-soft); }
/* Muis erover: een blauwe rand die weer weggaat. Gekozen dag: blauwe rand plus een zachte ring, zodat je hem ook na het weghalen van de muis ziet. */
:where(html.has-hover) .kalender-dag.is-hover { outline: 2px solid var(--accent); outline-offset: 2px; }
.kalender-dag[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-zacht); }
.kalender-dag:focus-visible, .kalender-maandknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kalender-daginfo { min-height: 3em; margin: 18px 0 10px; font-size: .9rem; line-height: 1.5; color: var(--ink); }
.kalender-legenda { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: .72rem; color: var(--ink-soft); }
.kalender-legenda > span:first-child { margin-right: 4px; }
.kalender-legenda > span:last-child { margin-left: 4px; }
.kalender-staal { width: 15px; height: 15px; display: inline-block; border: 1px solid var(--line); border-radius: 4px; }
.kalender-uitleg, [data-kalender-status] { color: var(--ink-soft); font-size: .85rem; line-height: 1.65; }
.kalender-uitleg { margin: 18px 0 0; }
:where(html.has-hover) .kalender-dag:hover:not(:active), :where(html.has-hover) .kalender-maandknop:not(:disabled):hover:not(:active) { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.kalender-dag:active, .kalender-maandknop:not(:disabled):active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .kalender-dag, .kalender-maandknop { transition: none; }
  :where(html.has-hover) .kalender-dag:hover, :where(html.has-hover) .kalender-maandknop:not(:disabled):hover, .kalender-dag:active, .kalender-maandknop:not(:disabled):active { transform: none; }
}

/* Telefoon: dagen minstens 44 pixels hoog, zodat ze goed aan te tikken zijn. */
@media (max-width: 480px) {
  .kalender-dag { aspect-ratio: auto; min-height: 44px; }
}