@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400&family=PT+Serif:wght@400;700&display=swap');

:root{
  --navy:#0d1c49;
  --navy-hover:#22335f;
  --red:#ff0005;
  --red-hover:#d40006;
  --ink:#0d1c49;
  --body:#3c4863;
  --muted:#68758b;
  --line:#d7dbe7;
  --soft:#f7f8fb;
  --white:#ffffff;
  --shadow-card:0 1px 2px rgba(13,28,73,.06),0 4px 12px rgba(13,28,73,.08);
  --focus-ring:0 0 0 3px rgba(255,0,5,.25);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;background:var(--soft)}
body{margin:0;width:100%;min-height:100dvh;font-family:"PT Sans",Arial,sans-serif;color:var(--body);background:var(--soft);-webkit-font-smoothing:antialiased}
a{color:var(--navy)}
a:hover{color:var(--red-hover)}
.shell{width:min(1140px,calc(100% - 48px));margin:0 auto}

.topbar{height:80px;display:flex;align-items:center;background:var(--navy)}
.brand{display:flex;align-items:center}
.brand-lockup{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand-lockup svg{display:block;height:36px;width:auto}
.brand-name{font-weight:700;font-size:21px;letter-spacing:-.01em;color:var(--red);white-space:nowrap}
a.brand-lockup:hover .brand-name{color:var(--red)}

.hero{padding:64px 0 60px;background:var(--navy);color:#fff}
.kicker{display:inline-flex;align-items:center;gap:12px;color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.kicker:before{content:"";width:44px;height:4px;background:var(--red)}
h1{margin:18px 0 16px;font-family:"PT Serif",Georgia,serif;font-weight:700;font-size:clamp(32px,5vw,52px);line-height:1.05;letter-spacing:-.01em;color:#fff;max-width:820px}
.hero p{margin:0;max-width:640px;font-size:18px;line-height:1.6;color:rgba(255,255,255,.85)}

main{padding:48px 0 80px}
.panel{background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow-card);padding:clamp(24px,4vw,40px)}

.progress{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:32px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.progress .step{display:inline-flex;align-items:center;gap:10px}
.progress .step b{width:28px;height:28px;border-radius:3px;display:grid;place-items:center;background:#eef0f6;color:var(--muted)}
.progress .step.current,.progress .step.done{color:var(--navy)}
.progress .step.current b,.progress .step.done b{background:var(--navy);color:#fff}
.progress-line{height:1px;width:44px;background:var(--line)}

h2{margin:0 0 10px;font-family:"PT Serif",Georgia,serif;font-weight:700;color:var(--navy);font-size:clamp(24px,2.6vw,32px);line-height:1.15}
.summary{margin:0 0 24px;color:var(--muted);font-size:16px;line-height:1.6}
.summary strong{color:var(--navy)}

.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:28px}
.choice{font:inherit;text-align:left;cursor:pointer;border:1px solid var(--line);border-radius:6px;padding:26px 22px;display:flex;flex-direction:column;background:#fff;position:relative;box-shadow:var(--shadow-card);transition:border-color .15s ease,box-shadow .15s ease;color:inherit}
.choice:hover,.choice:focus-visible{border-color:var(--navy);outline:none;box-shadow:0 0 0 1px var(--navy),var(--shadow-card)}
.icon{width:44px;height:44px;border-radius:6px;display:grid;place-items:center;background:var(--soft);color:var(--navy);margin-bottom:20px}
.icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.choice:hover .icon{color:var(--red)}
.choice h3{margin:0 0 12px;font-family:"PT Serif",Georgia,serif;color:var(--navy);font-size:22px;line-height:1.15}
.choice p{margin:0 0 22px;color:var(--muted);line-height:1.55;font-size:15px}
.price{margin-top:auto;margin-bottom:18px;font-weight:700;color:var(--navy)}
.choice .button{width:100%;padding:13px 16px;font-size:15px}
.note{margin-top:28px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:0 6px 6px 0;padding:20px 22px;color:var(--body);line-height:1.58}
.alleen-mobiel{display:none}
.ster{color:var(--red);font-weight:700}
sup.ster{font-size:15px;vertical-align:top;line-height:1}
.alt{margin:22px 0 0;color:var(--muted);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.button.ghost{background:#fff;color:var(--navy);border:1px solid var(--navy);padding:13px 20px;font-size:15px}
.button.ghost:hover{background:var(--navy);color:#fff}
.button.ghost svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

.button{border:0;border-radius:6px;background:var(--red);color:#fff;font-family:"PT Sans",Arial,sans-serif;font-weight:700;font-size:16px;padding:15px 24px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:auto;text-decoration:none;transition:background-color .15s ease}
.button:hover{background:var(--red-hover);color:#fff}
.button.navy{background:var(--navy)}
.choice:hover .button.navy,.button.navy:hover{background:var(--navy-hover)}
.button[disabled]{opacity:.6;cursor:wait}

.laden{color:var(--muted);padding:18px 0}
.melding{margin:0 0 20px;padding:16px 18px;border-radius:6px;border-left:4px solid var(--red);background:#fff4f4;color:var(--ink);line-height:1.55}

.days{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.day{font:inherit;cursor:pointer;border:1px solid var(--line);border-radius:6px;background:#fff;padding:10px 14px;min-width:92px;text-align:center;color:var(--navy);line-height:1.25}
.day small{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.day strong{font-size:16px}
.day:hover{border-color:var(--navy)}
.day[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.day[aria-pressed="true"] small{color:rgba(255,255,255,.75)}
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;max-width:640px}
.time{font:inherit;font-weight:700;cursor:pointer;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--navy);padding:12px 8px}
.time:hover,.time:focus-visible{border-color:var(--red);color:var(--red);outline:none}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.field{margin-bottom:20px}
.field.full{grid-column:1/-1}
label,.label{display:block;margin:0 0 8px;font-size:15px;font-weight:700;color:var(--navy)}
.required{color:var(--red)}
.optional{color:var(--muted);font-weight:400}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--ink);padding:13px 14px;font:inherit;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
textarea{min-height:130px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:var(--focus-ring)}
input.fout,textarea.fout{border-color:var(--red)}
.help{margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.pay-note{margin-top:14px;font-size:14px;max-width:560px}

.pick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pick{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:6px;background:#fff;padding:14px 16px;cursor:pointer;margin:0;font-weight:400}
.pick input{width:auto;margin:3px 0 0;accent-color:var(--red)}
.pick:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.pick-body strong{color:var(--navy);font-size:15px}

.klaar-tekst p{margin:0 0 12px;line-height:1.65;font-size:17px}
#klaar-betaal{margin:8px 0 8px}
.voorbereiding{margin-top:36px;padding-top:30px;border-top:1px solid var(--line)}
.voorbereiding h3{margin:0 0 8px;font-family:"PT Serif",Georgia,serif;color:var(--navy);font-size:22px}
.voorbereiding > p{margin:0 0 22px;color:var(--muted);line-height:1.6}
.dank{font-weight:700;color:var(--navy)}

footer{background:var(--navy);padding:34px 0 42px;color:rgba(255,255,255,.75);font-size:14px}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;line-height:1.6}
.footer-brand{color:#fff;font-weight:700}
footer a{color:#fff;text-decoration:none}
footer a:hover{text-decoration:underline;color:#fff}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}

@media(max-width:640px){
  .shell{width:calc(100% - 32px)}
  .panel{padding:24px 18px}
  .hero{padding:40px 0 36px}
  main{padding:28px 0 56px}
  .grid,.pick-grid{grid-template-columns:1fr}
  .button{width:100%}
  .progress-line{width:16px}
  .days{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;margin-left:-18px;margin-right:-18px;padding:2px 18px 8px}
  .day{flex:0 0 auto;scroll-snap-align:start}
  .alleen-mobiel{display:inline}
  .footer-inner{display:block}
  .footer-inner > div + div{margin-top:14px}
}