/* Inschrijven + beheer (Chalet 9620 / De Zoeten Inval). Zelfde letters en kleuren als de site (winter = chalet). */
@font-face { font-family: 'Cabinet'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/cabinet-grotesk-800.woff2) format('woff2'); }
@font-face { font-family: 'Cabinet'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/cabinet-grotesk-700.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(fonts/figtree-latin-wght-normal.woff2) format('woff2-variations'); }

:root {
    --wit: #FFFFFF;
    --inkt: #2A0B12; --inkt-2: #6A4A4F;
    --vlak: #F5EDE8; --vlak-2: #EBDDD4;
    --knop: #2A0B12; --knop-hover: #45161F;
    --bordeaux: #2A0B12; --sneeuw: #F4EFE6; --sneeuw-2: rgba(244,239,230,.8);
    --gloed: #F2C46D;
    --groen: #2E7D4F; --rood: #B3261E;
    --r: 22px;
    --kop: 'Cabinet', 'Segoe UI', system-ui, sans-serif;
    --tekst: 'Figtree', 'Segoe UI', system-ui, sans-serif;
    color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wit); color: var(--inkt); font-family: var(--tekst); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid #9A4B57; outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 40px); }
h1, h2, h3 { font-family: var(--kop); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0; text-wrap: balance; }

/* bovenbalk */
.balk { background: var(--wit); }
.balk .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.merk img { height: 58px; width: auto; mix-blend-mode: multiply; }
.terug { font-weight: 700; font-size: .95rem; text-decoration: none; padding: .6rem 0; }
.terug:hover { text-decoration: underline; }

/* kop in bordeaux */
.kop { background: var(--bordeaux); color: var(--sneeuw); padding: clamp(36px, 7vw, 64px) 0 clamp(32px, 6vw, 56px); }
.kop h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.3rem); color: var(--sneeuw); }
.kop p { color: var(--sneeuw-2); margin: .9rem 0 0; max-width: 44ch; }

main { padding: clamp(28px, 5vw, 48px) 0 72px; }
.laden, .leeg { color: var(--inkt-2); }

/* knoppen: altijd gevuld */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 54px; padding: 0 1.6rem; border: 0; border-radius: 999px; background: var(--knop); color: #fff; font: 700 1rem var(--tekst); cursor: pointer; text-decoration: none; transition: background-color .2s ease; }
.knop:hover { background: var(--knop-hover); }
.knop[disabled] { opacity: .6; cursor: wait; }
.knop-zacht { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1.2rem; border: 0; border-radius: 999px; background: var(--vlak-2); color: var(--inkt); font: 700 .95rem var(--tekst); cursor: pointer; text-decoration: none; }
.knop-zacht:hover { background: #E2CFC4; }

/* event-kaart */
.event { background: var(--vlak); border-radius: var(--r); padding: clamp(22px, 4.5vw, 40px); margin-bottom: 28px; }
.event h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.3rem); }
.wanneer { font-weight: 700; margin: .5rem 0 .4rem; }
.uitleg { color: var(--inkt-2); margin: 0 0 1.4rem; }
.voorbeeld { background: var(--gloed); color: var(--inkt); font-weight: 700; font-size: .92rem; border-radius: 12px; padding: .55rem .9rem; margin: 0 0 1rem; }
.gesloten { font-weight: 700; color: var(--inkt-2); }

/* formulier */
fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
legend { font-family: var(--kop); font-weight: 800; font-size: 1.25rem; padding: 0; margin-bottom: .75rem; }
.hulp { color: var(--inkt-2); font-size: .95rem; margin: -.3rem 0 .8rem; }
.sloten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.slot { position: relative; }
.slot input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.slot span { display: block; background: var(--wit); border-radius: 16px; padding: .8rem 1rem; transition: background-color .15s ease, color .15s ease; }
.slot b { display: block; font: 800 1.35rem var(--kop); }
.slot small { color: var(--inkt-2); font-size: .9rem; }
.slot input:checked + span { background: var(--bordeaux); color: var(--sneeuw); }
.slot input:checked + span small { color: var(--sneeuw-2); }
.slot input:focus-visible + span { outline: 2px solid #9A4B57; outline-offset: 3px; }
.slot input:disabled + span { opacity: .5; }
.slot input:disabled { cursor: not-allowed; }

.teller { display: inline-flex; align-items: center; gap: .3rem; background: var(--wit); border-radius: 999px; padding: 4px; }
.teller button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--vlak-2); color: var(--inkt); font: 800 1.3rem/1 var(--kop); cursor: pointer; }
.teller button:hover { background: #E2CFC4; }
.teller button:disabled { opacity: .35; cursor: default; }
.teller output { min-width: 2.4ch; text-align: center; font: 800 1.3rem var(--kop); }
.gerecht { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--wit); border-radius: 16px; padding: .45rem .5rem .45rem 1rem; margin-bottom: .55rem; }
.gerecht .teller { background: var(--vlak); }
.stand { font-weight: 700; margin: .4rem 0 0; }
.stand.klopt { color: var(--groen); }

.veld { margin-bottom: 1rem; }
.veld label { display: block; font-weight: 700; margin-bottom: .35rem; }
.veld label small { font-weight: 500; color: var(--inkt-2); }
.veld input, .veld textarea, .veld select { width: 100%; min-height: 52px; border: 0; border-radius: 14px; background: var(--wit); color: var(--inkt); font: 500 1.05rem var(--tekst); padding: .7rem 1rem; }
.veld textarea { min-height: 88px; resize: vertical; }
.veld input:focus-visible, .veld textarea:focus-visible, .veld select:focus-visible { outline: 2px solid #9A4B57; outline-offset: 2px; }
.lokval { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.privacy { font-size: .9rem; color: var(--inkt-2); margin: 0 0 1.2rem; }
.foutmelding { color: var(--rood); font-weight: 700; margin: 0 0 1rem; }
.foutmelding:empty { display: none; }

/* gelukt */
.gelukt { background: var(--wit); border-radius: 18px; padding: clamp(20px, 4vw, 30px); }
.gelukt h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.gelukt p { margin: 0 0 .6rem; }

.voet { background: var(--bordeaux); color: var(--sneeuw-2); font-size: .92rem; padding: 32px 0 40px; }
.voet a { color: var(--sneeuw); }

/* ── beheer ── */
.werkbalk { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-bottom: 1.6rem; color: var(--inkt-2); font-size: .95rem; }
.totaal { font-weight: 700; margin: .4rem 0 1.2rem; }
.uurblok { background: var(--wit); border-radius: 18px; padding: 1.1rem 1.1rem 1rem; margin-bottom: 1rem; }
.uurkop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.uurkop b { font: 800 1.5rem var(--kop); }
.uurkop span { font-weight: 700; }
.uurkop span.vol { color: var(--rood); }
.balkje { height: 10px; border-radius: 999px; background: var(--vlak-2); overflow: hidden; margin: .6rem 0 .8rem; }
.balkje i { display: block; height: 100%; background: var(--bordeaux); border-radius: 999px; }
.balkje.vol i { background: var(--rood); }
.keuken { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; padding: 0; list-style: none; }
.keuken li { background: var(--vlak); border-radius: 999px; padding: .25rem .75rem; font-size: .92rem; font-weight: 600; }
.mensen { list-style: none; margin: 0; padding: 0; }
.mensen li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .7rem 0; }
.mensen li + li { box-shadow: 0 -1px 0 var(--vlak); }
.mensen .wie { font-weight: 700; }
.mensen .wat { color: var(--inkt-2); font-size: .93rem; grid-column: 1; }
.mensen .tag { display: inline-block; background: var(--gloed); border-radius: 999px; padding: 0 .55rem; font-size: .78rem; font-weight: 700; margin-left: .3rem; vertical-align: 2px; }
.mensen button { grid-row: 1 / span 2; grid-column: 2; align-self: center; border: 0; background: none; color: var(--rood); font: 700 .9rem var(--tekst); cursor: pointer; padding: .5rem; }
.leeg-uur { color: var(--inkt-2); font-size: .93rem; margin: 0; }
details.toevoegen { margin-top: .4rem; }
details.toevoegen summary { cursor: pointer; font-weight: 700; padding: .4rem 0; }
details.toevoegen form { margin-top: .8rem; }
.rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.melding-ok { color: var(--groen); font-weight: 700; }