/* Simson Gym: laadscherm en skiplink. */
/* ---------- 1. conceptbanner ---------- */
/* Staat in de normale documentflow, boven de header. Geen fixed
   positionering: dat zou onder een sticky nav schuiven en de
   scroll-offset van anchorlinks kapotmaken. */
.ck-banner{
  position:relative; z-index:960;
  background:var(--ck-banner-bg); color:var(--ck-banner-fg);
  font-family:var(--ck-font-ui); font-size:.78rem; line-height:1.45;
  letter-spacing:.01em;
  padding:.6rem clamp(1rem,4vw,2.5rem);
  display:flex; align-items:center; justify-content:center;
  gap:.5rem .85rem; flex-wrap:wrap; text-align:center;
  text-wrap:balance;
}
.ck-banner__tag{
  font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  font-size:.66rem; white-space:nowrap;
  color:var(--ck-banner-accent);
  display:inline-flex; align-items:center; gap:.45rem;
}
/* Eigen merkteken in plaats van een generiek "info"-icoontje. */
.ck-banner__tag::before{
  content:""; width:.5rem; height:.5rem; flex:none;
  background:currentColor; border-radius:var(--ck-banner-dot-radius,0);
}
.ck-banner__text{opacity:.92; max-width:62ch}
.ck-banner a{color:inherit; text-decoration:underline; text-underline-offset:.2em}
.ck-banner a:hover{opacity:.75}

/* ---------- 1b. bespreek-CTA en contactmodal (sinds 03-10-2026) ---------- */
/* Tekstknop in de banner: geen vlak, geen schaduw, alleen een dun streepje
   onder de tekst. Het concept blijft de hoofdzaak. */
.ck-cta{
  appearance:none; background:none; border:0; margin:0; padding:.35rem .1rem;
  min-height:32px; cursor:pointer; color:inherit; font:inherit; font-weight:600;
  letter-spacing:.01em; white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent);
  transition:border-color .2s ease, opacity .2s ease;
}
.ck-cta span{display:inline-block; transition:transform .25s cubic-bezier(.22,1,.36,1)}
.ck-cta:hover{border-bottom-color:var(--ck-banner-accent)}
.ck-cta:hover span{transform:translateX(3px)}
.ck-cta:focus-visible{outline:2px solid var(--ck-banner-accent); outline-offset:3px}
.ck-modal--contact .ck-modal__box{width:min(26rem,100%)}
.ck-modal--contact .ck-modal__eyebrow{color:inherit; opacity:.6}
.ck-modal--contact .ck-contact__rij:hover,.ck-modal--contact .ck-contact__rij:focus-visible{border-color:currentColor}
.ck-contact__rijen{display:grid; gap:.6rem}
.ck-contact__rij{
  display:flex; flex-direction:column; gap:.1rem; justify-content:center;
  min-height:56px; padding:.75rem 1rem; text-decoration:none; color:inherit;
  border:1px solid var(--ck-modal-line); border-radius:var(--ck-radius,0);
  transition:border-color .2s ease, background .2s ease;
}
.ck-contact__rij:hover,.ck-contact__rij:focus-visible{
  border-color:var(--ck-banner-accent);
  background:color-mix(in srgb,var(--ck-banner-accent) 8%,transparent);
}
.ck-contact__rij:focus-visible{outline:2px solid var(--ck-banner-accent); outline-offset:2px}
.ck-contact__label{font-weight:700; font-size:.95rem}
.ck-contact__waarde{font-size:.82rem; opacity:.7; overflow-wrap:anywhere}

/* ---------- 2. branded loader ---------- */
/* Zit standaard in de HTML en wordt door concept-kit.js verwijderd
   zodra de pagina klaar is. Zonder JS verdwijnt hij via de
   animatie hieronder, zodat de site nooit onbereikbaar wordt. */
.ck-loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--ck-loader-bg); color:var(--ck-loader-fg);
  transition:opacity .55s cubic-bezier(.4,0,.2,1), visibility .55s;
  animation:ck-loader-failsafe 0s linear 6s forwards;
}
.ck-loader__inner{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.1rem,3vw,1.75rem); padding:1.5rem;
}
.ck-loader__mark{display:block}
.ck-loader.is-done{opacity:0; visibility:hidden; pointer-events:none}
@keyframes ck-loader-failsafe{to{opacity:0; visibility:hidden; pointer-events:none}}

/* Voortgangsstreep: vult zich op echte voortgang (JS zet --ck-p),
   niet op een verzonnen timer. */
.ck-loader__bar{
  width:clamp(120px,26vw,200px); height:2px; overflow:hidden;
  background:color-mix(in srgb, var(--ck-loader-fg) 22%, transparent);
}
.ck-loader__bar i{
  display:block; height:100%; width:100%; background:currentColor;
  transform:scaleX(var(--ck-p,.08)); transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}

/* Zolang de loader draait mag er niet gescrold worden. */
html.ck-loading, html.ck-loading body{overflow:hidden}

/* ---------- 3. intro-reveal na de loader ---------- */
/* De hero-elementen staan klaar en komen pas in beweging als de
   loader weg is, zodat loader en hero een doorlopende beweging zijn
   in plaats van twee losse stappen.

   Let op de html.ck-js-scope hieronder en bij .ck-reveal: verbergen mag
   alleen als de JS die het weer zichtbaar maakt daadwerkelijk draait.
   Zonder die scope zou een JS-fout of een geblokkeerd script de halve
   pagina onzichtbaar maken. Het laadscherm dekt het korte moment tussen
   parsen en uitvoeren af, dus er is geen zichtbare flits. */
html.ck-js .ck-intro>*{opacity:0; transform:translateY(var(--ck-intro-shift,14px))}
html.ck-intro-ready .ck-intro>*{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
html.ck-intro-ready .ck-intro>*:nth-child(1){transition-delay:.04s}
html.ck-intro-ready .ck-intro>*:nth-child(2){transition-delay:.13s}
html.ck-intro-ready .ck-intro>*:nth-child(3){transition-delay:.22s}
html.ck-intro-ready .ck-intro>*:nth-child(4){transition-delay:.31s}
html.ck-intro-ready .ck-intro>*:nth-child(5){transition-delay:.40s}
html.ck-intro-ready .ck-intro>*:nth-child(6){transition-delay:.49s}

/* ---------- 4. scroll reveal ---------- */
html.ck-js .ck-reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
}
html.ck-js .ck-reveal.is-in{opacity:1; transform:none}

/* ---------- 5. conceptmodal ---------- */
.ck-modal{
  position:fixed; inset:0; z-index:9998;
  display:grid; place-items:center;
  padding:clamp(1rem,5vw,2rem);
  background:color-mix(in srgb, var(--ck-modal-scrim,#0b0b0c) 68%, transparent);
  opacity:0; visibility:hidden;
  /* visibility schakelt bij het OPENEN meteen (0s) en bij het sluiten pas na
     de fade. Liep visibility mee in de transitie, dan was de dialog tijdens
     het eerste frame nog hidden en kon hij geen focus krijgen. */
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.ck-modal.is-open{
  opacity:1; visibility:visible;
  transition:opacity .3s ease, visibility 0s linear 0s;
}
.ck-modal__box:focus{outline:none}
.ck-modal__box:focus-visible{outline:2px solid var(--ck-banner-accent); outline-offset:4px}
.ck-modal__box{
  position:relative; width:min(34rem,100%);
  background:var(--ck-modal-bg); color:var(--ck-modal-fg);
  border:1px solid var(--ck-modal-line);
  border-radius:var(--ck-radius,0);
  padding:clamp(1.75rem,5vw,2.75rem);
  font-family:var(--ck-font-ui);
  transform:translateY(14px) scale(.985);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  max-height:calc(100dvh - 2rem); overflow-y:auto;
}
.ck-modal.is-open .ck-modal__box{transform:none}
.ck-modal__eyebrow{
  font-size:.66rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ck-banner-accent);
  margin:0 0 .85rem;
}
.ck-modal__title{
  font-family:var(--ck-font-display); font-weight:700;
  font-size:clamp(1.45rem,4.5vw,1.9rem); line-height:1.12;
  margin:0 0 .85rem; letter-spacing:-.01em;
}
.ck-modal__box p{margin:0 0 .9rem; font-size:.95rem; line-height:1.65; opacity:.85}
.ck-modal__box p:last-of-type{margin-bottom:1.5rem}
.ck-modal__actions{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center}
.ck-modal__close{
  position:absolute; top:.6rem; right:.6rem; z-index:2;
  width:44px; height:44px; display:grid; place-items:center;
  color:inherit; opacity:.55; background:none; border:0; cursor:pointer;
  border-radius:var(--ck-radius,0); transition:opacity .2s ease;
}
.ck-modal__close:hover{opacity:1}
.ck-modal__close svg{width:17px; height:17px}

/* ---------- 6. skip-link ---------- */
.ck-skip{
  position:absolute; left:.5rem; top:.5rem; z-index:9997;
  transform:translateY(-160%);
  background:var(--ck-modal-bg); color:var(--ck-modal-fg);
  border:1px solid var(--ck-modal-line); border-radius:var(--ck-radius,0);
  padding:.7rem 1.1rem; font-family:var(--ck-font-ui);
  font-size:.85rem; font-weight:600;
  transition:transform .2s ease;
}
.ck-skip:focus-visible{transform:none}

/* ---------- 7. conceptmelding (auteursrecht, sinds 30-09-2026) ---------- */
/* Door concept-kit.js direct na de footer gezet. Neemt automatisch achtergrond,
   tekstkleur en font van die footer over (--ck-notice-*-auto); een site kan dat
   overschrijven met --ck-notice-bg / --ck-notice-fg in :root. Rustig en klein:
   geen banner, geen popup. */
p.ck-notice{
  display:block; box-sizing:border-box; width:100%; max-width:none; margin:0;
  padding:1rem clamp(1rem,4vw,2.5rem) 1.15rem;
  background:var(--ck-notice-bg,var(--ck-notice-bg-auto,transparent));
  color:var(--ck-notice-fg,var(--ck-notice-fg-auto,inherit));
  border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);
  font-family:var(--ck-font-ui,var(--ck-notice-font-auto,inherit));
  font-size:.72rem; font-weight:400; line-height:1.55; letter-spacing:.005em;
  text-align:center; text-transform:none; font-style:normal;
}
.ck-notice__in{display:block; max-width:62rem; margin:0 auto; opacity:var(--ck-notice-dim,.74)}
.ck-notice__by,.ck-notice__sep{display:inline}
.ck-notice__sep{margin:0 .12em}
.ck-notice__by{font-weight:600; white-space:nowrap}
.ck-notice a{color:inherit; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
.ck-notice a:hover{text-decoration-thickness:2px}

/* ---------- 7b. bescherming (sinds 06-10-2026) ---------- */
/* Watermerk: alleen bij printen of opslaan als PDF, nooit op het scherm. */
.ck-watermark{display:none}
@media print{
  .ck-watermark{
    display:block; position:fixed; inset:0; z-index:950; pointer-events:none;
    background-repeat:repeat; background-size:380px 240px;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
}
/* Melding bij rechtsklik/sneltoetsen (alleen actief als de kit dat aanzet). */
.ck-toast{
  position:fixed; left:50%; bottom:max(1rem,env(safe-area-inset-bottom)); z-index:9996;
  display:flex; align-items:center; gap:.4rem 1rem; flex-wrap:wrap; justify-content:center;
  width:max-content; max-width:calc(100vw - 2rem); box-sizing:border-box;
  padding:.8rem 1rem .8rem 1.15rem;
  background:var(--ck-modal-bg,#fff); color:var(--ck-modal-fg,#111);
  border:1px solid var(--ck-modal-line,rgba(0,0,0,.12)); border-radius:var(--ck-radius,12px);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  font-family:var(--ck-font-ui,inherit); font-size:.9rem; line-height:1.4;
  opacity:0; transform:translate(-50%,12px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.ck-toast.is-zichtbaar{opacity:1; transform:translate(-50%,0); pointer-events:auto}
.ck-toast__tekst{margin:0}
.ck-toast__knop{
  appearance:none; border:0; background:none; color:inherit; cursor:pointer;
  font:inherit; font-weight:600; min-height:44px; padding:0 .25rem;
  text-decoration:underline; text-underline-offset:3px;
}
.ck-toast__knop:focus-visible{outline:2px solid currentColor; outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .ck-toast{transition:none} }

/* ---------- 8. reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ck-loader,.ck-loader__bar i,.ck-modal,.ck-modal__box{transition-duration:.01ms}
  .ck-loader{animation-delay:1.2s}
  html.ck-js .ck-intro>*,html.ck-intro-ready .ck-intro>*{opacity:1; transform:none; transition:none}
  html.ck-js .ck-reveal{opacity:1; transform:none; transition:none}
}