/* Persoonlijke boekpagina's /afspraak/<kanaal>/<naam>/, 09-10-2026.
   Bovenaan een eigen boekfunnel (een vraag per scherm, dan de agenda), daaronder het bewijs.
   Bouwt op de stijl van /meer-informatie/. */
html{scroll-behavior:smooth}
.af-page section[id]{scroll-margin-top:24px}

.af-hero{width:calc(100% - 112px);max-width:1120px;margin:18px auto 0;text-align:center}
.af-eyebrow{justify-content:center;margin-bottom:22px}
.af-hero h1{margin:0;font-family:var(--heading);font-size:clamp(34px,4.3vw,66px);line-height:1.04;letter-spacing:-.045em;color:#f7f1fb;text-wrap:balance}
.af-accent{display:block;padding-bottom:.14em;margin-bottom:-.14em;background:linear-gradient(110deg,#ecdcf8 6%,#d7a9f7 55%,#a57fc0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.af-sub{max-width:640px;margin:14px auto 26px;color:#cbc0d4;font-size:20px;line-height:1.6;text-wrap:pretty}

/* De funnel */
.af-funnel{position:relative;max-width:720px;margin:0 auto;padding:34px 40px 36px;text-align:left;border-radius:24px;border:1px solid #7a4f98;background:linear-gradient(150deg,#22152d 0%,#150e1c 55%,#0f0b15 100%);box-shadow:0 34px 80px #000b,0 0 0 1px #ffffff0d inset,0 0 90px #9a1ae52e;transition:max-width .35s ease}
.af-funnel[data-stap="4"]{max-width:1040px}
.af-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px;color:#aa96b9;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.af-voortgang{display:flex;gap:6px}
.af-voortgang i{width:34px;height:4px;border-radius:4px;background:#3b2a47;transition:background .25s}
.af-voortgang i.is-af{background:#a600ff}
.af-voortgang i.is-nu{background:#d7a9f7}
.af-stap[hidden]{display:none}
.af-stap{animation:af-in .32s ease both}
@keyframes af-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.af-vraag{display:block;margin:0 0 18px;font-family:var(--heading);font-size:clamp(26px,3vw,38px);line-height:1.12;letter-spacing:-.03em;font-weight:700;color:#f7f1fb}
.af-hulp{margin:-8px 0 18px;color:#aa96b9;font-size:15px;line-height:1.5}
.af-stap input{display:block;width:100%;min-height:66px;padding:0 22px;border-radius:14px;border:1px solid #4a3558;background:#0c0911;color:#f7f1fb;font:500 20px/1.2 var(--body);outline:0;transition:border-color .2s,box-shadow .2s}
.af-stap input::placeholder{color:#6f6079}
.af-stap input:focus{border-color:#bf41ff;box-shadow:0 0 0 4px #a600ff2e}
.af-fout{min-height:22px;margin:14px 0 0;color:#ff9db4;font-size:15px}
.af-acties{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px}
.af-terug{min-height:57px;padding:0 6px;background:none;border:0;color:#b8a9c5;font:600 15px var(--body);cursor:pointer}
.af-terug:hover{color:#f7f1fb}
.af-terug[hidden]{display:none}
.af-verder{margin-left:auto;min-width:200px;justify-content:space-between;font-size:16px;cursor:pointer}
.af-verder[disabled]{opacity:.45;cursor:default;box-shadow:none}

/* De agenda */
.af-agenda{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:34px;align-items:start}
.af-kal,.af-tijden{padding:22px;border-radius:18px;border:1px solid #3b2a47;background:#0c0911}
.af-kal-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.af-kal-kop strong{font-family:var(--heading);font-size:19px;color:#f7f1fb;text-transform:capitalize}
.af-pijl{width:44px;height:44px;border-radius:50%;border:1px solid #4a3558;background:#150e1c;color:#ecdcf8;font-size:22px;line-height:1;cursor:pointer;transition:border-color .2s}
.af-pijl:hover:not([disabled]){border-color:#bf41ff}
.af-pijl[disabled]{opacity:.3;cursor:default}
.af-kal-week,.af-kal-rooster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.af-kal-week{margin-bottom:8px}
.af-kal-week span{text-align:center;color:#8f7d9d;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.af-dag{aspect-ratio:1;display:grid;place-items:center;border-radius:12px;border:1px solid transparent;background:none;color:#4f4259;font:600 16px var(--body)}
button.af-dag{color:#f7f1fb;border-color:#5a3d6d;background:#1c1226;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
button.af-dag:hover{border-color:#bf41ff;transform:translateY(-1px)}
button.af-dag.is-gekozen{background:linear-gradient(108deg,#9700e9,#a600ff);border-color:#d07bff;color:#fff;box-shadow:0 6px 22px #8800da55}
.af-tijden-kop{display:block;margin-bottom:16px;font-family:var(--heading);font-size:19px;color:#f7f1fb}
.af-tijden-kop::first-letter{text-transform:uppercase}
.af-tijden-rooster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:336px;overflow:auto;padding-right:4px}
.af-tijd{min-height:50px;border-radius:12px;border:1px solid #5a3d6d;background:#1c1226;color:#f7f1fb;font:600 16px var(--body);cursor:pointer;transition:border-color .15s,background .15s}
.af-tijd:hover{border-color:#bf41ff}
.af-tijd.is-gekozen{background:linear-gradient(108deg,#9700e9,#a600ff);border-color:#d07bff;color:#fff;box-shadow:0 6px 22px #8800da55}
.af-tijden-leeg{grid-column:1/-1;margin:0;color:#aa96b9;font-size:15px;line-height:1.5}
.af-tijdzone{margin:14px 0 0;font-size:13px}
.af-agenda[aria-busy="true"]{opacity:.55}

/* Klaar */
.af-klaar{text-align:center;padding:26px 0 14px}
.af-klaar[hidden]{display:none}
.af-vink{display:inline-grid;place-items:center;width:76px;height:76px;margin-bottom:22px;border-radius:50%;background:linear-gradient(108deg,#9700e9,#a600ff);box-shadow:0 0 0 8px #a600ff1f,0 14px 40px #8800da66}
.af-vink svg{width:36px;height:36px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.af-klaar h2{margin:0;font-family:var(--heading);font-size:clamp(30px,3.6vw,46px);letter-spacing:-.035em;color:#f7f1fb;outline:0}
.af-klaar-moment{margin:14px 0 8px;color:#ecdcf8;font-family:var(--heading);font-size:22px;font-weight:700}
.af-klaar-moment::first-letter{text-transform:uppercase}
.af-klaar p:last-child{margin:0;color:#b8a9c5;font-size:16px}

.af-noot{margin:18px auto 0;color:#aa96b9;font-size:15px;line-height:1.5}

/* Het bewijs */
.af-brug{margin-top:64px;text-align:center}
.af-brug .eyebrow{justify-content:center}
.af-brug h2{margin:0 auto;max-width:980px;font-family:var(--heading);font-size:clamp(28px,3.2vw,48px);line-height:1.08;letter-spacing:-.035em;color:#f7f1fb;text-wrap:balance}
.af-brug>p:not(.eyebrow){margin:12px auto 0;color:#cbc0d4;font-size:18px}
.af-brug-nav{margin-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.af-brug-nav a{padding:13px 22px;border-radius:999px;border:1px solid #654374;background:#1a1222;color:#ecdcf8;font-size:15px;font-weight:600;text-decoration:none;transition:border-color .2s,background .2s}
.af-brug-nav a:hover{border-color:#bf41ff;background:#2a1838}

.af-marc{margin-top:44px}
.af-marc .vr-feature{margin-top:0;margin-bottom:0}
.af-page .info-section-title{margin-bottom:28px}
.af-page .info-section-title h2{padding-bottom:.16em}
.af-page .info-portfolio{margin-top:56px}
.af-reviews{margin-top:56px}

.af-slot{margin:64px auto 64px;padding:44px 32px;text-align:center;border-radius:24px;border:1px solid #654374;background:radial-gradient(120% 140% at 50% 0%,#3a1a52 0%,#1a1024 55%,#110d17 100%)}
.af-slot h2{margin:0;font-family:var(--heading);font-size:clamp(32px,4vw,60px);line-height:1.05;letter-spacing:-.04em;color:#f7f1fb}
.af-slot p{margin:16px 0 30px;color:#cbc0d4;font-size:18px}

.af-vast{white-space:nowrap;position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;padding:15px 26px;border-radius:999px;color:#fff;font-weight:700;font-size:15px;text-decoration:none;background:linear-gradient(108deg,#9700e9,#8500cd 70%,#a600ff);border:1px solid #bf41ff;box-shadow:0 14px 40px #000a,0 0 0 4px #a600ff1a}
.af-vast[hidden]{display:none}

@media(max-width:860px){
  .af-agenda{grid-template-columns:1fr;gap:16px}
  .af-tijden-rooster{max-height:none}
}
@media(max-width:760px){
  .af-hero{width:calc(100% - 32px);margin-top:14px}
  .af-hero h1{font-size:clamp(30px,8.6vw,44px)}
  .af-sub{font-size:17px;margin:16px auto 24px}
  .af-funnel{padding:22px 18px 22px;border-radius:18px}
  .af-top{margin-bottom:22px;font-size:11px}
  .af-voortgang i{width:22px}
  .af-stap input{min-height:60px;font-size:18px;padding:0 18px}
  .af-kal,.af-tijden{padding:14px}
  .af-kal-week,.af-kal-rooster{gap:4px}
  .af-dag{font-size:15px;border-radius:10px}
  .af-verder{min-width:0;flex:1}
  .af-brug{margin-top:44px}
  .af-brug>p:not(.eyebrow){font-size:17px}
  .af-brug-nav a{padding:12px 18px;font-size:14px}
  .af-marc{margin-top:32px}
  .af-reviews,.af-page .info-portfolio{margin-top:40px}
  .af-slot{margin:44px auto 96px;padding:36px 20px;border-radius:18px}
  .af-header .info-header-link{display:none}
}
@media(prefers-reduced-motion:reduce){.af-stap{animation:none}html{scroll-behavior:auto}}