/* Spare Hands, huisstijl A "Werkbank", in de donkere kleurstelling van de verkooppagina voor hosts.
   Donkere ondergrond, gebroken wit voor tekst, randen en knoppen, werkoranje als enige kleur met energie.
   Koppen in Bricolage Grotesque, lopende tekst in Figtree. Eén thema, bewust donker. */
:root{
  --papier:#151417; --vlak:#1f1e22; --zacht:#1a191d; --diep:#0e0d10; --inkt:#f3f1ec; --grafiet:#aeabb2; --lijn:#34323a;
  --oranje:#ff6f33; --oranje-zacht:#ff8a57; --op-oranje:#1c1b1f; --groen:#6cc497;
  --kop:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --tekst:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --rond:18px; --schaduw:4px 4px 0 var(--inkt);
  --hand-1:var(--inkt); --hand-2:var(--oranje);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{background:var(--papier);color:var(--inkt);font:400 18px/1.6 var(--tekst);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--kop);font-weight:700;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(44px,7.4vw,96px);font-weight:800}
h1 em{font-style:normal;color:var(--oranje)}
h2{font-size:clamp(32px,4.6vw,56px);max-width:18ch}
h3{font-size:22px;letter-spacing:-.02em;line-height:1.15}
p{max-width:62ch}
.wrap{max-width:1200px;margin:0 auto;padding-inline:24px}
.label{font:600 13px/1.4 var(--tekst);letter-spacing:.08em;text-transform:uppercase;color:var(--grafiet);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.label::before{content:"";width:18px;height:6px;border-radius:3px;background:var(--oranje);flex:none}
.label-licht{color:var(--op-oranje)}
.label-licht::before{background:var(--op-oranje)}
:focus-visible{outline:3px solid var(--oranje);outline-offset:3px;border-radius:6px}
.overslaan{position:absolute;left:-9999px;top:8px;background:var(--inkt);color:var(--papier);padding:10px 14px;border-radius:8px;z-index:50}
.overslaan:focus{left:16px}

/* knoppen */
.knop{display:inline-flex;align-items:center;gap:10px;background:var(--inkt);color:var(--papier);border:0;border-radius:999px;
  padding:16px 24px;font:600 17px/1 var(--tekst);text-decoration:none;cursor:pointer;transition:transform .15s,background .15s}
.knop svg{width:18px;height:18px}
.knop:hover{background:var(--oranje);color:var(--op-oranje);transform:translateY(-1px)}
.knop-klein{padding:11px 18px;font-size:15px}

/* kop */
.kop{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--papier) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .2s}
.kop.gescrold{border-bottom-color:var(--lijn)}
.kop-rij{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 21px/1 var(--kop);letter-spacing:-.02em}
.logo-merk{width:30px;height:30px;flex:none}
.hoofdnav{display:flex;gap:26px;font-size:15.5px;font-weight:500}
.hoofdnav a{text-decoration:none;color:var(--grafiet)}
.hoofdnav a:hover{color:var(--inkt)}
.kop-rechts{display:flex;align-items:center;gap:14px}
.taal{font:600 14px var(--tekst);text-decoration:none;border:1.5px solid var(--inkt);border-radius:999px;padding:6px 11px}
.taal:hover{background:var(--inkt);color:var(--papier)}
@media(max-width:980px){.hoofdnav{display:none}}
@media(max-width:420px){.knop-klein{display:none}}

/* hero */
.hero{padding-block:48px 72px;overflow:hidden}
.hero-rij{display:grid;grid-template-columns:1.25fr .9fr;gap:40px;align-items:center}
.hero-tekst{min-width:0}
.hero-sub{font-size:clamp(19px,2vw,23px);line-height:1.45;color:var(--grafiet);margin-top:24px;max-width:34ch}
.cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px}
.cta-noot{font-size:15.5px;color:var(--grafiet)}
.hero-beeld{position:relative;min-width:0;max-width:460px;justify-self:end;width:100%}
.hero-beeld .vlak{position:absolute;inset:14% 0 0 6%;background:var(--oranje);border-radius:48% 48% var(--rond) var(--rond)}
.hero-beeld img{position:relative;width:88%;margin-left:auto;margin-right:2%}
.sticker{position:absolute;background:var(--vlak);border:2px solid var(--inkt);border-radius:16px;padding:12px 16px;
  font-size:14px;line-height:1.3;box-shadow:var(--schaduw);max-width:180px}
.sticker b{display:block;font:800 30px/1 var(--kop);letter-spacing:-.03em;margin-bottom:4px}
.sticker.oranje{background:var(--oranje);color:var(--op-oranje)}
.s1{left:-6%;top:30%;transform:rotate(-4deg)}
.s2{right:-2%;bottom:8%;transform:rotate(3deg)}
@media(max-width:860px){
  .hero-rij{grid-template-columns:1fr}
  .hero-beeld{justify-self:center;max-width:360px}
  .s1{left:-4%}
}

/* secties */
.sectie{padding-block:96px}
.sectie.zacht{background:var(--zacht)}
.intro{font-size:20px;color:var(--grafiet);margin-top:20px}
.kaarten{display:grid;gap:18px;margin-top:44px}
.kaarten.vier{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.kaarten.drie{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.kaart{background:var(--vlak);border:1.5px solid var(--lijn);border-radius:var(--rond);padding:26px 24px;display:flex;flex-direction:column;gap:12px;min-width:0}
.kaart .nu{color:var(--grafiet);font-size:16.5px}
.kaart .straks{display:flex;gap:10px;align-items:flex-start;border-top:1.5px dashed var(--lijn);padding-top:14px;margin-top:auto;font-size:16.5px;font-weight:500}
.kaart .straks svg{width:20px;height:20px;flex:none;color:var(--oranje);margin-top:3px}

/* stappen */
.stappen{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:44px;counter-reset:stap}
.stappen li{background:var(--vlak);border-radius:var(--rond);padding:26px 24px;border:1.5px solid var(--lijn);min-width:0}
.stap-nr{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--oranje);color:var(--op-oranje);
  font:800 20px var(--kop);margin-bottom:16px;border:2px solid var(--inkt)}
.stappen li:first-child .stap-nr{background:var(--inkt);color:var(--papier)}
.stappen h3{margin-bottom:8px}
.stappen p{font-size:16.5px;color:var(--grafiet)}

/* prijzen */
.prijzen{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:44px;align-items:start}
.prijskaart{background:var(--vlak);border:2px solid var(--inkt);border-radius:22px;padding:32px 30px;min-width:0}
.prijskaart.uitgelicht{box-shadow:6px 6px 0 var(--oranje)}
.prijskaart .voor{font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--grafiet)}
.prijskaart h3{font-size:28px;margin-top:8px}
.bedrag{font:800 clamp(44px,5vw,60px)/1 var(--kop);letter-spacing:-.04em;margin:18px 0 20px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bedrag span{font:500 17px var(--tekst);letter-spacing:0;color:var(--grafiet)}
.bedrag small{font:500 15px var(--tekst);letter-spacing:0;color:var(--grafiet)}
.prijskaart ul{list-style:none;display:grid;gap:10px;margin-bottom:22px}
.prijskaart li{display:flex;gap:10px;align-items:flex-start;font-size:16.5px}
.prijskaart li svg{width:20px;height:20px;flex:none;color:var(--oranje);margin-top:3px}
.erbij{border-top:1.5px dashed var(--lijn);padding-top:16px;font-size:16px;color:var(--grafiet)}
.erbij b{color:var(--inkt)}
.kleine-letters{font-size:14.5px;color:var(--grafiet);margin-top:20px}

/* garantie */
.garantie{background:var(--oranje);color:var(--op-oranje);padding-block:88px}
.garantie-rij{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
.garantie h2{color:var(--op-oranje);max-width:20ch;margin-bottom:22px}
.garantie p{color:var(--op-oranje);font-size:19px}
.garantie p.klein{font-size:15.5px;opacity:.78;margin-top:14px}
.garantie :focus-visible{outline-color:var(--op-oranje)}
.zegel{width:170px;height:170px;border-radius:50%;background:var(--papier);color:var(--oranje);display:grid;place-content:center;text-align:center;
  font:700 18px/1 var(--kop);transform:rotate(-8deg);box-shadow:5px 5px 0 var(--op-oranje)}
.zegel span{display:block;font-size:64px;letter-spacing:-.04em;line-height:.9}
@media(max-width:720px){.garantie-rij{grid-template-columns:1fr;gap:32px}.zegel{width:130px;height:130px}.zegel span{font-size:48px}}

/* bewijs */
.live{margin-top:40px;background:var(--vlak);border:2px solid var(--inkt);border-radius:22px;padding:26px 28px;box-shadow:var(--schaduw)}
.live-kop{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--grafiet)}
.stip{width:11px;height:11px;border-radius:50%;background:var(--groen);box-shadow:0 0 0 4px color-mix(in srgb,var(--groen) 22%,transparent)}
.stip.rood{background:#ff5a4f;box-shadow:0 0 0 4px #ff5a4f33}
.live-cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:18px}
.live-cijfers b{display:block;font:800 clamp(40px,5vw,56px)/1 var(--kop);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.live-cijfers span{font-size:15.5px;color:var(--grafiet)}
.cases{margin-top:26px}
.case-wie{font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--oranje)}
.cases .kaart p{font-size:16.5px;color:var(--grafiet)}
.cases .kaart h3{color:var(--inkt)}
.case-stand{margin-top:auto;border-top:1.5px dashed var(--lijn);padding-top:12px;font-weight:600;color:var(--inkt)!important;font-size:15px!important}

/* over */
.over-rij{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:56px;align-items:center}
.portret{border-radius:50% 50% var(--rond) var(--rond);border:2px solid var(--inkt);box-shadow:6px 6px 0 var(--oranje);aspect-ratio:1;object-fit:cover;width:100%}
.over-rij h2{margin-bottom:22px}
.over-rij p{color:var(--grafiet);margin-bottom:14px}
@media(max-width:820px){.over-rij{grid-template-columns:1fr;gap:32px}.portret{max-width:300px}}

/* contact */
.contact-rij{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.contact-rij > div > p{color:var(--grafiet);margin-top:20px}
.direct a{color:var(--inkt);font-weight:600;text-decoration-color:var(--oranje);text-underline-offset:4px;text-decoration-thickness:2px}
.formulier{background:var(--vlak);border:2px solid var(--inkt);border-radius:22px;padding:30px;box-shadow:6px 6px 0 var(--oranje);display:grid;gap:18px;min-width:0}
.veld{display:grid;gap:6px}
.veld label{font-weight:600;font-size:15.5px}
.veld label span{font-weight:400;color:var(--grafiet)}
.veld input,.veld textarea{font:400 17px/1.4 var(--tekst);color:var(--inkt);background:var(--papier);border:1.5px solid var(--lijn);border-radius:12px;padding:13px 14px;width:100%}
.veld input:focus,.veld textarea:focus{border-color:var(--oranje);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--oranje) 30%,transparent)}
.formulier .knop{justify-self:start}
.honing{position:absolute;left:-9999px}
.melding{display:none;border-radius:12px;padding:12px 14px;font-weight:500}
.melding.toon{display:block}
.melding.ok{background:#16301f;color:#a6e3bf}
.melding.fout{background:#3a1d15;color:#ffb89f}
.veld textarea::placeholder,.veld input::placeholder{color:#7d7a82}
@media(max-width:860px){.contact-rij{grid-template-columns:1fr;gap:32px}}

/* voet */
.voet{background:var(--diep);color:#d6d3db;padding-block:56px 36px;border-top:1px solid var(--lijn)}
.voet-rij{display:grid;gap:28px}
.voet-merk{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.voet-merk p{color:#a9a6b0;font-size:15.5px}
.logo-licht{color:#fff}
.voet-tag{font:800 clamp(36px,6vw,76px)/1 var(--kop);letter-spacing:-.04em;color:#fff;max-width:none}
.voet-klein{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:#8f8c96;border-top:1px solid #34323a;padding-top:20px}
.voet-klein a{color:#d6d3db}

@media(max-width:600px){
  body{font-size:17px}
  .sectie{padding-block:72px}
  .hero{padding-block:28px 56px}
  .prijskaart,.formulier{padding:24px 20px}
  .live{padding:22px 20px}
}

/* beweging: alleen als site.js "beweging" zet, dus nooit bij verminderde beweging of zonder JS */
.beweging h1.letters .w{display:inline-block;white-space:nowrap}
.beweging h1.letters .l{display:inline-block;opacity:0;transform:translateY(.35em);animation:letter .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d)}
@keyframes letter{to{opacity:1;transform:none}}
.beweging .sticker{animation:plak .55s cubic-bezier(.3,1.6,.5,1) both}
.beweging .s1{animation-delay:.9s}
.beweging .s2{animation-delay:1.15s}
@keyframes plak{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
.beweging .zegel{transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.beweging .zegel.draai{transform:rotate(-8deg) scale(1.04)}

/* menu met klussen */
.menu .kaart p{font-size:16.5px;color:var(--grafiet)}
.menu .bij{margin-top:auto;border-top:1.5px dashed var(--lijn);padding-top:12px;font-size:14.5px!important;color:var(--inkt)!important;font-weight:500}
.menu .bij span{display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--oranje)}

/* prijskaart: opzet en introductie */
.prijskaart .opzet{font-size:16px;color:var(--grafiet);margin:-8px 0 20px}
.intro-deal{background:var(--oranje);color:var(--op-oranje);border-radius:14px;padding:14px 16px;font-size:15.5px;line-height:1.45}
.intro-deal b{color:var(--op-oranje)}

/* rekensom */
.reken{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;align-items:start;background:var(--vlak);border:1.5px solid var(--lijn);border-radius:22px;padding:30px}
.reken-invoer{display:grid;gap:24px;min-width:0}
.reken-invoer h3{font-size:24px}
.schuif{display:grid;gap:8px}
.schuif .rij{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.schuif label{font-weight:600;font-size:16px}
.schuif output{font:700 20px var(--kop);letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.schuif input[type=range]{width:100%;accent-color:var(--oranje);height:28px;margin:0}
.reken-uit{background:var(--papier);border:2px solid var(--inkt);border-radius:18px;box-shadow:var(--schaduw);padding:24px;display:grid;gap:18px;min-width:0}
.reken-uit span{font-size:15px;color:var(--grafiet)}
.reken-uit .groot b{display:block;font:800 clamp(40px,5vw,56px)/1 var(--kop);letter-spacing:-.04em;color:var(--oranje);font-variant-numeric:tabular-nums;margin-top:4px}
.reken-uit .naast{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.reken-uit .naast div{background:var(--vlak);border:1px solid var(--lijn);border-radius:12px;padding:12px 14px}
.reken-uit .naast b{display:block;font:700 26px var(--kop);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.reken-uit .zin{font-weight:600;font-size:17px}
.reken .kleine-letters{grid-column:1/-1;margin-top:0}
@media(max-width:860px){.reken{grid-template-columns:1fr;padding:22px 20px}}

/* verwijzing naar de pagina voor hosts */
.menu .bij a{color:var(--inkt);text-decoration-color:var(--oranje);text-underline-offset:3px}
.hosts-link{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;text-decoration:none;
  background:var(--oranje);color:var(--op-oranje);border-radius:var(--rond);padding:20px 24px;font-size:17px;line-height:1.45;transition:transform .15s}
.hosts-link b{font-family:var(--kop);font-weight:700}
.hosts-link svg{width:26px;height:26px;flex:none}
.hosts-link:hover{transform:translateY(-2px)}

/* hero: wat het systeem doet, en wat jij doet */
.knop-groot{padding:18px 26px;font-size:18px}
.dag{margin:0;padding-block:8px 8px;max-width:470px}
.dag-systeem{position:relative;background:var(--vlak);border:2px solid var(--inkt);border-radius:22px;box-shadow:var(--schaduw);padding:20px 20px 10px;transform:rotate(-1.5deg)}
.dag-kop{display:flex;align-items:center;gap:10px;font:600 13px/1.3 var(--tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet);margin-bottom:8px}
.dag-log{list-style:none}
.dag-log li{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:12px 0;border-top:1px dashed var(--lijn);font-size:15.5px;line-height:1.35}
.dag-log time{font-size:13px;font-weight:500;color:var(--grafiet);font-variant-numeric:tabular-nums}
.dag-log .ok{width:26px;height:26px;border-radius:50%;background:var(--groen);color:var(--op-oranje);display:grid;place-items:center}
.dag-log .ok svg{width:15px;height:15px}
.dag-log .tik{font:700 12.5px/1 var(--tekst);font-style:normal;background:var(--oranje);color:var(--op-oranje);border-radius:999px;padding:6px 10px;white-space:nowrap}
.dag-log .wacht span{font-weight:600}
.dag-jij{position:relative;background:var(--oranje);color:var(--op-oranje);border:2px solid var(--inkt);border-radius:22px;box-shadow:var(--schaduw);
  padding:20px 22px 22px;margin:-16px 0 0 20%;transform:rotate(2deg)}
.dag-jij .dag-kop{color:var(--op-oranje);opacity:.75}
.dag-jij ul{list-style:none;display:grid;gap:6px}
.dag-jij li{font:700 clamp(21px,2.3vw,27px)/1.15 var(--kop);letter-spacing:-.02em}
.dag-voet{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:22px}
.dag .s2{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:rotate(-3deg);max-width:200px}
.dag-noot{font-size:12.5px;color:var(--grafiet);text-align:right}
@media(max-width:860px){.dag{justify-self:center;width:100%}}
@media(max-width:520px){
  .dag-jij{margin-left:10%}
}
.beweging .dag-log li{animation:regel .45s ease both;animation-delay:calc(.7s + var(--i) * .45s)}
.beweging .dag-log .ok,.beweging .dag-log .tik{animation:plak .45s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.95s + var(--i) * .45s)}
.beweging .dag-jij{animation:opschuif .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:2.6s}
.beweging .dag .s2{animation-delay:3.1s}
@keyframes regel{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes opschuif{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}

/* groen = "het draait": status, vinkjes en geslaagde runs. Oranje blijft energie en actie. */
:root{--op-groen:#0f2419;--groen-zacht:color-mix(in srgb,var(--groen) 16%,transparent)}
.dag-systeem .dag-kop{display:inline-flex;background:var(--groen-zacht);color:var(--groen);border-radius:999px;padding:6px 12px 6px 10px;margin-bottom:12px}
.dag-systeem .dag-kop .stip{width:9px;height:9px}
.dag-systeem{border-color:var(--groen)}
.dag-log .ok{width:28px;height:28px;box-shadow:0 0 0 4px var(--groen-zacht)}
.dag-log .ok svg{width:16px;height:16px}
.dag-log li:not(.wacht) time{color:var(--groen)}
.dag .s2{background:var(--groen);color:var(--op-groen);border-color:var(--inkt)}
.menu .bij span.draait{color:var(--groen)}
.prijskaart li svg{color:var(--groen)}
.live{box-shadow:5px 5px 0 var(--groen)}
.live-cijfers div:nth-child(2) b{color:var(--groen)}
.reken-uit .groot b{color:var(--groen)}

/* ideeën: dezelfde kaarten, met een oranje accent bovenaan */
.ideeen .kaart{border-top:4px solid var(--oranje)}
.ideeen-noot{margin-top:24px;font-size:16.5px;color:var(--grafiet)}
.zacht .kaart{background:var(--papier)}

/* keuze in het formulier */
.keuze{border:0;display:flex;flex-wrap:wrap;gap:10px}
.keuze legend{font-weight:600;font-size:15.5px;margin-bottom:8px;width:100%}
.keuze label{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--lijn);border-radius:999px;padding:9px 14px;font-size:15.5px;cursor:pointer}
.keuze input{accent-color:var(--oranje);width:16px;height:16px}
.keuze label:has(input:checked){border-color:var(--oranje);background:color-mix(in srgb,var(--oranje) 14%,transparent)}

/* gesprekplanner */
.plan-stappen{display:grid;gap:18px}
.plan-kop{font-weight:600;font-size:15.5px}
.adres-rij{display:flex;gap:10px}
.adres-rij input{flex:1;min-width:0}
.plan-adres small{color:var(--grafiet);font-size:14px}
.plan-dagen{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-top:10px;scrollbar-width:thin}
.plan-dag,.plan-uur{font:600 15px var(--tekst);color:var(--inkt);background:var(--papier);border:1.5px solid var(--lijn);border-radius:12px;padding:10px 12px;cursor:pointer;white-space:nowrap;flex:none}
.plan-dag[aria-pressed=true]{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}
.plan-uren{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin-top:12px}
.plan-uur{padding:9px 0;text-align:center;font-variant-numeric:tabular-nums}
.plan-uur:hover,.plan-dag:hover{border-color:var(--groen)}
.plan-uur[aria-pressed=true]{background:var(--groen);color:var(--op-groen);border-color:var(--groen)}
.plan-status{margin-top:10px;font-size:15px;color:var(--grafiet);min-height:1.4em}
.plan-klaar{background:color-mix(in srgb,var(--groen) 14%,transparent);border:1.5px solid var(--groen);border-radius:16px;padding:22px}
.plan-klaar h3{color:var(--groen);margin-bottom:8px}
.plan-klaar p{color:var(--inkt)}
.plan-wissel{margin-top:-4px}
.link-knop{background:none;border:0;color:var(--grafiet);font:500 15px var(--tekst);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
.link-knop:hover{color:var(--inkt)}
.formulier .knop:disabled{opacity:.6;cursor:wait}
@media(max-width:520px){.adres-rij{flex-direction:column}}
.formulier{grid-template-columns:minmax(0,1fr)}
.plan-stappen,.plan-tijden,.plan-stappen>*{min-width:0}