:root{
  --bg:#EEF5F3; --card:#FFFFFF; --ink:#26283A; --muted:#6A6F80; --line:#DFE6E8;
  --primary:#F2557A; --primary-press:#D63F64; --soft-primary:#FFE5EB;
  --teal:#169C8E; --soft-teal:#DCF2EE; --sun:#FFC845;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --bg:#141820; --card:#1E2330; --ink:#EEF0F6; --muted:#A4A9B8; --line:#2F3544;
    --primary:#FF6F8F; --primary-press:#E85478; --soft-primary:#3A2230;
    --teal:#3CC9BA; --soft-teal:#193632; --sun:#FFD35C;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Fredoka",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.45;min-height:100vh;font-size:17px}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.app{max-width:520px;margin:0 auto;padding:16px 16px 120px}

/* Kop */
.top{display:flex;align-items:center;gap:10px;padding:4px 2px 14px}
.top svg{width:34px;height:34px}
.brand{font-weight:700;font-size:1.35rem;letter-spacing:-.01em}
.brand b{color:var(--primary);font-weight:700}

/* Kaart per stap */
.card{background:var(--card);border-radius:24px;padding:22px 20px 24px;box-shadow:0 1px 2px rgba(20,30,40,.05),0 8px 24px rgba(20,30,40,.06)}
.progress{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.bar{flex:1;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--teal);border-radius:99px;transition:width .3s ease}
.progress span{color:var(--muted);font-weight:500;font-size:.9rem;white-space:nowrap}
h1{font-weight:700;font-size:1.65rem;line-height:1.15;letter-spacing:-.01em}
.intro{color:var(--muted);margin-top:6px}
.step{display:none}.step.on{display:block}

/* Velden */
.field{margin-top:18px}
.field > label,.lbl{display:block;font-weight:600;margin-bottom:6px}
.hint{color:var(--muted);font-size:.9rem;margin-top:6px}
input[type=text],input[type=tel],input[type=url],input[type=date],input[type=time],input[type=number]{
  width:100%;height:54px;padding:0 16px;border-radius:14px;border:2px solid var(--line);background:var(--card);font-size:1.05rem}
input:focus{border-color:var(--teal);outline:none}
input::placeholder{color:var(--muted);opacity:.7}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.err-inline{color:var(--primary);font-weight:600;font-size:.92rem;margin-top:6px}

/* Leeftijdsteller */
.stepper{display:flex;align-items:center;gap:14px}
.stepper button{width:54px;height:54px;border-radius:50%;border:2px solid var(--line);background:var(--card);font-size:1.6rem;font-weight:600;cursor:pointer;line-height:1}
.stepper button:active{transform:scale(.94)}
.stepper output{font-weight:700;font-size:2.2rem;min-width:56px;text-align:center}
.stepper small{color:var(--muted)}

/* Schakelaar */
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;background:var(--bg);cursor:pointer;font-weight:500}
.switch input{appearance:none;width:52px;height:30px;border-radius:99px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background .2s}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.switch input:checked{background:var(--teal)}
.switch input:checked::after{transform:translateX(22px)}

/* Keuzeknoppen */
.seg{display:grid;gap:8px}
.seg.cols2{grid-template-columns:1fr 1fr}
.opt{display:flex;align-items:center;gap:10px;min-height:54px;padding:10px 14px;border-radius:14px;border:2px solid var(--line);background:var(--card);cursor:pointer;font-weight:500;text-align:left}
.opt[aria-pressed=true]{border-color:var(--teal);background:var(--soft-teal)}
.opt .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center}
.opt[aria-pressed=true] .dot{border-color:var(--teal);background:var(--teal)}
.opt[aria-pressed=true] .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}

/* Thema-tegels */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.tile{border:2px solid var(--line);background:var(--card);border-radius:18px;padding:0 12px 14px;overflow:hidden;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-height:96px}
.tile .tphoto{display:block;height:84px;margin:0 -12px 22px;background-color:var(--soft-primary);background-size:cover;background-position:center;position:relative}
.tile .tphoto .em{position:absolute;left:10px;bottom:-16px;width:36px;height:36px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:20px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.tile .tphoto.plain{background-color:var(--bg);display:grid;place-items:center}
.tile .tphoto.plain .big-em{font-size:40px}
.tile strong{font-weight:600}
.tile small{color:var(--muted);font-size:.82rem;line-height:1.25}
.tile[aria-pressed=true]{border-color:var(--primary);background:var(--soft-primary)}
.tile.special small{color:var(--primary)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid var(--line);background:var(--card);border-radius:99px;padding:8px 14px;font-weight:500;cursor:pointer}
.chip[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fff}
.addrow{display:flex;gap:8px;margin-top:10px}
.addrow input{flex:1}
.addbtn{height:54px;padding:0 18px;border-radius:14px;border:none;background:var(--soft-teal);color:var(--teal);font-weight:600;cursor:pointer;white-space:nowrap}
.list{list-style:none;margin-top:10px;display:grid;gap:8px}
.list li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--bg);font-weight:500}
.list li > span{flex:1;min-width:0;overflow-wrap:break-word;hyphens:auto}
.list li .tk{white-space:nowrap}
.list button{border:none;background:none;color:var(--muted);font-size:1.3rem;cursor:pointer;line-height:1;padding:4px 6px}
.empty{color:var(--muted);font-size:.92rem;margin-top:8px}
.giftform{display:grid;gap:8px}
.giftform .addbtn{width:100%}
.kidPhotoBtn img{width:64px;height:64px;border-radius:50%}
.linkish{background:none;border:none;color:var(--primary);font-weight:600;cursor:pointer;margin-top:6px;padding:0}
.photoBtn{display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 14px;border-radius:14px;border:2px dashed var(--line);color:var(--muted);font-weight:500;cursor:pointer}
.photoBtn img{width:40px;height:40px;object-fit:cover;border-radius:8px}
.list li .thumb{width:44px;height:44px;object-fit:cover;border-radius:10px;flex:none}
.list li .ph{border:none;background:none;font-size:1.15rem;cursor:pointer;padding:4px}
.list li .gname{display:block}
.list li .tk{font-size:.85rem;font-weight:600;color:var(--teal);border:2px solid var(--soft-teal);border-radius:99px;padding:4px 10px}
.list li .tk[aria-pressed=true]{background:var(--teal);color:#fff;border-color:var(--teal)}
.list li .gurl{display:block;color:var(--teal);font-size:.85rem;font-weight:500}

/* Startscherm */
.start{text-align:center;padding:8px 4px 4px}
.reel{overflow:hidden;margin:-22px -20px 20px;padding:20px 0 10px;border-radius:24px 24px 0 0;background:var(--soft-teal);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:14px;width:max-content;animation:marquee 45s linear infinite;padding:0 7px}
.shot{width:150px;flex:none;background:#fff;padding:6px 6px 8px;border-radius:10px;box-shadow:0 6px 16px rgba(20,30,40,.14);transform:rotate(var(--r))}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block;background:#eee}
.shot span{display:block;font-size:.8rem;font-weight:600;color:#26283A;margin-top:5px;text-align:center}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.track{animation:none}.reel{overflow-x:auto}}
.start h1{font-size:1.9rem}
.start .intro{max-width:30ch;margin:8px auto 0}
.big{display:block;width:100%;height:58px;border:none;border-radius:99px;background:var(--primary);color:#fff;font-weight:600;font-size:1.15rem;cursor:pointer;margin-top:22px}
.big:active{background:var(--primary-press)}
.examples{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.examples p{color:var(--muted);font-size:.95rem;margin-bottom:10px}
.examples .chips{justify-content:center}

/* Overzicht */
.sum{list-style:none;margin-top:16px;border-radius:16px;background:var(--bg);padding:4px 14px}
.sum li{display:grid;grid-template-columns:92px 1fr auto;gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.sum li:last-child{border-bottom:none}
.sum dt,.sum .k{color:var(--muted);font-size:.92rem}
.sum .v{font-weight:500;overflow-wrap:break-word;hyphens:auto}
.sum button{border:none;background:none;color:var(--teal);font-weight:600;cursor:pointer}

/* Onderbalk */
.bottom{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.bottom .in{max-width:520px;margin:0 auto;display:flex;gap:10px}
.back{height:54px;padding:0 20px;border-radius:99px;border:2px solid var(--line);background:var(--card);font-weight:600;cursor:pointer}
.next{flex:1;height:54px;border-radius:99px;border:none;background:var(--primary);color:#fff;font-weight:600;font-size:1.08rem;cursor:pointer}
.next:active{background:var(--primary-press)}
.err{color:var(--primary);font-weight:600;max-width:520px;margin:0 auto 8px;text-align:center;font-size:.95rem}
.err:empty{display:none}

/* Laden en resultaat */
.loading{text-align:center;padding:70px 10px}
.loading svg{width:110px;height:110px;animation:float 1.6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.loading p{font-weight:600;font-size:1.3rem;margin-top:14px}
.loading small{color:var(--muted)}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tools .back{width:100%}
.tools .next{grid-column:1 / -1}
.frame{margin-top:14px;border-radius:24px;overflow:hidden;box-shadow:0 8px 24px rgba(20,30,40,.08)}
iframe{display:block;width:100%;height:900px;border:0;background:#fff}
.note{color:var(--muted);font-size:.92rem;margin-top:12px}
.note.warn{color:var(--primary)}
[hidden]{display:none !important}
@media (prefers-reduced-motion: reduce){.loading svg{animation:none}.bar i{transition:none}}

/* ===== Chique laag: glas, rustige kleuren (voor de ouder) ===== */
:root{
  --bg:#F3F0F7; --card:rgba(255,255,255,.62); --ink:#1E2038; --muted:#666A80; --line:rgba(30,32,56,.12);
  --primary:#2E3163; --primary-press:#22254E; --soft-primary:rgba(46,49,99,.08);
  --teal:#3B6E66; --soft-teal:rgba(59,110,102,.12); --sun:#E7C98F;
  --glass:rgba(255,255,255,.55); --glass-border:rgba(255,255,255,.75); --field:rgba(255,255,255,.72);
  --shadow:0 1px 2px rgba(30,32,56,.04),0 18px 48px rgba(30,32,56,.10);
  --ink-fixed:#1E2038; --hero:#22254E;
  --blob1:#E9DDF7; --blob2:#FBE3D6; --blob3:#F9DCE6;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12131F; --card:rgba(40,42,66,.55); --ink:#EEEFF7; --muted:#A3A6BC; --line:rgba(255,255,255,.12);
    --primary:#B9BCF2; --primary-press:#9EA2E6; --soft-primary:rgba(185,188,242,.12);
    --teal:#8CC7BC; --soft-teal:rgba(140,199,188,.14); --sun:#E7C98F;
    --glass:rgba(36,38,60,.55); --glass-border:rgba(255,255,255,.10); --field:rgba(255,255,255,.06);
    --shadow:0 18px 48px rgba(0,0,0,.35); --hero:#1A1C38;
    --blob1:#2C2350; --blob2:#3A2433; --blob3:#33203A;
  }
}
body{background-color:var(--bg);background-image:
  radial-gradient(40rem 30rem at 0% 0%,var(--blob1),transparent 70%),
  radial-gradient(36rem 28rem at 100% 20%,var(--blob2),transparent 70%),
  radial-gradient(40rem 30rem at 30% 100%,var(--blob3),transparent 70%);background-attachment:fixed}
h1,.brand{font-family:"Bricolage Grotesque","Fredoka",system-ui,sans-serif;font-weight:700;letter-spacing:-.025em}
h1{font-size:1.8rem;line-height:1.1}
.card{background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--glass-border);box-shadow:var(--shadow);border-radius:28px}
.step.on{animation:stepIn .32s cubic-bezier(.2,.7,.2,1)}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bar{height:6px;background:var(--line)}
.bar i{background:linear-gradient(90deg,var(--primary),var(--teal))}
.progress span{font-weight:500;color:var(--muted);font-size:.85rem;letter-spacing:.02em}
.next,.big{background:var(--primary);color:#fff;border:none;font-weight:600;letter-spacing:.01em;
  box-shadow:0 10px 24px rgba(46,49,99,.25);transition:transform .12s,box-shadow .12s,background .12s}
.next:active,.big:active{transform:scale(.98);box-shadow:0 4px 12px rgba(46,49,99,.25)}
.back{background:var(--field);border:1px solid var(--line);font-weight:500}
input[type=text],input[type=tel],input[type=url],input[type=date],input[type=time],input[type=number]{
  background:var(--field);border:1px solid var(--line);transition:border-color .15s,box-shadow .15s}
input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--soft-primary)}
.switch,.list li,.sum{background:var(--field)}
.sum{border:1px solid var(--line)}
.switch input:checked{background:var(--primary)}
.opt,.tile,.chip,.stepper button{background:var(--field);border:1px solid var(--line)}
.opt[aria-pressed=true]{border-color:var(--primary);background:var(--soft-primary);box-shadow:0 0 0 1px var(--primary) inset}
.opt[aria-pressed=true] .dot{border-color:var(--primary);background:var(--primary)}
.tile{transition:transform .15s,box-shadow .15s,border-color .15s}
.tile[aria-pressed=true]{border-color:var(--primary);background:var(--glass);box-shadow:0 0 0 1px var(--primary) inset,0 10px 24px rgba(30,32,56,.12);transform:translateY(-2px)}
.tile strong{font-family:"Bricolage Grotesque",sans-serif;font-weight:700}
.tile.special small{color:var(--teal)}
.tile .tphoto .em{background:#fff}
.chip[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:#fff}
.stepper button{box-shadow:none}
.stepper button:active{transform:scale(.94)}
.stepper output{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:2.4rem}
.addbtn{border:1px solid var(--line);background:var(--soft-teal);color:var(--teal)}
.linkish,.note.warn,.err,.err-inline{color:var(--primary)}
.bottom{background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-top:1px solid var(--glass-border)}
/* startscherm */
.start{text-align:left;padding:0}
.hero{position:relative;margin:-22px -20px 0;padding:30px 22px 26px;color:#fff;border-radius:27px 27px 0 0;overflow:hidden;
  background:radial-gradient(28rem 16rem at 100% 0%,rgba(231,201,143,.28),transparent 70%),linear-gradient(160deg,#2E3163,var(--hero))}
.hero .kicker{display:inline-block;background:rgba(255,255,255,.12);color:#F3E3C2;font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.22)}
.hero h1{color:#fff;font-size:2.1rem;margin-top:14px}
.hl{background:none;color:var(--sun);padding:0}
.hero .intro{color:rgba(255,255,255,.78);max-width:32ch;margin:12px 0 0}
.hero .big{background:var(--sun);color:#1E2038;box-shadow:0 10px 28px rgba(0,0,0,.25);margin-top:22px}
.hero .big:active{box-shadow:0 4px 12px rgba(0,0,0,.25)}
.stk{position:absolute;opacity:.85}
.stk.s1{width:40px;top:18px;right:22px;transform:rotate(12deg);animation:wob 4s ease-in-out infinite}
.stk.s2{width:16px;top:74px;right:28px}
.stk.s3{width:42px;top:26px;right:74px;transform:rotate(-8deg)}
.stk.s1 path{fill:var(--sun);stroke:none}.stk.s2 circle{fill:#8CC7BC;stroke:none}.stk.s3 path{stroke:rgba(255,255,255,.5)}
@keyframes wob{50%{transform:rotate(-6deg) scale(1.05)}}
.peek{font-weight:600;margin:22px 0 10px;color:var(--muted)}
.minis{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini{position:relative;border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:12px;text-align:left;cursor:pointer;color:#fff;overflow:hidden;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;box-shadow:0 12px 28px rgba(30,32,56,.18);transition:transform .15s,box-shadow .15s}
.mini:active{transform:scale(.98)}
.mini strong{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.05rem;position:relative}
.mini span{font-size:.85rem;opacity:.9;position:relative}
.mfoot{background:repeating-linear-gradient(180deg,#2C7A3C 0 22px,#286F37 22px 44px)}
.mfoot svg{position:absolute;width:86px;top:10px;left:50%;margin-left:-43px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.2))}
.mlaser{background:#1E1548}
.mlaser svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 4px #FF4FB0)}
.mlaser em{position:absolute;top:10px;left:12px;font-style:normal;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:2.6rem;color:#FF4FB0;text-shadow:0 0 14px rgba(255,79,176,.7)}
.field > label.switch{display:flex}
.start .reel{margin:0 -20px;border-radius:0;background:var(--hero);padding:6px 0 22px;-webkit-mask-image:none;mask-image:none}
.shot{box-shadow:0 10px 24px rgba(0,0,0,.25)}
.tile .tphoto.plain{background-color:transparent}
@media (prefers-reduced-motion: reduce){.step.on,.stk.s1{animation:none}}

/* ===== Leven: vraag en antwoord duidelijk uit elkaar, elke stap een eigen sfeer ===== */
@property --blob1{syntax:"<color>";inherits:true;initial-value:#E9DDF7}
@property --blob2{syntax:"<color>";inherits:true;initial-value:#FBE3D6}
@property --blob3{syntax:"<color>";inherits:true;initial-value:#F9DCE6}
:root{--answer:#FFFFFF;--answer-border:rgba(30,32,56,.10);--done:#6741D9;
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%236741D9'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media (prefers-color-scheme: dark){:root{--answer:rgba(255,255,255,.09);--answer-border:rgba(255,255,255,.14);--done:#B1A0F5}}
body{transition:--blob1 1.2s ease,--blob2 1.2s ease,--blob3 1.2s ease}

/* Stapkop */
.step > h1{font-size:2rem;line-height:1.05;text-wrap:balance}
.step > .intro{font-size:1rem;margin-top:8px;max-width:34ch}

/* Vragen: kopletter, donker, duidelijk */
.field{margin-top:26px}
.field > label,.lbl,.row2 .lbl{font-family:"Bricolage Grotesque","Fredoka",sans-serif;font-weight:700;font-size:1.06rem;letter-spacing:-.012em;color:var(--ink);margin-bottom:9px}
.field > label span,.lbl span{font-family:"Fredoka",sans-serif;font-size:.88rem;letter-spacing:0}
.hint{font-size:.86rem;line-height:1.4;margin-top:8px}
.field > label.switch,.field > label.photoBtn{font-family:"Fredoka",sans-serif;font-weight:500;font-size:1rem;letter-spacing:0;margin-bottom:0}
.photoBtn{background:var(--answer);border-color:var(--answer-border)}

/* Antwoorden: witte vakken, rustige tekst, vinkje als het is ingevuld */
input[type=text],input[type=tel],input[type=url],input[type=date],input[type=time],input[type=number]{
  background:var(--answer);border:1px solid var(--answer-border);font-weight:500;font-size:1.06rem;color:var(--ink);
  box-shadow:0 1px 2px rgba(30,32,56,.05),0 4px 14px rgba(30,32,56,.05)}
input::placeholder{color:var(--muted);opacity:.55;font-weight:400}
input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--soft-primary),0 4px 14px rgba(30,32,56,.06)}
.step input[type=text]:not(:placeholder-shown):not(#actNew):not(#giftNew):not(#giftUrl),
.step input[type=tel]:not(:placeholder-shown){
  padding-right:46px;background-image:var(--check);background-repeat:no-repeat;background-position:right 14px center;background-size:20px;
  animation:filled .35s cubic-bezier(.2,.8,.2,1)}
@keyframes filled{from{background-size:0}60%{background-size:24px}to{background-size:20px}}
input[type=date],input[type=time]{font-variant-numeric:tabular-nums}

/* Keuzes: gekozen = vol, met vinkje */
.opt{background:var(--answer);border:1px solid var(--answer-border);font-weight:500;transition:border-color .15s,background .15s,transform .12s}
.opt:active{transform:scale(.98)}
.opt[aria-pressed=true]{background:var(--soft-primary);border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset;font-weight:600}
.opt[aria-pressed=true] .dot{background:var(--done);border-color:var(--done)}
.chip{background:var(--answer);border:1px solid var(--answer-border);transition:background .15s,color .15s,transform .12s}
.chip:active{transform:scale(.94)}
.chip[aria-pressed=true]{animation:pop .3s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{50%{transform:scale(1.08)}}
.switch{background:var(--answer);border:1px solid var(--answer-border)}
.switch input:checked{background:var(--done)}
.stepper button{background:var(--answer);border:1px solid var(--answer-border)}
.stepper output{color:var(--primary)}

/* Thema-tegels: foto zoomt, gekozen tegel krijgt een vinkje */
.tile{background:var(--answer);border:1px solid var(--answer-border);position:relative}
.tile .tphoto{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tile[aria-pressed=true] .tphoto{transform:scale(1.04)}
.tile::after{content:"";position:absolute;top:8px;right:8px;width:26px;height:26px;background:var(--check) center/contain no-repeat;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));transform:scale(0);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.tile[aria-pressed=true]::after{transform:scale(1)}

/* Voortgang: het sterretje uit het logo rijdt mee en springt bij elke stap */
.progress{margin-bottom:22px;gap:20px}
.sum .v{hyphens:manual;overflow-wrap:anywhere}
.bar{overflow:visible;height:6px}
.bar i{position:relative;border-radius:99px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bar i::after{content:"";position:absolute;right:-10px;top:50%;width:22px;height:22px;margin-top:-11px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1l2.8 7.1 7.7.5-5.9 4.9 1.9 7.4L12 16.8l-6.5 4.1 1.9-7.4-5.9-4.9 7.7-.5z' fill='%23E7C98F' stroke='%231E2038' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.bar i.hop::after{animation:hop .6s cubic-bezier(.2,.8,.2,1)}
@keyframes hop{40%{transform:translateY(-9px) rotate(40deg) scale(1.15)}100%{transform:none}}

/* Volgende-knop met pijl die meebeweegt */
.next{display:inline-flex;align-items:center;justify-content:center;gap:10px}
#nextBtn::after{content:"";width:18px;height:18px;background:currentColor;transition:transform .2s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
#nextBtn:hover::after{transform:translateX(3px)}

/* Overzicht: label klein, antwoord groot */
.sum{background:var(--answer)}
.sum .k{font-size:.82rem;font-weight:500;color:var(--muted)}
.sum .v{font-weight:600}
::selection{background:var(--sun);color:#1E2038}
input{caret-color:var(--primary)}
@media (prefers-reduced-motion: reduce){
  body{transition:none}.bar i,.tile .tphoto,.tile::after{transition:none}
  .bar i.hop::after,.chip[aria-pressed=true],.step input{animation:none}
}

/* ===== Kleur: elke stap een eigen feestkleur ===== */
body{--step:#6741D9;--on-step:#fff;
  --primary:var(--step);--primary-press:color-mix(in srgb,var(--step) 85%,black);--on-primary:var(--on-step);
  --soft-primary:color-mix(in srgb,var(--step) 13%,transparent);
  --rainbow:linear-gradient(90deg,#6741D9,#C2255C,#E8590C)}
@media (prefers-color-scheme: dark){
  body{--primary:color-mix(in srgb,var(--step) 62%,white);--on-primary:#14162B;--soft-primary:color-mix(in srgb,var(--step) 22%,transparent)}
}
.next,.big,.chip[aria-pressed=true]{color:var(--on-primary)}
@media (prefers-color-scheme: dark){.next,.big,.chip[aria-pressed=true]{color:var(--on-primary)}}
.next,.big{box-shadow:0 10px 24px color-mix(in srgb,var(--primary) 35%,transparent);transition:background .4s,box-shadow .4s,transform .12s}
.next:active,.big:active{background:var(--primary-press)}
.step > h1::after{content:"";display:block;width:72px;height:10px;margin-top:10px;background:#C2255C;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 10'%3E%3Cpath d='M2 6c6-6 11 2 17-2s11-4 17 0 11 4 17 0 11-4 17 0' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 10'%3E%3Cpath d='M2 6c6-6 11 2 17-2s11-4 17 0 11 4 17 0 11-4 17 0' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.bar i{background:var(--rainbow);background-repeat:no-repeat}
.stepper output{color:var(--primary);transition:color .4s}
.opt[aria-pressed=true],.tile[aria-pressed=true]{transition:border-color .4s,background .4s}

/* Startscherm: kleurrijk en duidelijk */
.hero{background:
  radial-gradient(18rem 12rem at 95% 5%,rgba(255,212,59,.45),transparent 70%),
  linear-gradient(150deg,#6741D9 0%,#C2255C 58%,#E8590C 115%)}
.hero h1{font-size:2.2rem;line-height:1.04;margin-top:0;max-width:11ch}
.hl{color:#FFE066}
.hero .intro{color:rgba(255,255,255,.92);font-size:1.02rem;max-width:30ch}
.hero .big{background:#FFE066;color:#1E2038;box-shadow:0 12px 28px rgba(60,10,40,.35)}
.hero .fine{margin-top:12px;font-size:.84rem;color:rgba(255,255,255,.85);text-align:center}
.stk.s1 path{fill:#FFE066}.stk.s2 circle{fill:#63E6BE}.stk.s3 path{stroke:rgba(255,255,255,.7)}
.start .reel{background:transparent;padding:18px 0 4px}
.perks{list-style:none;display:grid;gap:16px;margin-top:22px}
.perks li{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:center}
.perks .pi{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 15%,var(--answer));transform:rotate(-4deg)}
.perks li:nth-child(even) .pi{transform:rotate(4deg)}
.perks svg{width:24px;height:24px;fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.perks strong{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.01em;line-height:1.2}
.perks div span{display:block;color:var(--muted);font-size:.9rem;line-height:1.35;margin-top:2px}
@media (prefers-color-scheme: dark){.perks svg{stroke:color-mix(in srgb,var(--c) 60%,white)}}

/* Eind: ballonnen blazen */
.loading{padding:56px 10px 70px}
.balloons{display:flex;justify-content:center;align-items:flex-end;gap:8px;height:190px}
.balloons span{position:relative;width:52px;height:62px;border-radius:50% 50% 46% 46%/56% 56% 44% 44%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.65) 0 9%,transparent 22%),var(--c);
  box-shadow:inset -6px -8px 0 rgba(0,0,0,.08);transform-origin:50% 120%;
  animation:inflate 1.1s cubic-bezier(.2,.8,.2,1) var(--d) both,rise 2.4s ease-in-out calc(var(--d) + 1.1s) infinite alternate}
.balloons span::before{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:8px;margin-left:-5px;background:var(--c);clip-path:polygon(50% 0,100% 100%,0 100%)}
.balloons span::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:70px;margin-left:-1px;background:linear-gradient(var(--muted),transparent);opacity:.6}
.balloons span:nth-child(odd){margin-bottom:34px}
@keyframes inflate{from{transform:scale(.15);opacity:0}60%{opacity:1}to{transform:scale(1)}}
@keyframes rise{from{transform:translate(0,0) rotate(-3deg)}to{transform:translate(var(--x),-26px) rotate(4deg)}}
.loading p{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.5rem;margin-top:26px;letter-spacing:-.015em}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
@media (prefers-reduced-motion: reduce){.balloons span{animation:none}}

/* ===== Pakketten ===== */
input[type=email]{width:100%;height:54px;padding:0 16px;border-radius:14px;background:var(--answer);border:1px solid var(--answer-border);font-size:1.06rem;font-weight:500;color:var(--ink);box-shadow:0 1px 2px rgba(30,32,56,.05),0 4px 14px rgba(30,32,56,.05)}
.prices{margin-top:30px}
.prices h2,.pay h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.45rem;letter-spacing:-.02em;line-height:1.1}
.prices > .hint{margin-top:6px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.plan{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;padding:16px 14px;border-radius:20px;
  background:var(--answer);border:1px solid var(--answer-border);color:var(--ink);font:inherit;
  box-shadow:0 1px 2px rgba(30,32,56,.05),0 8px 20px rgba(30,32,56,.06)}
.plan::before{content:"";position:absolute;inset:0 0 auto;height:5px;border-radius:20px 20px 0 0;background:var(--c)}
.plan .pn{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.05rem;color:var(--c);margin-top:2px}
.plan .pp{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.65rem;letter-spacing:-.02em;line-height:1.1}
.plan .pp small{display:block;margin-top:2px;font-family:"Fredoka",sans-serif;font-weight:500;font-size:.8rem;color:var(--muted);letter-spacing:0}
.plan .pd{font-size:.86rem;line-height:1.35;color:var(--muted)}
.plan .badge{align-self:flex-start;font-size:.72rem;font-weight:600;line-height:1.2;padding:3px 8px;border-radius:99px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
@media (prefers-color-scheme: dark){.plan .pn,.plan .badge{color:color-mix(in srgb,var(--c) 55%,white)}}
button.plan{padding-bottom:42px;cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .2s}
button.plan:active{transform:scale(.98)}
button.plan[aria-checked=true]{border-color:var(--c);box-shadow:0 0 0 2px var(--c) inset,0 12px 26px color-mix(in srgb,var(--c) 22%,transparent)}
button.plan::after{content:"";position:absolute;bottom:12px;right:12px;width:22px;height:22px;background:var(--check) center/contain no-repeat;transform:scale(0);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
button.plan[aria-checked=true]::after{transform:scale(1)}
.pay{margin-top:16px}
.pay > .hint{margin-top:6px}
.kidnames{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.havepass{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.havepass summary{cursor:pointer;font-weight:600;color:var(--primary)}
.havepass .addrow{margin-top:12px}
.passnote{display:grid;gap:4px;margin-top:16px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,#F59F00 16%,var(--answer));border:1px solid color-mix(in srgb,#F59F00 40%,transparent)}
.passnote strong{font-family:"Bricolage Grotesque",sans-serif;font-size:1.05rem;letter-spacing:.01em}
.passnote span{font-size:.88rem;color:var(--muted)}
@media (max-width:360px){.plans,.kidnames{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){button.plan::after{transition:none}}

.sum button,.addbtn{color:var(--primary)}
.addbtn{background:var(--soft-primary)}
.tile.special small{color:#C2255C}

/* Vergelijkingstabel pakketten */
.compare{margin-top:16px;border-radius:20px;background:var(--answer);border:1px solid var(--answer-border);overflow:hidden;
  box-shadow:0 1px 2px rgba(30,32,56,.05),0 8px 20px rgba(30,32,56,.06)}
.compare table{width:100%;border-collapse:collapse;font-size:.86rem;line-height:1.3}
.compare th,.compare td{padding:10px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:none}
.compare tbody th{text-align:left;font-weight:500;padding:10px 6px 10px 14px;color:var(--ink);hyphens:manual}
.compare td{text-align:center;width:16%}
.compare thead th{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.8rem;text-align:center;padding:14px 2px 10px;letter-spacing:-.01em}
.compare thead th:nth-child(3){color:#C2255C}.compare thead th:nth-child(4){color:#6741D9}
@media (prefers-color-scheme: dark){.compare thead th:nth-child(3){color:#F08CB0}.compare thead th:nth-child(4){color:#B1A0F5}}
.compare thead small{display:block;font-family:"Fredoka",sans-serif;font-weight:500;font-size:.74rem;color:var(--muted);margin-top:2px}
.compare .yes{display:inline-block;width:20px;height:20px;background:var(--check) center/contain no-repeat;vertical-align:middle}
.compare .no{color:var(--muted);opacity:.6}
.compare td b{font-weight:600;font-size:.82rem}
.compare .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.compare[data-plan=feestje] tr > :nth-child(3),.compare[data-plan=gezinspas] tr > :nth-child(4){background:var(--soft-primary)}
.pay .compare{margin-top:14px}

/* Volgorde en tijden van het programma */
.actplan{list-style:none;display:grid;gap:8px;counter-reset:act}
.actplan li{display:grid;grid-template-columns:104px 1fr 40px 40px;gap:6px;align-items:center;padding:6px;border-radius:16px;background:var(--answer);border:1px solid var(--answer-border)}
.actplan input[type=time]{height:44px;padding:0 10px;font-size:.98rem;box-shadow:none;background:var(--field)}
.actplan span{font-weight:600;min-width:0;hyphens:auto;overflow-wrap:break-word;padding-left:4px}
.actplan .mv{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--field);display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:transform .12s}
.actplan .mv:active{transform:scale(.92)}
.actplan .mv:disabled{opacity:.3;cursor:default}
.actplan .mv svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Akkoord vóór betalen en links onderaan */
.consent{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;margin-top:18px;font-size:.88rem;line-height:1.4;color:var(--ink);cursor:pointer}
.consent input{width:22px;height:22px;margin-top:1px;accent-color:var(--primary);cursor:pointer}
.consent a,.legal-links a{color:var(--primary);font-weight:600}
.legal-links{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:.86rem}
.legal-links a{text-decoration:none;opacity:.85}
.legal-links a:hover{text-decoration:underline}

/* Herken je dit? pijnpunt boven, oplossing eronder */
.pains{margin-top:28px}
.pains h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.6rem;letter-spacing:-.025em;line-height:1.1}
.pains .perks{margin-top:16px;gap:20px}
.pains .perks li{align-items:start}
.pains .pi{margin-top:2px}
.pain{display:block;font-style:normal;color:var(--muted);font-size:.9rem;line-height:1.35;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--c) 60%,transparent);text-decoration-thickness:2px}
.pains strong{margin-top:4px}
.big.again{margin-top:24px}

.topmsg{margin:0 0 14px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,#F59F00 18%,var(--answer));border:1px solid color-mix(in srgb,#F59F00 45%,transparent);font-weight:600;line-height:1.4}

/* ===== Logo en woordmerk ===== */
.top{gap:12px;padding:6px 2px 16px}
.top .mark{width:42px;height:42px;flex:none;transform:rotate(-6deg)}
.wm{font-family:"Bricolage Grotesque","Fredoka",system-ui,sans-serif;font-weight:800;font-size:1.9rem;line-height:1;letter-spacing:-.045em;color:var(--ink);font-variation-settings:"opsz" 96}
.wm .i{position:relative;display:inline-block}
.wm .i svg{position:absolute;left:50%;top:-.02em;width:.62em;height:.57em;transform:translate(-50%,-26%) rotate(14deg)}