/* Customer booking only: a quiet, spacious calendar within the existing card. */
#plannen .booking-calendar{margin:1.6rem 0 0;padding:1.4rem 0 .75rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;min-width:0}
#plannen #calendar-title{margin:0 0 .45rem;font-size:1.35rem;letter-spacing:-.025em}
#plannen #calendar-help{color:var(--muted);font-size:.9rem;line-height:1.5;margin:0 0 1.35rem;max-width:32ch}
#plannen .calendar-header{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:.5rem;margin-bottom:1rem}
#plannen #calendar-month{font-family:Syne,Arial,sans-serif;font-size:1.2rem;font-weight:700;text-align:center;line-height:1.3;margin:0;color:var(--ink)}
#plannen .calendar-header button{width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--accent);font-family:Arial,sans-serif;font-size:1.7rem;font-weight:400;line-height:1}
#plannen .calendar-header button[aria-disabled=true]{color:#a99fbd;border-color:#eee9f6;cursor:default}
#plannen .calendar-weekdays,#plannen .calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:3px;text-align:center}
#plannen .calendar-weekdays{margin-bottom:.5rem;color:var(--muted);font-size:.8rem;font-weight:600}
#plannen .calendar-weekdays span{padding:.4rem 0}
#plannen .calendar-days{row-gap:5px}
#plannen .calendar-day{position:relative;justify-self:center;width:100%;max-width:56px;aspect-ratio:1;min-height:44px;padding:0;border:1px solid transparent;border-radius:10px;background:white;color:var(--ink);font-size:1rem;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;overflow-wrap:normal;transition:background .15s,border-color .15s}
#plannen .calendar-day:enabled:hover{background:#f2eaff;border-color:#dac6fb;filter:none}
#plannen .calendar-day:disabled{opacity:1;color:#a7a0b4;background:#fbfafc;cursor:not-allowed}
#plannen .calendar-day[aria-current=date]{border-color:#b790ed;font-weight:700}
#plannen .calendar-day[aria-current=date]::after{content:"";position:absolute;bottom:5px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:var(--accent)}
#plannen .calendar-day[aria-pressed=true],#plannen .calendar-day[aria-pressed=true]:enabled:hover{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
#plannen .calendar-day[aria-pressed=true]::after{background:#fff}
#plannen .calendar-day:focus-visible,#plannen .calendar-header button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;z-index:1}
#plannen .calendar-note{font-size:.76rem;color:var(--muted);margin:1rem 0 0;text-align:center}
#plannen #manual-date{margin:.7rem 0 1.2rem;font-size:.85rem;color:var(--muted)}
#plannen #manual-date summary{min-height:44px;padding:.7rem 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#plannen #manual-date input{font-size:1rem}
@media(max-width:700px){
  #plannen.shell{width:calc(100% - 24px)}
  #plannen>.card{padding:24px 16px}
  #plannen .calendar-weekdays,#plannen .calendar-days{column-gap:0}
  #plannen .calendar-day{max-width:48px;border-radius:8px}
}
@media(max-width:380px){
  #plannen.shell{width:calc(100% - 8px)}
  #plannen>.card{padding:22px 0;border-radius:12px}
  #plannen #booking-form>h2,#plannen #booking-form>p,#plannen #booking-fields>label,#plannen #booking-fields>p,#plannen #manual-date,#plannen #confirmation,#plannen #calendar-title,#plannen #calendar-help{margin-left:12px;margin-right:12px}
  #plannen #booking-fields>input,#plannen #booking-fields>.slots,#plannen #booking-fields>button{width:calc(100% - 24px);margin-left:12px;margin-right:12px}
  #plannen .calendar-header{margin-left:10px;margin-right:10px}
  #plannen .calendar-days{row-gap:4px}
  #plannen .calendar-day{max-width:48px;min-height:44px}
  #plannen .calendar-weekdays{font-size:.8rem}
  #plannen>aside{padding-inline:12px}
}
@media(prefers-reduced-motion:reduce){#plannen .calendar-day{transition:none}}