/* De voorbeeldweek wisselt bij scrollen en kan direct vergeleken worden. */
.ff-week-preview { min-width:0; padding:24px; border:1px solid #d6e1da; border-radius:16px; background:#fff; color:#182d20; }
.ff-week-preview:focus-visible { outline:3px solid #00b050; outline-offset:5px; }
.ff-week-preview .week-title { font-size:1.35rem; line-height:1.3; letter-spacing:-.025em; color:#09090b; }
.ff-week-preview .week-state { display:inline-block; margin-top:12px; font-size:.875rem; line-height:1.5; font-weight:700; color:#365a41; }
.ff-week-preview .week-hint { font-size:.875rem; line-height:1.5; color:#526659; margin-top:5px; }
.ff-week-preview .touch-hint { display:none; }
.ff-week-preview .calendar-stage { display:grid; position:relative; margin-top:22px; }
.ff-week-preview .calendar-layer { display:grid; grid-area:1/1; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; min-width:0; transition:opacity 240ms ease-out,transform 240ms ease-out,visibility 240ms; }
.ff-week-preview .calendar-layer[data-calendar="before"] { opacity:1; visibility:visible; transform:none; }
.ff-week-preview .calendar-layer[data-calendar="after"] { opacity:0; visibility:hidden; transform:translateY(6px); }
.ff-week-preview[data-week-state="after"] .calendar-layer[data-calendar="before"] { opacity:0; visibility:hidden; transform:translateY(-6px); }
.ff-week-preview[data-week-state="after"] .calendar-layer[data-calendar="after"] { opacity:1; visibility:visible; transform:none; }
.ff-week-preview .calendar-day { display:grid; grid-template-rows:24px 1fr; gap:6px; min-width:0; }
.ff-week-preview .day-label { font-size:.875rem; line-height:1.4; font-weight:700; text-align:center; }
.ff-week-preview .day-slots { display:grid; grid-template-rows:repeat(8,minmax(0,1fr)); gap:5px; height:300px; }
.ff-week-preview .cal-event { display:flex; align-items:flex-start; justify-content:center; min-height:0; padding:9px 3px; border-radius:4px; font-size:.75rem; font-weight:600; line-height:1.35; text-align:center; }
.ff-week-preview .cal-busy { background:#e5ebe7; color:#405447; }
.ff-week-preview .cal-fragment { background:#f2ece2; color:#695239; padding-block:5px; }
.ff-week-preview .cal-focus { background:#cff1da; color:#14532b; padding-top:18px; font-weight:750; }
.ff-week-preview .cal-meeting { background:#e5ebe7; color:#405447; }
.ff-week-preview .cal-open { background:#fbfdfb; color:#45614e; border:1px dashed #b5c8bb; }
.ff-week-preview .calendar-caption { border-top:1px solid #d6e1da; padding-top:16px; margin-top:18px; color:#526659; font-size:.875rem; line-height:1.6; }
.ff-week-preview .week-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media (hover:none), (pointer:coarse) {
  .ff-week-preview .pointer-hint { display:none; }
  .ff-week-preview .touch-hint { display:inline; }
}
@media (hover:hover) {
  .ff-week-preview:not(.is-enhanced):hover .calendar-layer[data-calendar="before"] { opacity:0; visibility:hidden; transform:translateY(-6px); }
  .ff-week-preview:not(.is-enhanced):hover .calendar-layer[data-calendar="after"] { opacity:1; visibility:visible; transform:none; }
}
@media (max-width:550px) {
  .ff-week-preview { padding:16px; }
  .ff-week-preview .calendar-layer { gap:4px; }
  .ff-week-preview .cal-event { padding-inline:2px; }
}
@media (max-width:360px) {
  .ff-week-preview { padding-inline:12px; }
  .ff-week-preview .calendar-layer { gap:3px; }
  .ff-week-preview .cal-event { padding-inline:1px; }
}
@media (prefers-reduced-motion:reduce) {
  .ff-week-preview .calendar-layer { transition:none; transform:none!important; }
}