/* ============================================================
   JF101, aanmeldpagina.css (26 september 2026)
   Alleen voor de tijdelijke aanmeldpagina op jf101.netlify.app.
   Bouwt op site.css van de nieuwe site: dezelfde tokens, thema's en
   onderdelen. Hier staat alleen de opbouw van deze ene pagina:
   donker merkblok, licht formulier, donkere app, witte vragen.
   ============================================================ */

/* ============ 1. MERK, FOTOBOEK EN WAT JE KRIJGT (donker) ============ */
/* Desktop: links het merk met de belofte eronder, rechts het fotoboek, beide bovenaan
   uitgelijnd; Instagram en TikTok zweven rechtsboven, zodat ze geen eigen rij kosten
   en de knop op een laptop boven de vouw blijft. Mobiel onder elkaar: sociaal, merk,
   fotoboek, belofte, zodat je na het logo meteen een foto van Jens ziet (26 sep). */
.aanmeld-hero{position:relative;overflow:hidden;background:var(--bg);color:var(--text)}
.aanmeld-hero-grid{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  grid-template-areas:"merk foto" "belofte foto";
  grid-template-rows:auto 1fr;
  column-gap:clamp(40px,6vw,96px);row-gap:clamp(22px,2.6vw,32px);
  padding-block:76px clamp(48px,7vw,96px);
}
.aanmeld-sociaal{position:absolute;top:18px;right:var(--pad);display:flex;gap:10px;z-index:1}
.sociaal-knop{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:var(--btn-ghost-bg);border:1px solid var(--btn-ghost-border);
  transition:border-color .2s,background .2s;
}
.sociaal-knop:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.sociaal-knop svg{width:20px;height:20px}
.aanmeld-hero .hero-brand{grid-area:merk;align-self:start}
.aanmeld-hero .hero-logo{width:min(520px,100%);text-align:center}
.aanmeld-belofte{grid-area:belofte;align-self:start;display:flex;flex-direction:column;align-items:center;text-align:center}
.aanmeld-belofte .hero-text{margin-top:0}
.aanmeld-belofte .checks{margin-top:26px;max-width:46ch;text-align:left}
/* Een tikje lichter dan in site.css: de openingszin erboven blijft de hoofdregel.
   pretty: geen los woord op de laatste regel (zoals "mij." op 1024 px). */
.aanmeld-belofte .checks li{font-weight:500;color:var(--text);text-wrap:pretty}
.aanmeld-belofte .hero-actions{justify-content:center;margin-top:32px}
.aanmeld-noot{margin-top:12px;font-size:14px;color:var(--muted)}
.aanmeld-noot span{white-space:nowrap}   /* alleen breken tussen de twee zinnen */
.aanmeld-belofte .checks a{color:var(--accent-text);text-decoration-thickness:2px;text-underline-offset:3px}

/* Fotoboek: één foto tegelijk, vegen of klikken. Het naamkaartje staat vast op de
   foto; direct eronder de pijlen (die verspringen dus nooit), dan de tekst die
   meewisselt. */
.fotoboek{grid-area:foto;justify-self:center;align-self:start;width:min(400px,100%);display:flex;flex-direction:column;gap:16px}
.fotoboek-raam{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow-deep);background:#0f141c}
.fotoboek-spoor{position:relative;list-style:none;display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.fotoboek-spoor::-webkit-scrollbar{display:none}
/* De focusrand om de foto heen in plaats van erin: op een lichte foto (de training)
   was een rand binnen het beeld nauwelijks te zien. */
.fotoboek-spoor:focus-visible{outline:none}
.fotoboek-raam:has(.fotoboek-spoor:focus-visible){outline:2px solid var(--accent-bright);outline-offset:3px}
.foto{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/5}
.foto img{width:100%;height:100%;object-fit:cover}
.fotoboek-naam{
  position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px);
  display:flex;flex-direction:column;gap:2px;text-align:left;pointer-events:none;
  background:rgba(10,13,18,.84);color:#fff;border-radius:10px;padding:10px 14px;
  font-size:14px;font-weight:600;line-height:1.35;
}
.fotoboek-naam>span{font-size:12px;font-weight:500;color:#c4cbd5}
/* Elk deel op een eigen regel: dan krimpt het kaartje mee met de tekst, in plaats van
   zo breed te blijven als de hele zin op één regel zou zijn. */
.fotoboek-naam>span>span{display:block;white-space:nowrap}
.foto-tekst{text-align:center}
/* Even groot en zwaar als de naam onder een telefoon (27 sep; was 16 px en 700). */
.foto-kop{font-weight:600;color:var(--heading);font-size:17px}
.foto-tekst p+p{margin-top:4px;color:var(--text-2);font-size:15px;line-height:1.6;text-wrap:pretty}
/* Zonder JavaScript staan de drie stukjes verhaal onder elkaar. Met JavaScript (de
   klasse .js staat er al voor de eerste weergave) liggen ze op één plek gestapeld en
   is alleen de tekst bij de actieve foto zichtbaar; zo verspringt er niets als
   rij.js start, en zijn verborgen teksten ook voor schermlezers weg. */
.fotoboek-teksten{display:flex;flex-direction:column;gap:14px}
.js .fotoboek-teksten{display:grid}
.js .foto-tekst{grid-area:1/1;visibility:hidden}
.js .fotoboek:not(.is-klaar) .foto-tekst:first-child,
.js .fotoboek.is-klaar .foto-tekst.is-actief{visibility:visible}
.fotoboek-nav{display:flex;justify-content:center}
/* De pijlen en stipjes houden hun plek al vrij voordat rij.js ze laat zien. */
.js .rij-nav[hidden]{display:flex!important;visibility:hidden}

/* Iconen (Instagram, TikTok) in knoppen en de footer. De symbolen staan één keer in een
   onzichtbare svg (.sprite); dat stond eerst in een style-attribuut, maar de CSP laat
   geen inline stijl toe. */
.sprite{position:absolute}
.icoon{width:18px;height:18px;flex:0 0 auto}
.sociaal-link{display:inline-flex;align-items:center;gap:8px}

/* ============ 2. HET FORMULIER (licht, kaart) ============ */
.aanmeld-grid{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,5vw,80px);align-items:start;
  row-gap:clamp(40px,4vw,48px);   /* onder elkaar: kop naar kaart zoals kop naar inhoud elders */
}
.aanmeld-kop{position:sticky;top:40px;display:flex;flex-direction:column;gap:18px}
.aanmeld-kaart{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(22px,4vw,44px);box-shadow:var(--card-shadow);
}
.aanmeld-kaart noscript .hint{margin-bottom:20px}
/* Keuzerondjes en het vinkje: site.css haalt de focusrand weg en zet er een bleke
   ring voor in de plaats (1,2:1 op wit). Hier weer een echte rand, en de keuzekaart
   kleurt mee. */
.keuze input:focus-visible,.akkoord input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.keuze:has(input:focus-visible){border-color:var(--accent)}
/* Tekstvelden en keuzelijsten krijgen dezelfde echte focusrand (27 sep): de bleke ring
   alleen viel op een veld met een rode rand (na een fout) nauwelijks op. */
.aanmeld-kaart input:focus-visible,.aanmeld-kaart select:focus-visible,.aanmeld-kaart textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Randen van velden en keuzekaarten 3,1:1 op wit (was 1,5:1), zodat je ziet waar je typt. */
.aanmeld-kaart{--field-border:#8a929e}
/* De toestemming is lopende tekst, geen veldlabel: gewoon gewicht. site.css maakte hem via
   .veld > label vet en donker. */
.veld > label.akkoord{font-weight:400;color:var(--text-2)}
/* Een hint die meeleest (onder 18) is leeg tot er iets te zeggen is: dan neemt hij geen
   ruimte in, maar blijft hij bestaan zodat een schermlezer de nieuwe tekst voorleest. */
.veld > .hint[aria-live]:empty{position:absolute}
/* Voorbeelden in de velden leesbaar (4,8:1 in plaats van 2,6:1). */
.aanmeld-kaart input::placeholder,.aanmeld-kaart textarea::placeholder{color:var(--muted)}
.stap h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:20px}
/* Na Volgende of Vorige krijgt de kop van de stap de focus (voor schermlezers en het
   toetsenbord); het is geen knop, dus geen rand. */
.stap h3:focus{outline:none}
/* Tijdens het versturen blijft de knop focusbaar, maar ziet hij er bezig uit. */
.btn[aria-disabled="true"]{opacity:.5;cursor:progress}
.aanmeld-kaart .form-nav{margin-top:24px}
/* De bedankt-kaart staat al in de formulierkaart: geen tweede kaart eromheen. De
   focus is er alleen voor schermlezers, dus geen rand. */
.aanmeld-kaart .succes{background:none;border:0;border-radius:0;padding:0;box-shadow:none;overflow:visible}
.aanmeld-kaart .succes:focus{outline:none}
.succes h3{font-size:clamp(24px,2.8vw,32px);margin:14px 0 12px}
.aanmeld-kaart .succes .checks{margin-top:22px}
/* Even zwaar als dezelfde vinkjes in de kop (500); 600 werd een zwaar blok tekst. */
.aanmeld-kaart .succes .checks li{font-weight:500;color:var(--text)}

/* ============ 3. DE APP (donker, rij telefoons) ============ */
/* Het scherm in het midden is actief; de buren staan ernaast, kleiner en gedimd.
   Vegen via scroll-snap, zonder JavaScript gewoon een veegbare rij. De spacers voor
   en na de rij zorgen dat ook het eerste en laatste scherm in het midden kunnen staan. */
.app-sectie{overflow:hidden}
.schermen{
  position:relative;margin-top:clamp(40px,4vw,48px);
  --scherm:min(280px,66vw);--tussen:clamp(16px,3vw,40px);
}
.schermen::before{
  content:'';position:absolute;left:50%;top:0;width:min(640px,120vw);height:calc(var(--scherm) * 2.1);
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,163,127,.24),rgba(0,163,127,.05) 55%,transparent 75%);
}
.schermen-rij{
  position:relative;list-style:none;display:flex;gap:var(--tussen);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-block:8px 4px;
}
.schermen-rij::-webkit-scrollbar{display:none}
.schermen-rij::before,.schermen-rij::after{content:'';flex:0 0 calc(50% - var(--scherm) / 2 - var(--tussen))}
.schermen-rij:focus-visible{outline-offset:-2px}
.scherm{flex:0 0 var(--scherm);scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
/* Een iPhone: stalen rand, zwarte glasrand, het scherm met de ronding van een echt
   scherm (12,1% van de breedte), dynamic island, home-balkje en de knoppen opzij. Alles
   in verhouding tot --scherm, zodat hij op elk formaat klopt. De schermopnames zijn heel:
   640 x 1386, met statusbalk en tabbalk. */
.scherm .phone{
  --rand:calc(var(--scherm) * .036);
  --glas:calc(var(--scherm) - 4px - 2 * var(--rand));
  width:100%;aspect-ratio:auto;padding:var(--rand);border:2px solid transparent;
  border-radius:calc(var(--glas) * .121 + var(--rand) + 2px);
  background:linear-gradient(#050608,#050608) padding-box,
    linear-gradient(155deg,#737c89,#2b313b 22%,#48505c 50%,#1f242c 76%,#5b6470) border-box;
  box-shadow:0 34px 60px -26px rgba(0,0,0,.75);
}
.scherm .phone::before,.scherm .phone::after{content:'';position:absolute;width:3px;border-radius:1px;background:#4a525e}
.scherm .phone::before{
  left:-4px;top:17%;height:27%;
  background:linear-gradient(#4a525e 0 12%,transparent 12% 28%,#4a525e 28% 58%,transparent 58% 70%,#4a525e 70%);
}
.scherm .phone::after{right:-4px;top:28%;height:12%}
.scherm .phone-screen{height:auto;aspect-ratio:640/1386;border-radius:calc(var(--glas) * .121)}
.scherm .phone-screen::before,.scherm .phone-screen::after{content:'';position:absolute;left:50%;transform:translateX(-50%);pointer-events:none}
.scherm .phone-screen::before{top:1%;width:31%;aspect-ratio:126/37;border-radius:999px;background:#000}
.scherm .phone-screen::after{bottom:.75%;width:35%;height:.55%;border-radius:999px;background:rgba(255,255,255,.78)}
.scherm-cap{text-align:center;font-size:15px;line-height:1.6;color:var(--text-2);max-width:min(30ch,100%);text-wrap:balance}
.scherm-cap b{display:block;color:var(--heading);font-weight:600;font-size:17px;margin-bottom:2px}
.schermen-nav{display:flex;justify-content:center;margin-top:24px;padding-inline:var(--pad)}
/* Stipjes (fotoboek en schermen): alleen een aanwijzer (27 sep), niet klikbaar; je bladert
   met de pijlen (46 px), vegen of de pijltjestoetsen. Het stipje heeft 5,6:1 contrast op
   donker; het actieve is mint en breder, zodat het verschil niet alleen in de kleur zit.
   De pil is altijd 20 px breed en wordt tot een rondje afgesneden: zo animeert alleen de
   afsnijding (clip-path), niet de breedte. */
.rij-nav .carousel-dots{gap:2px;pointer-events:none}
.rij-nav .carousel-dots > span{width:24px;height:24px;display:grid;place-items:center}
.rij-nav .carousel-dots > span::before{content:'';width:20px;height:10px;border-radius:5px;background:var(--muted);clip-path:inset(0 5px round 5px);transition:background .2s,clip-path .2s}
.rij-nav .carousel-dots > span.is-actief::before{background:var(--accent-bright);clip-path:inset(0 round 5px)}

/* ============ AANRAAKDOELEN, STAPPENBALK EN RITME (audit 27 sep 2026) ============ */
/* Veelgestelde vragen: de hele vraag is klikbaar (was alleen de tekstregel, 26 tot 30 px).
   De ruimte zat op details; nu op summary, zodat het beeld gelijk blijft. */
.faq details{padding:0}
.faq summary{padding:18px 0}
.faq details[open] summary{padding-bottom:12px}
.faq details p{margin-top:0;padding-bottom:18px}
/* Footer en de kop van de privacypagina: alles om op te tikken minstens 44 px hoog. */
.footer-links a,.footer-meta a{display:inline-flex;align-items:center;min-height:44px}
.footer-meta{align-items:center}
a.brand{min-height:44px}
.site-header .btn--small{height:44px}
/* Stappenbalk: gedane stappen houden hun mint lijn, alleen de huidige stap heeft mint tekst. */
.steps li.actief:not([aria-current]){color:var(--muted)}
/* Kop naar lead en kop naar inhoud overal gelijk: 18 px en 40 tot 48 px. */
main .section-head{gap:18px}
.faq.mt-l{margin-top:clamp(40px,4vw,48px)}
/* Met JavaScript: alleen het actieve scherm vol in beeld. */
.schermen.is-klaar .scherm{opacity:.38;transform:scale(.9);transition:opacity .45s var(--ease),transform .45s var(--ease);cursor:pointer}
.schermen.is-klaar .scherm.is-actief{opacity:1;transform:none;cursor:default}
.schermen.is-klaar .scherm-cap{transition:opacity .45s var(--ease)}
.schermen.is-klaar .scherm:not(.is-actief) .scherm-cap{opacity:0}

/* ============ 4. BEWEGING ============ */
/* Eén moment: het merkblok komt op bij het laden (rise uit site.css). De foto van
   Jens doet niet mee: die moet er meteen staan. */
@media (prefers-reduced-motion:no-preference){
  .js .aanmeld-belofte .checks{animation:rise .9s .28s var(--ease) both}
  .js .aanmeld-noot{animation:rise .9s .36s var(--ease) both}
}

/* ============ 5. RESPONSIVE ============ */
/* Let op: de kolommen blijven op volle breedte (geen justify-items:center). Het logo
   in .hero-logo is een container (container-type uit site.css) en telt zijn inhoud
   niet mee in zijn breedte; in een krimpende kolom zou het 0 px breed worden. */
/* Laptop met weinig hoogte (1366 x 650, 1536 x 730): logo en fotoboek iets kleiner,
   zodat "Plan een gratis intake" in het eerste scherm blijft. */
@media (min-width:901px) and (max-height:860px){
  .aanmeld-hero .hero-logo{width:min(440px,100%)}
  .fotoboek{width:min(350px,100%)}
}
/* Naast elkaar: het fotoboek tegen de rechterrand van de inhoud, zodat Instagram en TikTok
   erboven precies op de rand van de foto eindigen (en de foto op één lijn staat met de
   formulierkaart eronder). */
@media (min-width:901px){
  .fotoboek{justify-self:end}
}
@media (max-width:900px){
  .aanmeld-hero-grid{
    grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"sociaal" "merk" "foto" "belofte";
    text-align:center;row-gap:24px;padding-block:14px 52px;
  }
  .aanmeld-sociaal{position:static;grid-area:sociaal;justify-self:end}
  .fotoboek{width:min(440px,100%)}
  .aanmeld-belofte .hero-text{max-width:30ch}
  .aanmeld-grid{grid-template-columns:1fr}
  .aanmeld-kop{position:static}
}
@media (max-width:840px){
  /* site.css centreert de footer op smal scherm, maar het merk bleef links staan */
  .footer-brand{align-items:center}
}
@media (max-width:640px){
  .aanmeld-kaart{border-radius:var(--r-lg)}
  .section-foot .btn{width:100%}
  .succes .actions .btn{width:100%}
  /* De stappenbalk ook op een telefoon 12 px (site.css zette hem op 10 px, te klein). */
  .steps li{font-size:12px;letter-spacing:.02em}
}