/* De steunknop: de tekening van de maker aan zijn bureau, met een kleine vaste ingang (public/js/steun.js).
   Alles is verborgen tot de pagina een steunadres heeft (html.steun-aan). Alles zweeft boven de pagina (vast
   gepositioneerd) en ligt links van de routelijst, onderaan. */
:root{--sp-top:96px;--sp-mono:"Courier New",ui-monospace,Menlo,monospace}
.sp-lip,.sp-bw,.sp-terug,.sp-toast,.sp-proef{font-family:var(--tekst,"Overpass",system-ui,sans-serif)}
.sp-lip[hidden],.sp-bw[hidden]{display:none}

/* ---------- de kleine vaste ingang: een papiertje (of een blauw straatnaambord) dat uit de rand steekt en af en toe iets doet ---------- */
.sp-lip{position:fixed;z-index:1900;right:var(--sp-rechts,76px);bottom:0;padding:7px 16px 5px;border:1px solid #cdc4ad;border-bottom:0;border-radius:6px 6px 0 0;cursor:pointer;background:#fbf5e6;color:#233a64;font:700 20px/1.1 "Caveat",cursive;
  box-shadow:0 -3px 8px rgba(21,33,59,.18);transition:transform .25s;transform-origin:50% 100%}
.sp-lip:hover,.sp-lip:focus-visible{transform:translateY(-6px)}
.sp-lip.sp-lip-bord{display:flex;align-items:center;gap:8px;padding:9px 15px 8px;border:0;border-radius:5px 5px 0 0;background:#1d4f91;color:#fff;font:800 14px/1.1 var(--tekst,"Overpass",system-ui,sans-serif);letter-spacing:.01em;
  box-shadow:inset 0 0 0 2px #1d4f91,inset 0 0 0 4px #fff,0 -3px 8px rgba(21,33,59,.25)}
.sp-ico{flex:none}
.sp-wobbel{animation:sp-wobbel 1.6s ease-in-out}
@keyframes sp-wobbel{0%,100%{rotate:0deg;translate:0 0}12%{rotate:-4deg;translate:0 -7px}28%{rotate:3.5deg;translate:0 -4px}44%{rotate:-2.5deg;translate:0 -6px}60%{rotate:2deg;translate:0 -2px}80%{rotate:-1deg;translate:0 -1px}}
@media (max-width:760px){.sp-lip{right:12px}.sp-lip.sp-lip-bord{font-size:13px}}
/* de kleine tussendoortjes: een autootje met een kopje op het dak dat langsrijdt en toetert, en een bordje of kopje dat achter het papiertje opduikt */
.sp-act{position:fixed;z-index:1899;bottom:0;pointer-events:none}
.sp-act svg{display:block}
.sp-act-auto{left:0;width:72px;height:40px;animation:sp-rij 7.5s ease-in-out both}
.sp-act-auto svg{animation:sp-hobbel .35s ease-in-out infinite alternate}
@keyframes sp-hobbel{to{transform:translateY(-1.5px)}}
@keyframes sp-rij{0%{transform:translateX(-90px)}46%{transform:translateX(var(--stop))}70%{transform:translateX(var(--stop))}100%{transform:translateX(calc(100vw + 90px))}}
.sp-wiel{transform-box:fill-box;transform-origin:center;animation:sp-draai .5s linear infinite}
.sp-toet{position:absolute;left:36px;top:-26px;white-space:nowrap;font:700 21px/1 "Caveat",cursive;color:#8f3a2c;opacity:0;animation:sp-toet 7.5s both}
@keyframes sp-toet{0%,46%{opacity:0;transform:scale(.6) rotate(-6deg)}50%,68%{opacity:1;transform:scale(1) rotate(-6deg)}72%,100%{opacity:0}}
.sp-act-bord,.sp-act-kopje{width:48px;animation:sp-op-uit 4.6s both}
@keyframes sp-op-uit{0%{transform:translateY(105%)}14%{transform:translateY(-3%)}18%{transform:translateY(0)}86%{transform:translateY(0)}100%{transform:translateY(105%)}}
.sp-act-bord svg{margin:0 2px;transform-origin:50% 52px;animation:sp-schud .7s ease-in-out .8s 3}
@keyframes sp-schud{0%,100%{rotate:0deg}25%{rotate:7deg}75%{rotate:-7deg}}
.sp-act-kopje svg{animation:sp-wip .9s ease-in-out .8s 3}
@keyframes sp-wip{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.sp-stoom{transform-box:fill-box;animation:sp-stoom 1.4s ease-in-out infinite}
@keyframes sp-stoom{0%{opacity:.2;transform:translateY(3px)}50%{opacity:1}100%{opacity:.2;transform:translateY(-4px)}}

/* ---------- de tekening van de maker aan zijn bureau ---------- */
.sp-bw{position:fixed;z-index:1950;right:var(--sp-rechts-k,26px);bottom:16px;width:min(430px,calc(100vw - 20px));overflow:hidden;border:1px solid #cdc4ad;border-radius:6px;background:#fbf5e6;color:#233a64;
  box-shadow:0 18px 40px rgba(21,33,59,.32),0 2px 6px rgba(21,33,59,.18);rotate:-.7deg;max-height:calc(100dvh - 20px);overflow:auto;transform-origin:bottom right;animation:sp-binnen .9s cubic-bezier(.2,1.15,.4,1) both}
@keyframes sp-binnen{from{transform:translateY(112%) rotate(3deg)}to{transform:none}}
.sp-bw.sp-weg{animation:sp-buiten .5s ease-in both}@keyframes sp-buiten{to{transform:translateY(115%) rotate(2deg)}}
/* smal scherm: midden onderaan, nooit breder dan nodig */
@media (max-width:760px){.sp-bw{left:50%;right:auto;translate:-50% 0;width:min(480px,calc(100vw - 20px));bottom:10px;rotate:0deg}}
/* telefoon op zijn kant: de tekening links, de tekst rechts, zodat er niet gescrold hoeft te worden */
@media (max-height:520px) and (orientation:landscape){.sp-bw{left:50%;right:auto;translate:-50% 0;width:min(780px,calc(100vw - 20px));bottom:6px;rotate:0deg;display:grid;grid-template-columns:1.15fr 1fr;align-items:center}
  .sp-bw .sp-plaat{aspect-ratio:auto}.sp-bw .sp-scene{margin-top:0}.sp-bwtekst{padding:10px 14px 10px 6px;gap:6px}.sp-groet{font-size:24px}.sp-vraag{font-size:.88rem;line-height:1.3}.sp-bed{padding:6px 3px}.sp-bed b{font-size:1.05rem}}
.sp-plaat{line-height:0;background:#f7ecd5}
.sp-scene{position:relative;aspect-ratio:1100/738;overflow:hidden}
.sp-scene img{position:absolute;display:block}
.sp-basis{inset:0;width:100%;height:100%}
@media (max-width:760px){.sp-plaat{aspect-ratio:1.55;overflow:hidden}.sp-scene{margin-top:-1.5%}}
.sp-bwtekst{display:grid;gap:8px;padding:12px 16px 14px}
.sp-groet{margin:0;font:700 27px/1 "Caveat",cursive;color:#8f3a2c}
.sp-vraag{margin:0;font-size:.95rem;line-height:1.4;color:#233a64}
.sp-bedragen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:2px}
.sp-bed{display:grid;gap:1px;justify-items:center;padding:9px 4px 8px;border:1.5px solid #233a64;border-radius:3px;background:#fff;color:#233a64;font-family:var(--tekst,"Overpass",system-ui,sans-serif);cursor:pointer;transition:transform .15s,background .15s}
.sp-bed b{font-size:1.15rem;line-height:1.1}
.sp-bed span{font-size:.72rem;line-height:1.2;font-weight:700;color:#6c6450}
.sp-bed:hover,.sp-bed:focus-visible{background:#233a64;color:#fff;transform:translateY(-2px)}
.sp-bed:hover span,.sp-bed:focus-visible span{color:#d6dcea}
.sp-ideal{display:flex;align-items:center;gap:8px;margin:0;font-size:.78rem;line-height:1.3;color:#6c6450}
.sp-pil{flex:none;padding:2px 7px 3px;border:1.5px solid #6c6450;border-radius:4px;font:800 .72rem/1.1 var(--tekst,"Overpass",system-ui,sans-serif);color:#233a64;background:#fff}
.sp-reageer{margin:0;font-size:.82rem;line-height:1.35;color:#6c6450}
.sp-reageer a{color:#233a64;font-weight:700;text-underline-offset:3px}
.sp-onder{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sp-sig{rotate:-2deg;font:700 22px/1 "Caveat",cursive;color:#233a64}
.sp-mat{padding:12px 6px;border:0;background:none;color:#6c6450;font:700 .82rem var(--tekst,"Overpass",system-ui,sans-serif);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* de tekening beweegt: de maker (filmpjes over de achtergrond, zie steun.js), de molenwieken en het bootje */
.sp-scene [hidden]{display:none}
.sp-film{position:absolute;-webkit-mask:url(/img/bureau-masker.webp?v=4) center/100% 100% no-repeat;mask:url(/img/bureau-masker.webp?v=4) center/100% 100% no-repeat}
.sp-v{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .22s linear}.sp-v.sp-aan{opacity:1}
.sp-wieken{left:25.39%;top:29.07%;width:13.2%;height:auto;translate:-50% -50%;animation:sp-draai 26s linear infinite}@keyframes sp-draai{to{rotate:360deg}}
/* het bootje glijdt rustig van links naar rechts over het linkerstuk van de rivier (voor de maker en zijn mok langs), vaart er onzichtbaar in en uit,
   en deint een tikje; daarna begint het opnieuw */
.sp-boot{left:0;top:51.2%;width:5.2%;height:auto;opacity:0;animation:sp-vaar 70s linear infinite,sp-deint 3.6s ease-in-out infinite alternate}
@keyframes sp-vaar{0%{transform:translateX(352%);opacity:0}5%{opacity:1}90%{opacity:1}100%{transform:translateX(880%);opacity:0}}
@keyframes sp-deint{from{translate:0 -1px}to{translate:0 1px}}
@media (prefers-reduced-motion:reduce){.sp-wieken,.sp-boot{animation:none}}
.sp-still .sp-wieken{animation:none}
/* na het betalen vloeit het beeld over in de tevreden versie */
.sp-dank{inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
.sp-vol .sp-dank{opacity:1}
.sp-rust .sp-wieken,.sp-rust .sp-boot{animation-play-state:paused}

/* ---------- gedeeld: herinnering, bedankje ---------- */
.sp-acties{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sp-go{display:inline-block;padding:12px 18px;border:0;border-radius:2px;background:var(--inkt);color:#fff;font:800 .95rem var(--tekst);text-decoration:none;cursor:pointer}
.sp-los{padding:12px 6px;border:0;background:none;color:var(--grijs);font:700 .9rem var(--tekst);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sp-terug{position:fixed;z-index:2100;left:50%;bottom:16px;translate:-50% 0;display:grid;gap:10px;width:min(440px,calc(100vw - 24px));padding:14px 16px;border:1.5px solid var(--inkt);background:#fff;color:var(--inkt);box-shadow:0 10px 30px rgba(21,33,59,.25);animation:sp-op .4s cubic-bezier(.2,1.2,.4,1) both}
.sp-terug p{margin:0;font-size:.92rem}
@keyframes sp-op{from{transform:translateY(16px);opacity:0}}
.sp-toast{position:fixed;z-index:2100;left:50%;top:84px;translate:-50% 0;max-width:calc(100vw - 24px);padding:12px 18px;background:var(--inkt);color:#fff;font-weight:700;font-size:.95rem;text-align:center;animation:sp-op .4s both}

/* ---------- proefpaneel (alleen lokaal en op de testsite) ---------- */
.sp-proef{position:fixed;z-index:2200;left:12px;bottom:12px;display:grid;gap:6px;max-width:260px;padding:8px 10px;border:1.5px solid var(--inkt);background:#fff;color:var(--inkt);font-size:12px;box-shadow:0 6px 18px rgba(21,33,59,.2)}
.sp-proef summary{cursor:pointer;font-weight:800}
.sp-proef div{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.sp-proef button{padding:5px 8px;border:1px solid var(--inkt);background:#fff;color:var(--inkt);font:700 12px var(--tekst);cursor:pointer}
.sp-proef button[aria-pressed="true"]{background:var(--inkt);color:#fff}
.sp-proef p{margin:6px 0 0;color:var(--grijs);font-size:11px;line-height:1.35}
@media (max-width:760px){.sp-proef{bottom:auto;top:132px;left:8px;max-width:calc(100vw - 16px)}}
@media (prefers-reduced-motion:reduce){.sp-act{display:none}.sp-lip,.sp-bw,.sp-terug,.sp-toast,.sp-bw *{animation:none!important;transition:none!important}}
/* regeltje onder de bedragen op een telefoon */
.sp-tip{margin:0;font-size:.78rem;line-height:1.35;color:#6c6450}