/* Elio: de huisstijl uit data/design.md (Dropbox), overgenomen uit het prototype van
   2026-09-14. Light theme, geen dark mode. Beweging alleen in CSS, en alles uit onder
   prefers-reduced-motion. Fonts zelfgehost (OFL, zie fonts/OFL.txt). */

@font-face{font-family:"Fredoka";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/fredoka-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(../fonts/nunito-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --turquoise:#14E3D3; --turquoise-donker:#0FC0B2; --paars:#6A5AE0; --paars-donker:#5546C9; --paars-licht:#E9E6FF;
  --roze:#FFB1F2; --roze-licht:#FFE3F9; --oranje:#FF7A30; --creme:#FFF6E5; --wit:#FFFFFF;
  --inkt:#1E1B3A; --inkt-zacht:#5B5878; --lijn:#E4DFF2; --fout:#C8285A; --goed:#128A5A;
  --schaduw:0 6px 20px rgba(30,27,58,.08);
  --kop:"Fredoka","Nunito","Segoe UI",system-ui,sans-serif;
  --tekst:"Nunito","Segoe UI",system-ui,sans-serif;
  --breed:480px;
}
*{box-sizing:border-box}
html{background:var(--creme)}
body{margin:0;background:var(--creme);color:var(--inkt);font-family:var(--tekst);font-size:16px;line-height:1.55}
h1,h2,h3{font-family:var(--kop);font-weight:600;line-height:1.15;margin:0;text-wrap:balance;letter-spacing:.005em}
h1{font-size:28px}h2{font-size:20px}h3{font-size:17px}
p{margin:0}
a{color:var(--paars-donker)}
button{font:inherit;cursor:pointer}
[tabindex="-1"]:focus{outline:none}
html:not(.js) .alleen-js{display:none}
html:not(.js) .paneel{flex:none;margin-bottom:28px}

/* --- de pagina: telefoonbreedte, gecentreerd op een groot scherm --- */
.pagina{position:relative;max-width:var(--breed);margin:0 auto;padding:28px 22px 40px;display:flex;flex-direction:column}
.pagina > form{display:flex;flex-direction:column;flex:1}

code{font-family:ui-monospace,Consolas,monospace}

/* --- bouwstenen --- */
.illustratie{display:flex;justify-content:center;margin-bottom:22px}
.illustratie svg{width:min(78%,290px);height:auto;max-width:100%;overflow:visible}
.illustratie.klein svg{width:150px}
.kop{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.kop p{color:var(--inkt-zacht)}
.stap{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--inkt-zacht);margin-bottom:18px;
  text-transform:uppercase;letter-spacing:.06em}
.stap .bol{width:9px;height:9px;border-radius:50%;background:#D8D2F3;transition:background .2s,transform .2s}
.stap .bol.aan{background:var(--paars);transform:scale(1.25)}
.stap .bol.klaar{background:var(--turquoise)}
.stap span.tekst{margin-left:4px}

.knop{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border:0;border-radius:14px;
  background:var(--paars);color:#fff;font-weight:800;font-size:17px;text-decoration:none;padding:12px 18px;
  transition:transform .12s ease,background .15s ease;box-shadow:0 6px 16px rgba(106,90,224,.28);cursor:pointer;font-family:var(--tekst)}
.knop:hover{background:var(--paars-donker)}
.knop:active{transform:scale(.97)}
.knop:focus-visible,.veld input:focus-visible,.schakel:focus-visible,details summary:focus-visible,.vink:focus-within,
.tegel:focus-visible,.terug:focus-visible,.kopieer:focus-visible,.stappen a:focus-visible{outline:3px solid var(--turquoise);outline-offset:3px}
.knop.stil{background:transparent;color:var(--paars-donker);box-shadow:none;min-height:44px;font-size:15px}
.knop.stil:hover{background:var(--paars-licht)}
.knop.rood{background:var(--fout);box-shadow:0 6px 16px rgba(200,40,90,.28)}
.knop.rood:hover{background:#A81E4A}
.acties{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-top:20px}

.veld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.veld label{font-weight:800;font-size:15px;margin:0}
.veld .invoer{position:relative;display:flex}
.veld input{width:100%;min-height:50px;border:2px solid var(--lijn);border-radius:14px;background:var(--wit);padding:10px 14px;
  font:inherit;color:var(--inkt);transition:border-color .15s}
.veld input:focus{border-color:var(--paars);outline:none}
.veld input[aria-invalid="true"]{border-color:var(--fout)}
.veld .hint{font-size:14px;color:var(--inkt-zacht);display:flex;align-items:center;gap:6px}
.veld .hint svg{width:16px;height:16px;flex:none}
.veld .hint.goed{color:var(--goed)}
.veld .hint.goed .vink-icoon{opacity:1}
.veld .hint .vink-icoon{opacity:.35;transition:opacity .2s}
.schakel{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:var(--paars-licht);color:var(--paars-donker);
  border-radius:10px;padding:8px 12px;font-weight:800;font-size:13px;min-height:38px}
.veld input[type=password],.veld input.met-schakel{padding-right:86px}
.foutmelding{display:flex;gap:8px;align-items:flex-start;color:var(--fout);font-size:14px;font-weight:700}
.foutmelding svg{width:18px;height:18px;flex:none;margin-top:2px}
.foutmelding[hidden]{display:none}

.kaart{background:var(--wit);border-radius:20px;padding:16px 18px;box-shadow:var(--schaduw)}
.kaart.zacht{font-size:14px;color:var(--inkt-zacht)}
.banner{display:flex;gap:10px;align-items:center;background:var(--paars-licht);border-radius:16px;padding:12px 12px;margin-bottom:20px;font-size:15px}
.banner svg{width:22px;height:22px;flex:none}
.banner.rood{background:#FFE3EA}
.banner strong{display:block;font-family:var(--kop);font-weight:600;font-size:min(15px,3.9vw);white-space:nowrap;margin-bottom:2px}
.banner.rood strong{white-space:normal;font-size:15px}
.banner.goed{background:#DDFAF6}

/* stappenlijst op welkom en de uitleg over Claude */
.stappenlijst{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.stappenlijst li{display:flex;gap:12px;align-items:center;background:var(--wit);border-radius:16px;padding:10px 14px;box-shadow:var(--schaduw);font-size:14px;color:var(--inkt-zacht)}
.stappenlijst > li > span{flex:none;width:28px;height:28px;border-radius:50%;background:var(--paars-licht);color:var(--paars-donker);font-family:var(--kop);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:15px}
.stappenlijst > li > div{min-width:0;flex:1}
.stappenlijst > li > div > strong{display:block;color:var(--inkt);font-size:15px}
.stappenlijst > li:first-child > span{background:var(--paars);color:#fff}
.stappenlijst.uitleg li{align-items:flex-start;color:var(--inkt);font-size:15px}
.stappenlijst.uitleg > li > div > strong{margin-bottom:2px}
.stappenlijst.uitleg em{font-style:normal;font-weight:800}
.adres{display:flex;gap:6px;align-items:center;margin:8px 0;background:var(--paars-licht);border-radius:12px;padding:6px 6px 6px 12px}
.adres code{flex:1;font-family:ui-monospace,Consolas,monospace;font-size:13px;word-break:break-all;color:var(--paars-donker);background:none;padding:0}
.kopieer{border:0;background:var(--paars);color:#fff;border-radius:9px;padding:8px 10px;font-weight:800;font-size:13px;min-height:36px;flex:none}

/* toestemming: uitklapblokken, de afspraak, het vinkje */
.voorwaarden{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.voorwaarden details{scroll-margin-top:14px;background:var(--wit);border-radius:16px;box-shadow:var(--schaduw);overflow:hidden}
.voorwaarden summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;
  font-family:var(--kop);font-weight:600;font-size:16px;cursor:pointer;min-height:48px}
.voorwaarden summary::-webkit-details-marker{display:none}
.voorwaarden summary svg{width:20px;height:20px;flex:none;color:var(--paars);transition:transform .2s}
.voorwaarden details[open] summary svg{transform:rotate(180deg)}
.voorwaarden .inhoud{padding:0 16px 14px;font-size:15px;color:var(--inkt)}
.voorwaarden .inhoud p,.voorwaarden .inhoud ul{margin:0 0 8px}
.voorwaarden .inhoud ul{padding-left:18px}
.voorwaarden .inhoud li+li{margin-top:6px}
.instemming{background:var(--paars-licht);border-radius:16px;padding:14px 16px;margin-bottom:14px}
.instemming h3{margin-bottom:6px}
.instemming ul{margin:0;padding-left:18px;font-size:15px}
.instemming li+li{margin-top:6px}
.vink{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--wit);box-shadow:var(--schaduw);cursor:pointer;
  font-weight:700;font-size:15px;margin:0}
.vink input{width:24px;height:24px;flex:none;margin:1px 0 0;accent-color:var(--paars);cursor:pointer}
.vink.fout{box-shadow:0 0 0 2px var(--fout)}

/* de panelen van account maken: zonder JS staan ze alle drie onder elkaar */
.paneel{display:flex;flex-direction:column;flex:1;min-height:0}
.js .paneel{display:none}
.js .paneel.actief{display:flex;animation:inkomen .32s ease-out}
.paneel.weg{animation:uitgaan .2s ease-in forwards!important}
.js .paneel:not(.actief) .stap{display:none}
@keyframes uitgaan{to{opacity:0;transform:translateX(-12px)}}
@keyframes inkomen{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* melding: een titel, een zin, een knop */
.melding-scherm .kop{text-align:center;align-items:center}
.melding-scherm .kop p{text-wrap:pretty;max-width:32ch}

/* even geduld */
.geduld{position:fixed;inset:0;background:rgba(255,246,229,.94);backdrop-filter:blur(3px);display:none;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:32px;gap:8px;z-index:3}
.geduld.actief{display:flex;animation:fade .2s ease-out}
.geduld svg{width:150px;height:auto;margin-bottom:10px;overflow:visible}
.geduld p{color:var(--inkt-zacht)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* dashboard */
.groet{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.groet svg{width:52px;height:52px;flex:none;overflow:visible}
.groet h1{font-size:26px}
.groet p{font-size:14px;color:var(--inkt-zacht)}
.blok{margin-bottom:22px}
.blok h2{font-size:18px;margin-bottom:10px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.blok h2 a{font:inherit;font-family:var(--tekst);font-size:14px;font-weight:800;color:var(--paars-donker);text-decoration:none}
.stappen{list-style:none;margin:0;padding:6px 0;display:flex;flex-direction:column;gap:2px}
.stappen li{display:flex;align-items:center;gap:11px;min-height:42px;padding:4px 6px}
.stappen li.actief{display:block;padding:0}
.stappen .bol{flex:none;width:22px;height:22px;border-radius:50%;background:#EAE6F7;display:flex;align-items:center;justify-content:center;font-family:var(--kop);font-weight:600;color:var(--inkt-zacht);font-size:12px}
.stappen .bol svg{width:13px;height:13px;color:#fff}
.stappen li.klaar .bol{background:var(--turquoise)}
.stappen .tekst{min-width:0}
.stappen .tekst strong{display:block;font-size:14px;font-weight:700}
.stappen .tekst span{display:block;font-size:12px;color:var(--inkt-zacht);line-height:1.35}
.stappen li.klaar .tekst strong{text-decoration:line-through;text-decoration-color:var(--turquoise);text-decoration-thickness:2px;color:var(--inkt-zacht)}
.stappen li.later{opacity:.55}
/* De stap van nu is zelf de knop: het zwaarste element op de pagina, zodat het oog
   daar landt en niet bij een knop die pas later aan de beurt is. */
.nu-aan{display:flex;align-items:center;flex-wrap:wrap;gap:13px;background:var(--paars);color:#fff;border-radius:18px;padding:15px 16px;margin:8px 0;text-decoration:none;box-shadow:0 6px 16px rgba(106,90,224,.28);animation:puls 2.8s ease-in-out infinite}
.nu-aan:hover{background:var(--paars-donker)}
.nu-aan .bol{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-family:var(--kop);font-weight:600;font-size:16px;color:#fff}
.nu-aan .tekst{flex:1;min-width:110px}
.nu-aan .tekst strong{display:block;font-family:var(--kop);font-weight:600;font-size:17px;line-height:1.2}
.nu-aan .tekst span{display:block;font-size:13px;color:#EDEAFF;margin-top:2px}
.nu-aan .cta{flex:none;background:#fff;color:var(--paars-donker);font-weight:800;font-size:13px;border-radius:10px;padding:8px 11px;box-shadow:0 2px 6px rgba(30,27,58,.14);margin-left:auto}
@keyframes puls{0%,100%{box-shadow:0 6px 16px rgba(106,90,224,.28)}50%{box-shadow:0 9px 26px rgba(106,90,224,.5)}}
.teller{font-family:var(--tekst);font-size:12px;font-weight:800;color:var(--inkt-zacht);text-transform:uppercase;letter-spacing:.06em;flex:none}
.straks{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--inkt-zacht);padding:2px 6px}
.straks svg{width:17px;height:17px;flex:none;color:var(--turquoise-donker)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;border-radius:999px;padding:3px 10px;background:var(--paars-licht);color:var(--paars-donker)}
.chip.turq{background:#DDFAF6;color:#0B6B5F}
.chip.oranje{background:#FFE7D6;color:#9A3E0A}
.chip.grijs{background:#EFECF8;color:var(--inkt-zacht)}
.chip.vries{background:#E3F4FF;color:#0B4F7A;font-size:11px;padding:2px 8px;margin-top:2px}
.week{padding:14px 16px}
.week .kopregel{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.week .kopregel strong{font-family:var(--kop);font-weight:600;font-size:17px}
.week .kopregel span{font-size:12px;color:var(--inkt-zacht)}
.dagen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dagen li{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid #F1EEF9}
.dagen li:first-child{border-top:0}
.dagen .dag{flex:none;width:34px;height:34px;border-radius:50%;background:var(--creme);font-family:var(--kop);font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center;color:var(--inkt)}
.dagen .dag.vandaag{background:var(--paars);color:#fff}
.dagen .wat{flex:1;min-width:0;font-size:15px}
.dagen .wat small{display:block;font-size:12px;color:var(--inkt-zacht)}
.week details{margin-top:10px;border-top:1px solid #F1EEF9;padding-top:8px}
.week summary{list-style:none;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:14px;color:var(--paars-donker);cursor:pointer;min-height:40px}
.week summary::-webkit-details-marker{display:none}
.week summary svg{width:18px;height:18px;transition:transform .2s}
.week details[open] summary svg{transform:rotate(180deg)}
.lijst{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.lijst li{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid #F1EEF9;font-size:14px}
.lijst li .n{flex:1;min-width:0}
.lijst li .n small{display:block;font-size:12px;color:var(--inkt-zacht)}
.lijst li .a{flex:none;font-weight:800;font-variant-numeric:tabular-nums}
.notitie-week{display:flex;gap:10px;align-items:center;background:#FFE7D6;border-radius:12px;padding:10px 12px;margin-top:12px;font-size:14px}
.notitie-week svg{width:22px;height:22px;flex:none;color:#9A3E0A}
.leeg-week{display:flex;gap:12px;align-items:center}
.leeg-week svg{width:64px;flex:none}
.leeg-week div{font-size:15px}
.tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tegel{background:var(--wit);border-radius:16px;padding:12px 10px;box-shadow:var(--schaduw);text-align:center;text-decoration:none;color:inherit;border:0;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:92px}
.tegel svg{width:26px;height:26px;color:var(--paars)}
.tegel b{font-family:var(--kop);font-weight:600;font-size:22px;line-height:1}
.tegel span{font-size:12px;font-weight:800;color:var(--inkt-zacht);line-height:1.2}
/* Maximaal vijf chips (dashboard vraagt zes plannen, de nieuwste staat erboven) en
   ze blijven op een regel; op een heel smal scherm schuift de regel mee. */
.eerder{display:flex;flex-wrap:nowrap;gap:5px;overflow-x:auto}
.eerder a{flex:none;font-size:13px;font-weight:800;color:var(--paars-donker);background:var(--wit);border-radius:999px;padding:6px 10px;text-decoration:none;box-shadow:var(--schaduw);white-space:nowrap}
.instellingen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.instellingen li{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--wit);border-radius:14px;padding:10px 14px;box-shadow:var(--schaduw);font-size:14px;min-height:48px}
.instellingen li > div{min-width:0}
.instellingen li span{color:var(--inkt-zacht)}
.instellingen li strong{display:block;font-size:14px}
.instellingen form{margin:0;flex:none}
.instellingen button,.instellingen a{font:inherit;font-size:13px;font-weight:800;color:var(--paars-donker);background:var(--paars-licht);border:0;border-radius:9px;padding:7px 10px;text-decoration:none;min-height:36px;flex:none;cursor:pointer;font-family:var(--tekst)}
.instellingen .gevaar{background:#FFE3EA;color:var(--fout)}
.uitloggen{text-align:center;margin-top:14px}
.uitloggen a{font-weight:800;font-size:14px}
.terug{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:800;color:var(--paars-donker);text-decoration:none;border:0;background:none;padding:0;margin-bottom:14px;cursor:pointer;font-family:var(--tekst);align-self:flex-start}
.terug svg{width:18px;height:18px}
.items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.item{background:var(--wit);border-radius:14px;padding:10px 12px;box-shadow:var(--schaduw);display:flex;align-items:center;gap:10px}
.item .n{flex:1;min-width:0;font-size:15px;font-weight:700}
.item .n small{display:block;font-weight:400;font-size:12px;color:var(--inkt-zacht)}
.item.leeg{justify-content:center;color:var(--inkt-zacht);font-size:13px}
.item form{margin:0;flex:none}
.item .weg{flex:none;border:0;background:#F3F1FA;color:var(--inkt-zacht);border-radius:9px;min-width:40px;min-height:36px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;font-family:var(--tekst)}
.item .weg:hover{background:#FFE3EA;color:var(--fout)}
.seg{display:inline-flex;background:#F1EEF9;border-radius:9px;padding:2px}
.seg label{display:inline-flex;align-items:center;white-space:nowrap;font-size:12px;font-weight:800;color:var(--inkt-zacht);border-radius:7px;padding:5px 8px;min-height:30px;cursor:pointer;margin:0}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label:has(input:checked){background:var(--wit);color:var(--paars-donker);box-shadow:0 1px 3px rgba(30,27,58,.12)}
.seg label:has(input:focus-visible){outline:3px solid var(--turquoise);outline-offset:1px}
.stepper{display:inline-flex;align-items:center;gap:2px;background:#F1EEF9;border-radius:9px}
.stepper button{border:0;background:none;font:inherit;font-weight:800;color:var(--paars-donker);width:30px;min-height:30px;font-size:16px;cursor:pointer}
.stepper input{width:40px;min-height:30px;text-align:center;font:inherit;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;border:0;background:transparent;color:var(--inkt);-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.item.voorstel{flex-wrap:wrap}
.item.voorstel .n{flex:1 1 60%;cursor:pointer}
.item.voorstel .keuzes{display:flex;gap:8px;align-items:center;width:100%;padding-left:34px}
.item.voorstel input[type=checkbox]{width:24px;height:24px;accent-color:var(--paars);flex:none;margin:0}
.item.voorstel:has(input[type=checkbox]:not(:checked)) .keuzes{opacity:.35;pointer-events:none}
.sticky-boven{position:sticky;top:0;z-index:2;padding:8px 0 12px;margin-top:-4px;background:linear-gradient(var(--creme) 70%,transparent)}
.tussenkop{font-size:16px;margin:0 0 8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gerechten{display:flex;flex-direction:column;gap:8px}
.gerecht{background:var(--wit);border-radius:16px;box-shadow:var(--schaduw);overflow:hidden}
.gerecht summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;min-height:52px}
.gerecht summary::-webkit-details-marker{display:none}
.gerecht summary .n{flex:1;min-width:0;font-weight:700;font-size:15px}
.gerecht summary .n small{display:block;font-weight:400;font-size:12px;color:var(--inkt-zacht)}
.gerecht summary svg{width:18px;height:18px;color:var(--paars);flex:none;transition:transform .2s}
.gerecht[open] summary svg{transform:rotate(180deg)}
.gerecht .binnen{padding:0 14px 12px;display:flex;flex-direction:column;gap:6px}
.gerecht .binnen .item{box-shadow:none;background:#FAF8FF;padding:8px 10px}
.gerecht .binnen .item .n{font-size:14px}
.variant{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.gerecht .binnen .item.variant-rij{background:var(--paars-licht)}
.stil-tekst{text-align:center;font-size:13px;color:var(--inkt-zacht);padding:6px 0}

.bevestig{position:fixed;inset:0;z-index:4;background:rgba(30,27,58,.45);align-items:flex-end;justify-content:center;padding:16px}
.bevestig{display:none}
.bevestig:target,.bevestig.open{display:flex}
.bevestig-kaart{background:var(--wit);border-radius:22px;padding:20px 18px 14px;width:100%;max-width:var(--breed);display:flex;flex-direction:column;gap:10px;animation:opkomen .25s ease-out}
.bevestig-kaart p{font-size:15px;color:var(--inkt-zacht)}
.bevestig-kaart form{display:contents}
@keyframes opkomen{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

/* Elio in je Claude: de geanimeerde instructie */
.demo{margin:12px 0 4px;background:var(--wit);border-radius:16px;box-shadow:var(--schaduw);padding:10px 10px 8px}
.demo-kader{position:relative;background:#F7F5F0;border-radius:12px;overflow:hidden;height:262px;border:1px solid #E6E2DA;font-family:var(--tekst);color:#2B2A26;font-size:11px;line-height:1.3}
.demo-balk{display:flex;align-items:center;gap:4px;padding:6px 8px;background:#ECE9E2;border-bottom:1px solid #E0DCD3}
.demo-balk span{width:7px;height:7px;border-radius:50%;background:#CFCAC0}
.demo-balk i{font-style:normal;margin-left:auto;margin-right:auto;font-size:10px;color:#77736A;background:#fff;border-radius:6px;padding:1px 22px}
.demo-scene{position:absolute;inset:26px 0 0;padding:0;display:none;flex-direction:row;gap:0}
.demo-scene.actief{display:flex;animation:fade .3s ease-out}
.demo-scene.elio-scene,.demo-scene.dim{flex-direction:column;padding:10px}
.d-zijbalk{width:74px;flex:none;background:#EFEDE7;border-right:1px solid #E0DCD3;padding:8px 6px;display:flex;flex-direction:column;gap:3px;font-size:10px}
.d-zijbalk b{font-family:Georgia,serif;font-weight:400;font-size:12px;margin-bottom:4px}
.d-zij{position:relative;padding:3px 6px;border-radius:6px;color:#4A4741}
.d-zij.aan{background:#E2DFD7;font-weight:700}
.d-hoofd{flex:1;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative}
.d-hoofd.links{align-items:stretch;justify-content:flex-start;gap:6px}
.d-hoofd.midden{gap:5px}
.d-hallo{font-family:Georgia,serif;font-size:13px;color:#2B2A26}
.d-invoer{width:92%;border:1px solid #D9D4CA;background:#fff;border-radius:10px;padding:8px 9px;color:#9A958A;font-size:10px}
.d-tabs{display:flex;gap:6px;align-items:center;font-size:10px;margin-bottom:4px}
.d-tabs span{position:relative;padding:3px 7px;border-radius:6px;background:#fff;border:1px solid #E6E2DA}
.d-tabs span.aan{background:#E2DFD7;font-weight:700}
.d-tabs .d-add{margin-left:auto;background:#2B2A26;color:#fff;border-color:#2B2A26;font-weight:700}
.d-kaart{position:relative;display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:8px;background:#fff;border:1px solid #ECE9E2}
.d-kaart i{width:14px;height:14px;border-radius:4px;background:#D9D4CA}
.d-kaart i.g{background:#F4B400}.d-kaart i.m{background:#EA4335}.d-kaart i.c{background:#00C4CC}
.d-rechts{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:8px}
.d-stil{font-size:10px;color:#77736A}
.d-stil.kader{border:1px solid #D9D4CA;border-radius:6px;padding:3px 7px;color:#2B2A26}
.d-mini{font-size:10px;color:#77736A;margin-bottom:2px}
.d-mini b{display:block;color:#2B2A26;font-size:11px}
.d-radio{position:relative;font-size:10px;padding:3px 4px 3px 16px;color:#4A4741}
.d-radio::before{content:"";position:absolute;left:3px;top:6px;width:8px;height:8px;border-radius:50%;border:1.5px solid #B5B0A5}
.d-radio.aan{color:#2B2A26;font-weight:700}
.d-radio.aan::before{border-color:#2B6CEB;background:radial-gradient(#2B6CEB 45%,#fff 50%)}
.d-radio em{font-style:normal;font-size:8px;background:#E2DFD7;border-radius:4px;padding:0 4px;margin-left:4px;font-weight:700}
.demo-scene.dim{background:rgba(43,42,38,.35)}
.d-terug{align-self:flex-start;font-size:10px;color:#4A4741;margin-bottom:6px}
.d-ster{width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid #E0DCD3;color:#C96442;text-align:center;line-height:30px;font-size:16px}
.d-url{font-family:ui-monospace,Consolas,monospace;font-size:9px;color:#77736A}
.d-grijs{font-size:10px;color:#77736A}
.d-elio-rij{display:flex;justify-content:space-between;align-items:center;font-size:11px}
.d-lijn{height:16px;border-radius:6px;background:#fff;border:1px solid #ECE9E2}
.d-toast{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:5px;background:#fff;border:1px solid #E0DCD3;border-radius:8px;padding:6px 9px;font-size:10px;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.1)}
.d-toast svg{width:14px;height:14px;color:#fff;background:var(--goed);border-radius:50%;padding:2px}
.d-kop{font-family:var(--kop);font-size:15px;margin-bottom:2px}
.d-kop.klein{font-size:13px}
.d-rij{position:relative;padding:6px 8px;border-radius:7px;background:#fff;border:1px solid #ECE9E2}
.d-knop{position:relative;align-self:flex-start;margin-top:4px;background:#2B2A26;color:#fff;border-radius:8px;padding:7px 10px;font-weight:700;font-size:11px}
.d-knop.klein{padding:5px 9px;margin-top:6px}
.d-knop.paars{background:var(--paars);align-self:stretch;text-align:center;margin-top:8px;font-family:var(--tekst);font-size:12px}
.d-dialoog{margin:4px auto 0;width:94%;background:#fff;border:1px solid #E0DCD3;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.d-dialoog label{font-size:10px;color:#77736A;margin-top:4px}
.d-veld{min-height:24px;border:1px solid #D9D4CA;border-radius:6px;padding:4px 7px;background:#fff;font-family:ui-monospace,Consolas,monospace;font-size:10px;word-break:break-all;color:#2B2A26}
.d-veld.typt::after{content:"";display:inline-block;width:1px;height:11px;background:#2B2A26;margin-left:1px;vertical-align:-2px;animation:knipper .8s steps(1) infinite}
@keyframes knipper{50%{opacity:0}}
.elio-scene{background:var(--creme);align-items:stretch;justify-content:center}
.d-elio{background:#fff;border-radius:12px;padding:12px;box-shadow:var(--schaduw);display:flex;flex-direction:column;gap:4px;color:var(--inkt)}
.d-elio b{font-family:var(--kop);font-weight:600;font-size:14px}
.d-elio p{font-size:11px;color:var(--inkt-zacht);margin:0}
.tik::after{content:"";position:absolute;inset:-5px;border:2.5px solid var(--paars);border-radius:10px;animation:tikring 1.3s ease-out infinite;pointer-events:none}
@keyframes tikring{0%{transform:scale(.9);opacity:0}30%{opacity:1}100%{transform:scale(1.12);opacity:0}}
.demo-tekst{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--inkt);margin:10px 2px 8px;min-height:36px}
.demo-nr{flex:none;font-family:var(--kop);font-weight:600;color:var(--paars-donker);background:var(--paars-licht);border-radius:8px;padding:1px 7px;font-size:12px}
.demo-knoppen{display:flex;align-items:center;gap:8px}
.demo-knop{border:0;background:var(--paars-licht);color:var(--paars-donker);border-radius:10px;min-width:36px;min-height:36px;font-weight:800;font-size:18px;line-height:1;padding:0 10px}
.demo-knop.pauze{font-size:12px}
.demo-bollen{flex:1;display:flex;justify-content:center;gap:5px}
.demo-bollen i{width:7px;height:7px;border-radius:50%;background:#D8D2F3}
.demo-bollen i.aan{background:var(--paars)}
.geen-js .demo-knoppen{display:none}

/* beheer */
.hh{margin-bottom:10px;padding:14px 16px}
.hh header{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.hh header strong{font-family:var(--kop);font-weight:600;font-size:18px}
.hh header span{font-size:12px;color:var(--inkt-zacht)}
.hh p{font-size:13px;color:var(--inkt-zacht)}
.status{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.status li{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--inkt-zacht);background:#F1EEF9;border-radius:999px;padding:3px 9px 3px 7px}
.status li::before{content:"";width:8px;height:8px;border-radius:50%;background:#D8D2F3}
.status li.klaar{color:#0B6B5F;background:#DDFAF6}
.status li.klaar::before{background:var(--turquoise)}
.hh .adres{margin:0}
.aanroepen{margin-top:10px;border-top:1px solid #F1EEF9;padding-top:6px}
.aanroepen summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:800;font-size:13px;color:var(--paars-donker);cursor:pointer;min-height:36px}
.aanroepen summary::-webkit-details-marker{display:none}
.aanroepen summary svg{width:16px;height:16px;transition:transform .2s;margin-left:auto}
.aanroepen[open] summary svg{transform:rotate(180deg)}
.aanroepen .lijst li{font-size:13px}
.aanroepen .lijst li .n small{word-break:break-word}
.hh-acties{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hh-acties a{font-size:13px;font-weight:800;color:var(--paars-donker);background:var(--paars-licht);border-radius:9px;padding:8px 10px;text-decoration:none;min-height:36px;display:flex;align-items:center}
.hh-acties a.gevaar{background:#FFE3EA;color:var(--fout);margin-left:auto}

/* --- illustratie-animaties --- */
.wagentje{animation:rolin .7s cubic-bezier(.2,.8,.3,1) both,deining 3.2s ease-in-out .7s infinite}
@keyframes rolin{from{transform:translateX(-70px);opacity:0}to{transform:none;opacity:1}}
@keyframes deining{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.wiel{transform-box:fill-box;transform-origin:center;animation:draai .7s linear both}
@keyframes draai{from{transform:rotate(-200deg)}to{transform:rotate(0)}}
.snelheid{stroke-dasharray:14 8;animation:snel .7s ease-out both}
@keyframes snel{from{opacity:0;transform:translateX(30px)}to{opacity:.45;transform:none}}
.zwaai{transform-box:fill-box;transform-origin:20% 90%;animation:zwaaien 2.6s ease-in-out infinite}
@keyframes zwaaien{0%,45%,100%{transform:rotate(0)}52%{transform:rotate(-22deg)}60%{transform:rotate(14deg)}68%{transform:rotate(-18deg)}76%{transform:rotate(0)}}
.hart{transform-box:fill-box;transform-origin:center;animation:stijg 1.9s ease-out infinite;opacity:0}
.hart.h2{animation-delay:.55s}.hart.h3{animation-delay:1.1s}
@keyframes stijg{0%{transform:translateY(0) scale(.6);opacity:0}25%{opacity:1}100%{transform:translateY(-70px) scale(1.05);opacity:0}}
.mandje{animation:wieg 1.9s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
@keyframes wieg{0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg)}70%{transform:rotate(3deg)}}
.ster{transform-box:fill-box;transform-origin:center;animation:twinkel 2.4s ease-in-out infinite}
.ster.s2{animation-delay:.8s}
@keyframes twinkel{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
.pijlen{transform-box:fill-box;transform-origin:center;animation:draaipijl 4s ease-in-out infinite}
@keyframes draaipijl{0%,60%,100%{transform:rotate(0)}80%{transform:rotate(180deg)}}
.zweef{animation:deining 3.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hart{opacity:.9}
}