:root {
  --grey-dark: #133135;   /* Swimmers Black */
  --grey-dark-2: #224448; /* Swimmers Grey Dark */
  --pool: #26CCE1;        /* Pool Blue: enige accent, enkel knoppen/CTA/highlights */
  --pool-tint: #B1EAF2;   /* Pool Blue Tint */
  --pool-soft: #E8F3F4;   /* Swimmers Grey Extra Light */
  --grey-xl: #E8F3F4;
  --grey-mid: #557074;    /* gedempte tekst (afgeleid van Grey Dark, AA op wit) */
  --grey-light: #B4CCCF;  /* Swimmers Grey Mid */
  --body: #224448;
  --bg: #F6F9FA;          /* Swimmers White */
  --card: #FFFFFF;
  --line: #B4CCCF;        /* Swimmers Grey Mid: borders */
  --ok: #1E7E52;
  --warn: #9A5F0A;
  --radius: 16px;
  --focus: 0 0 0 3px #133135, 0 0 0 5px #26CCE1;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'General Sans', sans-serif;
  color: var(--body);
  background: var(--bg);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, .kicker, button, .chip, .seg label { font-family: 'Gotham Black', 'Gotham', 'Montserrat', sans-serif; }

.top { background: linear-gradient(180deg, #133135, #0A2226); color: #F6F9FA; }
.top-in { max-width: 720px; margin: 0 auto; padding: 16px 16px; display: flex; align-items: center; gap: 16px; }
.logo { width: 56px; height: 56px; }
.kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--pool-tint); font-weight: 600; }
h1 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -.01em; }

main { max-width: 720px; margin: 0 auto; padding: 16px 16px 48px; }
.card { background: var(--card); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(19,49,53,.08); }
.card.center { text-align: center; padding: 48px 24px; }
h2 { margin: 0 0 8px; font-size: 20px; font-weight: 900; color: var(--grey-dark); }
h3 { margin: 16px 0 8px; font-size: 16px; font-weight: 800; color: var(--grey-dark); }
p { margin: 0 0 12px; }
.muted { color: var(--grey-mid); font-size: 14px; }
.small { font-size: 13px; }

.intro strong { color: var(--grey-dark); }
.wie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wie span { background: var(--pool-soft); color: var(--grey-dark); border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 600; }

.vak-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vak-kop .datum { color: var(--grey-mid); font-size: 14px; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 12px; border-radius: 999px; background: var(--pool-soft); color: var(--grey-dark); }
.badge.dicht { background: var(--grey-xl); color: var(--grey-mid); }

/* segmented choice */
.seg { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  flex: 1 1 140px; text-align: center; padding: 12px 12px; border: 2px solid var(--line); border-radius: 12px;
  cursor: pointer; font-weight: 600; font-size: 14px; color: var(--grey-dark); background: #fff; transition: .15s;
}
.seg input:checked + label { border-color: var(--pool); background: var(--pool-soft); }
.seg input:focus-visible + label { outline: 3px solid var(--pool-tint); }

.persoon { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.persoon-naam { font-family: 'Gotham Black', 'Gotham', 'Montserrat', sans-serif; font-weight: 700; color: var(--grey-dark); font-size: 16px; }

.dag { margin: 12px 0 0; }
.dag-kop { font-size: 14px; font-weight: 600; color: var(--grey-dark); margin-bottom: 8px; }
.dag-kop small { font-weight: 400; color: var(--grey-mid); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 2px solid var(--line); background: #fff; color: var(--grey-dark); border-radius: 10px;
  padding: 8px 12px; font-size: 14px; font-weight: 600; cursor: pointer; min-width: 74px; transition: .12s;
}
.chip small { display: block; font-weight: 500; font-size: 11px; color: var(--grey-mid); }
.chip[aria-pressed="true"] { background: var(--pool); border-color: var(--pool); color: var(--grey-dark); }
.chip[aria-pressed="true"] small { color: var(--grey-dark); }
.chip:focus-visible { outline: 3px solid var(--pool-tint); }

.leeg { background: var(--pool-soft); border-radius: 10px; padding: 12px 16px; font-size: 14px; margin-top: 12px; }

.rij { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.rij label { font-size: 14px; }
select, textarea {
  font: inherit; border: 2px solid var(--line); border-radius: 10px; padding: 8px 12px; background: #fff; color: var(--grey-dark);
}
textarea { width: 100%; min-height: 80px; resize: vertical; }
select:focus-visible, textarea:focus-visible, input:focus-visible { outline: none; border-color: var(--grey-dark); box-shadow: 0 0 0 3px var(--pool-tint); }

.check { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--pool); margin-top: 2px; flex: none; }

.teller { font-size: 13px; color: var(--grey-mid); margin-top: 8px; }
.teller b { color: var(--grey-dark); }

.knop {
  display: block; width: 100%; border: 0; border-radius: 999px; padding: 16px; font-size: 16px; font-weight: 700;
  background: var(--pool); color: var(--grey-dark); cursor: pointer; transition: filter .15s, transform .15s;
}
.knop:hover { filter: brightness(1.06); transform: translateY(-1px); }
.knop:focus-visible { outline: none; box-shadow: var(--focus); }
.knop[disabled] { opacity: .45; cursor: progress; transform: none; filter: none; }
.fout { color: #B42318; font-size: 14px; margin-top: 12px; }

.bedankt .vink { width: 64px; height: 64px; border-radius: 50%; background: var(--pool); color: var(--grey-dark); font-size: 34px; line-height: 64px; margin: 0 auto 16px; }
.link { background: none; border: 0; color: var(--grey-dark); font-weight: 600; cursor: pointer; font-size: 15px; text-decoration: underline; padding: 0; }

.spinner { width: 34px; height: 34px; border: 4px solid var(--pool-soft); border-top-color: var(--pool); border-radius: 50%; margin: 0 auto 12px; animation: draai 1s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }

.voet { text-align: center; color: var(--grey-mid); font-size: 13px; padding: 0 16px 32px; }
.voet a { color: var(--grey-dark); }
.demo { background: #FFF4E0; color: #7A4B00; text-align: center; font-size: 13px; padding: 8px; }

@media (min-width: 600px) {
  h1 { font-size: 26px; }
  .card { padding: 24px 32px; }
}

/* stappen per deelnemer */
.stap { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-family: 'Gotham Black', 'Gotham', 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; color: var(--grey-dark); }
.stap-nr { width: 22px; height: 22px; border-radius: 50%; background: var(--grey-dark); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.vast { background: var(--pool-soft); border-left: 4px solid var(--pool); border-radius: 8px; padding: 12px 12px; font-size: 15px; }
.verleng { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--line); border-radius: 12px; padding: 12px 12px; margin: 8px 0; cursor: pointer; font-size: 15px; }
.verleng input { width: 20px; height: 20px; accent-color: var(--pool); margin-top: 2px; flex: none; }
.verleng:has(input:checked) { border-color: var(--pool); background: var(--pool-soft); }
.verleng em { color: var(--grey-mid); font-style: normal; font-size: 13px; }
.tag { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #FFF4E0; color: #8A5300; }

/* weekkalender */
.kal-wrap { margin-top: 8px; }
.kal-week { margin-bottom: 16px; }
.kal-titel { font-size: 13px; font-weight: 600; color: var(--grey-dark); margin-bottom: 8px; }
.kal { display: grid; grid-template-columns: 40px repeat(7, minmax(0, 1fr)); gap: 4px; }
.kal-hoek { }
.kal-dag { text-align: center; font-family: 'Gotham Black', 'Gotham', 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: var(--grey-dark); text-transform: capitalize; line-height: 1.2; padding-bottom: 4px; }
.kal-dag small { display: block; font-weight: 500; font-size: 11px; color: var(--grey-mid); }
.kal-dag.leeg { color: var(--grey-light); }
.kal-dag.leeg small { color: var(--grey-light); }
.kal-uur { font-size: 11px; color: var(--grey-mid); text-align: right; padding-right: 4px; display: flex; align-items: center; justify-content: flex-end; }
.kal-cel { height: 34px; border-radius: 7px; background: var(--grey-xl); }
.kal-knop { border: 2px solid var(--pool-tint); background: #fff; cursor: pointer; padding: 0; font-family: 'Gotham Black', 'Gotham', 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; color: var(--grey-mid); transition: .12s; }
.kal-knop:hover { background: var(--pool-soft); }
.kal-knop[aria-pressed="true"] { background: var(--pool); border-color: var(--pool); color: var(--grey-dark); }
.kal-knop:focus-visible { outline: 3px solid var(--grey-dark); outline-offset: 1px; }
.kal-legende { margin-top: 2px; }
.kal-voorbeeld { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--pool-tint); background: #fff; vertical-align: -2px; }
.kal-voorbeeld.aan { background: var(--pool); border-color: var(--pool); }
@media (min-width: 600px) { .kal { grid-template-columns: 48px repeat(7, minmax(0, 1fr)); gap: 8px; } .kal-cel { height: 38px; } .kal-uur { font-size: 12px; } }

/* tip + gekozen momenten */
.tip { background: var(--pool-soft); border-radius: 10px; padding: 12px 12px; font-size: 14px; margin: 16px 0 12px; color: var(--grey-dark); }
.gekozen { margin-top: 8px; }
.gekozen-rij { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 8px 2px; font-size: 14px; }
.gekozen-rij strong { color: var(--grey-dark); }
.weg { border: 0; background: var(--grey-xl); color: var(--grey-mid); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; flex: none; font-size: 13px; }
.weg:hover { background: #FFE4E4; color: #B42318; }

/* pop-up */
.overlay { position: fixed; inset: 0; background: rgba(30, 42, 53, .55); display: flex; align-items: flex-end; justify-content: center; z-index: 50; padding: 16px; }
.popup { background: #fff; border-radius: 16px; padding: 24px; width: 100%; max-width: 420px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.popup-titel { font-family: 'Gotham Black', 'Gotham', 'Montserrat', sans-serif; font-weight: 700; color: var(--grey-dark); font-size: 17px; margin-bottom: 8px; }
.optie { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; width: 100%; border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 12px; margin-top: 8px; cursor: pointer; font-size: 15px; color: var(--grey-dark); }
.optie:hover { border-color: var(--pool); background: var(--pool-soft); }
.optie:focus-visible { border-color: var(--pool); background: var(--pool-soft); outline: none; box-shadow: var(--focus); }
.optie.eigen { border-color: var(--pool-tint); }
.optie small { color: var(--grey-mid); font-size: 13px; }
.tag.eigen { background: var(--pool-soft); color: var(--grey-dark); }
@media (min-width: 600px) { .overlay { align-items: center; } }

/* lesgever-filter + namen in kalender */
.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 12px; }
.filter-label { font-size: 13px; color: var(--grey-mid); margin-right: 2px; }
.filter-chip { border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 12px; font-family: 'Gotham Black', 'Gotham', 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; color: var(--grey-dark); cursor: pointer; }
.filter-chip small { font-weight: 500; color: var(--grey-mid); }
.filter-chip.eigen { border-color: var(--pool-tint); }
.filter-chip[aria-pressed="true"] { background: var(--grey-dark); border-color: var(--grey-dark); color: #fff; }
.filter-chip[aria-pressed="true"] small { color: var(--pool-tint); }
.kal-dag-leeg, .kal-dag-leeg small { color: var(--grey-light); }
.kal-knop { color: var(--grey-dark); font-weight: 600; }
.kal-knop.eigen { border-width: 3px; border-color: var(--pool); }
.kal-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 3px; font-size: 11px; }
.kal-voorbeeld.eigen { border-width: 3px; border-color: var(--pool); }
.kal-cel { min-height: 34px; height: auto; }
.kal-label { white-space: normal; line-height: 1.15; font-size: 10.5px; padding: 3px 2px; overflow-wrap: anywhere; }

/* v4 */
.opsom { margin: 8px 0 12px; padding-left: 16px; }
.opsom li { margin-bottom: 4px; }
.keuzes { display: grid; gap: 8px; margin-bottom: 8px; }
.keuzes small { color: var(--grey-mid); font-weight: 400; }
.rij.sub { margin-left: 32px; }
.persoon-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.persoon input[type=text], .persoon input:not([type]), .persoon input[type=date], .rij input { width: 100%; max-width: 360px; }
.tip p { margin: 0 0 8px; }
a.knop { display: inline-block; text-decoration: none; text-align: center; margin-top: 8px; }
.hint-verder { text-align: center; color: var(--grey-mid); font-size: 14px; margin: 4px 0 16px; }

/* v4.1 kalender: bolletjes per lesgever */
.bol { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 2px; flex: none; }
.filter-chip .bol { margin: 0 8px 0 0; vertical-align: 0; }
.kal-bollen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; padding: 0 2px; line-height: 1; }
.kal-bollen .bol { margin: 0; }
.kal-label { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kal-knop[aria-pressed="true"] .kal-label { color: #fff; }
/* extra deelnemers */
.persoon.partner { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 12px; margin-top: 12px; }
.velden2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.velden2 .rij { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 8px; }
.velden2 .rij input, .velden2 .rij select { max-width: none; }

/* v4.2 */
.niveauvragen .nv { margin-top: 8px; }
.niveauvragen .nv p { margin: 0 0 4px; font-size: 14px; color: var(--grey-dark); }
.niveauvragen .seg label { padding: 8px 8px; font-size: 13px; }
.prijs { background: var(--pool-soft); border-radius: 10px; padding: 12px 12px; margin: 16px 0 4px; }
.prijs-kop { font-family: 'Gotham Black', 'Gotham', 'Montserrat', sans-serif; font-weight: 700; color: var(--grey-dark); font-size: 14px; margin-bottom: 4px; }
.prijs table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prijs td { padding: 3px 8px 3px 0; vertical-align: top; }
.prijs td.muted { color: var(--grey-mid); font-size: 13px; }

/* v4.3: sleepraster + meebewegende prijsbalk */
.sl { display: grid; gap: 2px; user-select: none; touch-action: none; }
.sl-cel { height: 18px; border-radius: 3px; background: #fff; border: 1px solid var(--pool-tint); cursor: pointer; }
.sl-cel.aan { background: var(--pool); border-color: var(--pool); }
.sl-cel.nee { background: var(--grey-xl); border-color: transparent; cursor: default; }
.kal-voorbeeld.nee { background: var(--grey-xl); border-color: transparent; }
.prijs-balk { position: sticky; bottom: 0; z-index: 5; background: var(--grey-dark); color: #fff; border-radius: 12px; padding: 12px 16px; margin-top: 16px; box-shadow: 0 -2px 10px rgba(19,49,53,.15); }
.prijs-balk .muted { color: var(--pool-tint) !important; }
.pb-prijzen { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; font-size: 15px; }
.pb-prijs small { color: var(--grey-light); }
.rij.kolom { flex-direction: column; align-items: stretch; gap: 4px; }
.rij.kolom textarea { width: 100%; }
.bereik { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* huisstijl 2026-10-23 */
h1, h2, h3, .kicker, .persoon-naam, .stap, .popup-titel, .prijs-kop, .pb-kop strong { font-family: 'Gotham Black', 'Gotham', 'Montserrat', sans-serif; }
button, .chip, .seg label, .filter-chip, .kal-knop, .optie { font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'General Sans', sans-serif; }
.kicker { color: var(--pool-tint); font-weight: 700; }
.seg label, .chip, .optie, .filter-chip { border-width: 2px; border-color: var(--line); border-radius: 999px; transition: filter .15s, transform .15s, border-color .15s, background .15s; }
.seg label:hover, .chip:hover, .optie:hover, .filter-chip:hover { border-color: var(--grey-dark-2); }
.seg input:checked + label { border-color: var(--pool); background: var(--pool); color: var(--grey-dark); }
.seg input:focus-visible + label, .chip:focus-visible, .filter-chip:focus-visible, .kal-knop:focus-visible, .link:focus-visible, .weg:focus-visible, .sl-cel:focus-visible { outline: none; box-shadow: var(--focus); }
.chip[aria-pressed="true"] small { color: var(--grey-dark-2); }
.kal-knop[aria-pressed="true"], .kal-knop[aria-pressed="true"] .kal-label { color: var(--grey-dark); }
.filter-chip[aria-pressed="true"] { background: var(--grey-dark); border-color: var(--grey-dark); color: #F6F9FA; }
.tip, .leeg, .vast, .prijs { background: var(--grey-xl); }
.vast { border-left-color: var(--grey-dark); }
.stap-nr { background: var(--grey-dark); color: #F6F9FA; }
.bedankt .vink { color: var(--grey-dark); }
.card { box-shadow: 0 1px 2px rgba(19,49,53,.06), 0 4px 16px rgba(19,49,53,.06); }
.prijs-balk { background: var(--grey-dark); color: #F6F9FA; border-radius: 16px; }
.prijs-balk .muted { color: var(--pool-tint) !important; }
.pb-prijs small { color: var(--grey-light); }
input[type=text], input[type=email], input[type=tel], input[type=date], input:not([type]) {
  font: inherit; border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; background: #fff; color: var(--grey-dark); min-height: 44px;
}
.velden2 .rij input, .velden2 .rij select { width: 100%; min-width: 0; }
.velden2 > * { min-width: 0; }
select { min-height: 44px; }
.voet a { color: var(--grey-dark); }

/* gsm: rooster laat verticaal scrollen toe, tikken duidt aan */
@media (pointer: coarse) { .sl { touch-action: pan-y; } .sl-cel { min-height: 26px; } }
.kal-dag.kies, .kal-uur.kies { cursor: pointer; }
.kal-dag.kies:hover, .kal-uur.kies:hover { color: var(--grey-dark); text-decoration: underline; }