* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: system-ui, -apple-system, sans-serif;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    min-height: 100vh;
}

.container { max-width: 560px; margin: 0 auto; padding: 10px; }
header { position: relative; text-align: center; padding: 5px 42px 10px; }
h1 { font-size: 1.65rem; margin: 0; }
#infoButton { position: absolute; right: 4px; top: 2px; width: 30px; height: 30px; border: 2px solid rgba(255,255,255,0.9); border-radius: 50%; background: transparent; color: white; font: 700 18px/26px Georgia, serif; cursor: pointer; }
#infoButton:hover { background: rgba(255,255,255,0.12); }
.info-panel { position: relative; margin: 0 0 10px; background: rgba(255,255,255,0.98); color: #222; border-radius: 16px; box-shadow: 0 8px 25px rgba(0,0,0,0.18); overflow: hidden; }
.info-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px; border-bottom: 1px solid rgba(0,0,0,0.12); }
.info-header h2 { font-size: 1.15rem; }
#infoClose { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(102,126,234,0.12); color: #667eea; font-size: 1.45rem; cursor: pointer; }
.info-content { max-height: 70vh; overflow-y: auto; padding: 10px 13px 14px; font-size: 0.88rem; line-height: 1.4; }
.info-content h3 { margin: 12px 0 4px; font-size: 0.96rem; }
.info-content p { margin: 0 0 7px; }
.info-content ul { margin: 0 0 7px 20px; }
.info-content li { margin: 2px 0; }
.input-section { display: flex; flex-direction: column; gap: 7px; }
.input-row { display: grid; align-items: center; gap: 8px; }
.input-row > label { font-size: 0.95rem; font-weight: 600; opacity: 0.95; }
.date-row { grid-template-columns: 88px 1fr 1.8fr 1.1fr; }
.week-row { grid-template-columns: 88px 1.4fr 1fr; }
.description-row { grid-template-columns: 88px 1fr auto; }
#searchDescription { height: 40px; padding: 0 13px; border: 0; border-radius: 10px; background: rgba(255,255,255,0.96); color: #4f46a5; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.18); transition: transform 0.1s, box-shadow 0.1s, background 0.1s; position: relative; }
#searchDescription:hover { background: white; box-shadow: 0 3px 9px rgba(0,0,0,0.24); }
#searchDescription::after { content: ""; position: absolute; inset: 1px; border: 1px solid #4f46a5; border-radius: 9px; pointer-events: none; }
#searchDescription:focus-visible { outline: 3px solid rgba(255,255,255,0.65); outline-offset: 2px; }
#searchDescription:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0,0,0,0.16); }
.description-message { min-height: 1.2em; margin-left: 88px; font-size: 0.82rem; font-weight: 600; color: white; }
.description-message.error { color: #ffe1e1; }
.description-message.success { color: #e2ffe8; }
input, select { width: 100%; min-width: 0; height: 40px; padding: 7px 9px; border: 0; border-radius: 10px; background: rgba(255,255,255,0.96); color: #222; font: inherit; }
input:focus, select:focus { outline: 3px solid rgba(255,255,255,0.35); }
.calendar-section { margin-top: 12px; background: rgba(255,255,255,0.97); color: #222; border-radius: 16px; padding: 9px; box-shadow: 0 8px 25px rgba(0,0,0,0.18); }
.calendar-header { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; text-align: center; margin-bottom: 5px; }
.calendar-header button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(102,126,234,0.12); color: #667eea; font-size: 1.6rem; cursor: pointer; }
.calendar-header strong { display: block; font-size: 1.1rem; text-transform: capitalize; }
.calendar-header span { display: block; font-size: 0.75rem; opacity: 0.6; margin-top: 2px; }
.weekday-header, .calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.weekday-header { text-align: center; font-size: 0.75rem; font-weight: 700; opacity: 0.55; margin-bottom: 4px; }
.calendar-day { aspect-ratio: 1; border: 0; border-radius: 9px; background: transparent; color: #222; font: inherit; cursor: pointer; position: relative; }
.calendar-day:hover { background: rgba(102,126,234,0.12); }
.calendar-day.other-month { opacity: 0.28; }
.calendar-day.today { box-shadow: inset 0 0 0 2px rgba(102,126,234,0.55); }
.calendar-day.highlight { background: #667eea; color: white; font-weight: 700; }
.calendar-day.highlight::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 5px; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.8); }
.calendar-day.highlight.week-highlight { background: #667eea; }
.calendar-day.holiday { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.calendar-day.holiday::before { content: "★"; position: absolute; top: 1px; right: 3px; font-size: 0.55rem; line-height: 1; opacity: 0.75; }
.holiday-list { margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(0,0,0,0.12); font-size: 0.82rem; }
.holiday-item { padding: 2px 4px; font-weight: 600; }
@media (max-width: 420px) {
    .container { padding: 7px; }
    header { padding-left: 36px; padding-right: 36px; }
    h1 { font-size: 1.45rem; }
    .date-row { grid-template-columns: 78px 1fr 1.55fr 1fr; }
    .week-row { grid-template-columns: 78px 1.4fr 1fr; }
    .description-row { grid-template-columns: 78px 1fr auto; }
    #searchDescription { height: 38px; padding: 0 10px; }
    .description-message { margin-left: 78px; }
    input, select { height: 38px; padding: 6px 8px; }
    .calendar-section { padding: 7px; }
}
body.info-open main { display: none; }
.event-sources{margin-top:7px;padding-top:7px;border-top:1px solid rgba(0,0,0,.12);display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.78rem}.event-sources strong{font-size:.82rem}.event-sources label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}.event-sources input{margin:0}.historical-events{margin-top:7px;padding-top:7px;border-top:1px solid rgba(0,0,0,.12);font-size:.82rem}.historical-events h3{font-size:.92rem;margin-bottom:4px}.historical-events ul{margin:0;padding-left:20px}.historical-events li{margin:3px 0}.historical-events a{color:#4f46a5;text-decoration:none;font-weight:600}.historical-events a:hover{text-decoration:underline}.historical-events .events-status{opacity:.65}.calendar-day.oudommen-event .oudommen-event-marker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:33px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;opacity:.32}.calendar-day.oudommen-event .oudommen-event-marker img{display:block;max-width:66px;max-height:33px;width:auto;height:auto;object-fit:contain}.calendar-day.highlight.oudommen-event .oudommen-event-marker{filter:brightness(0) invert(1)}

/* OudOmmen-bron compact en op één regel */
.event-sources label{white-space:nowrap;flex-wrap:nowrap}.event-sources input[type="checkbox"]{width:auto;min-width:0;height:auto;padding:0;flex:0 0 auto}