/* GEKOPIEERD door maak-speler-bron.py. Bewerk in 1. Atisuto tools zelf/27. presentatie-builder/speler/ */
/* ══════════════════════════════════════════════════════════════
   ATISUTO PRESENTATIES · SPELER
   Alles staat onder .ati-pres, zodat een theme (bv. Avada) niets
   overschrijft en je meerdere presentaties op één pagina kunt zetten.
   De kleuren komen als --ati-* variabelen uit de huisstijl.
   ══════════════════════════════════════════════════════════════ */

.ati-pres{
  --ati-achtergrond:#f5f5f7; --ati-kaart:#ffffff; --ati-tekst:#1d1d1f; --ati-grijs:#6e6e73;
  --ati-accent:#2563eb; --ati-accent2:#9333ea; --ati-accent3:#ec4899; --ati-donker:#1d1d1f;
  --ati-accent-zacht:rgba(37,99,235,.10);
  --ati-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ati-fade:.55s;
  --ati-lijn:color-mix(in srgb, var(--ati-tekst) 9%, transparent);
  --ati-radius:16px;
  --ati-ease:cubic-bezier(.22,.72,.24,1);
  --ati-verloop:linear-gradient(90deg,var(--ati-accent) 0%,var(--ati-accent2) 46%,var(--ati-accent3) 100%);
  --ati-rand:color-mix(in srgb, var(--ati-achtergrond) 86%, #000);

  position:relative; overflow:hidden; display:block;
  background:var(--ati-rand); color:var(--ati-tekst);
  font-family:var(--ati-font); line-height:1.4; text-align:left;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
  outline:none; user-select:none; -webkit-user-select:none;
}
.ati-pres{letter-spacing:normal;text-transform:none;word-spacing:normal;font-style:normal;text-shadow:none}
/* dubbele klasse = sterker dan de meeste theme-regels (bv. "body .x div") */
.ati-pres.ati-pres *, .ati-pres.ati-pres *::before, .ati-pres.ati-pres *::after{box-sizing:border-box;margin:0;padding:0;border:0;
  letter-spacing:inherit;text-transform:inherit;word-spacing:inherit;font-style:inherit;text-decoration:none;text-shadow:none;
  float:none;min-height:0;max-height:none;vertical-align:baseline}
.ati-pres .ati-slide, .ati-pres .ati-slide *{font-family:var(--ati-font)}

/* modus: eigen pagina */
.ati-pres.ati-pres--pagina{position:fixed;inset:0;width:auto;height:auto}
/* modus: in een pagina (embed) */
.ati-pres.ati-pres--embed{width:100%;aspect-ratio:16/9;border-radius:12px}
.ati-pres.ati-pres--embed:focus-visible{box-shadow:0 0 0 3px var(--ati-accent-zacht)}
.ati-pres:fullscreen{background:#000;border-radius:0;aspect-ratio:auto;width:100%;height:100%}
.ati-pres:-webkit-full-screen{background:#000;border-radius:0;width:100%;height:100%}

.ati-pres .ati-stage{position:absolute;inset:0;overflow:hidden}
.ati-pres .ati-deck{width:1280px;height:720px;position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);transform-origin:center center;
  background:var(--ati-achtergrond);overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.22)}
.ati-pres--embed .ati-deck{box-shadow:none}

/* ── Slides ─────────────────────────────────────────────────── */
.ati-pres .ati-slide{position:absolute;inset:0;width:1280px;height:720px;background:var(--ati-achtergrond);
  padding:62px 80px 74px;display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:scale(1.012);pointer-events:none;will-change:opacity,transform;
  transition:opacity var(--ati-fade) var(--ati-ease),transform var(--ati-fade) var(--ati-ease)}
.ati-pres .ati-deck .ati-slide.is-actief{opacity:1;transform:none;pointer-events:auto;z-index:2}
.ati-pres .ati-deck .ati-slide.vertrekt{opacity:0;transform:scale(.994);z-index:1;
  transition:opacity calc(var(--ati-fade)*.72) var(--ati-ease),transform var(--ati-fade) var(--ati-ease)}
.ati-pres .ati-deck.zonder-overgang .ati-slide{transition:none!important}
@media (prefers-reduced-motion:reduce){.ati-pres .ati-slide{transition:none!important;transform:none!important}}

.ati-pres .ati-voet{position:absolute;left:80px;bottom:26px;right:160px;font-size:11.5px;font-weight:600;
  color:color-mix(in srgb, var(--ati-grijs) 62%, var(--ati-achtergrond));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ati-pres .ati-paginanr{position:absolute;right:80px;bottom:24px;font-size:12px;font-weight:700;
  color:color-mix(in srgb, var(--ati-grijs) 62%, var(--ati-achtergrond))}

.ati-pres .ati-logo{height:54px;width:auto;max-width:420px;align-self:flex-start;object-fit:contain;display:block}
.ati-pres .ati-logotekst{font-size:34px;font-weight:800;letter-spacing:-.03em;align-self:flex-start;line-height:1.2}

.ati-pres .ati-eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ati-grijs);line-height:1.4}
.ati-pres .ati-verloop-tekst{display:inline-block;padding:.08em .12em .14em 0;background:var(--ati-verloop);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ati-pres .ati-h1{font-size:84px;font-weight:800;letter-spacing:-.035em;line-height:1.08;color:var(--ati-tekst)}
.ati-pres .ati-h2{font-size:44px;font-weight:800;letter-spacing:-.028em;line-height:1.12;padding-bottom:.05em;color:var(--ati-tekst)}
.ati-pres .ati-lead{font-size:21px;font-weight:400;color:color-mix(in srgb, var(--ati-tekst) 82%, var(--ati-achtergrond));line-height:1.5;max-width:860px}
.ati-pres b{font-weight:700;color:inherit}

.ati-pres .ati-kop{display:flex;align-items:center;gap:18px;margin-bottom:32px;flex:0 0 auto}
.ati-pres .ati-badge{width:46px;height:46px;border-radius:12px;background:var(--ati-accent);color:#fff;
  display:grid;place-items:center;font-size:16px;font-weight:800;flex:0 0 auto;line-height:1}

.ati-pres .ati-kaart{background:var(--ati-kaart);border:1px solid var(--ati-lijn);border-radius:var(--ati-radius);padding:28px 30px}
.ati-pres .ati-kaart .ati-h3{font-size:20.5px;font-weight:700;letter-spacing:-.014em;margin-bottom:10px;line-height:1.28;color:var(--ati-tekst)}
.ati-pres .ati-kaart .ati-p{font-size:16px;line-height:1.58;font-weight:400;color:color-mix(in srgb, var(--ati-tekst) 72%, var(--ati-kaart))}
.ati-pres .ati-kaart.donker{background:var(--ati-donker);border-color:var(--ati-donker)}
.ati-pres .ati-kaart.donker .ati-h3{color:#fff}
.ati-pres .ati-kaart.donker .ati-p{color:rgba(255,255,255,.78)}
.ati-pres .ati-kaart.compact{padding:22px 24px}
.ati-pres .ati-kaart.compact .ati-h3{font-size:18.5px}
.ati-pres .ati-kaart.compact .ati-p{font-size:15px}

.ati-pres .ati-raster{display:grid;gap:18px;flex:1 1 auto;align-content:center}
.ati-pres .ati-r2{grid-template-columns:1fr 1fr}
.ati-pres .ati-r3{grid-template-columns:repeat(3,1fr)}

.ati-pres .ati-banner{background:var(--ati-verloop);border-radius:var(--ati-radius);padding:24px 32px;color:#fff;flex:0 0 auto;margin-top:26px}
.ati-pres .ati-banner .ati-bt{font-size:22.5px;font-weight:700;letter-spacing:-.017em;line-height:1.3}
.ati-pres .ati-banner .ati-bs{font-size:15.5px;font-weight:400;opacity:.93;margin-top:7px;line-height:1.45}

.ati-pres .ati-vinkjes-rij{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;flex:1 1 auto;align-items:center}
.ati-pres .ati-vinkjes-rij.enkel{grid-template-columns:1fr}
.ati-pres .ati-vinkjes{display:flex;flex-direction:column;gap:22px;justify-content:center}
.ati-pres .ati-vinkje{display:flex;gap:15px;align-items:flex-start}
.ati-pres .ati-vink{width:24px;height:24px;border-radius:7px;flex:0 0 auto;margin-top:2px;
  background:var(--ati-accent-zacht);display:grid;place-items:center}
.ati-pres .ati-vink svg{width:13px;height:13px;stroke:var(--ati-accent);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ati-pres .ati-vinkje .ati-p{font-size:18px;line-height:1.5;font-weight:400;color:color-mix(in srgb, var(--ati-tekst) 82%, var(--ati-achtergrond))}
.ati-pres .ati-vinkje .ati-p b{color:var(--ati-tekst)}

.ati-pres .ati-stappen{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;gap:26px 40px;flex:1 1 auto;align-content:center}
.ati-pres .ati-stap{display:flex;gap:16px;align-items:flex-start}
.ati-pres .ati-stap .ati-n{width:33px;height:33px;border-radius:10px;flex:0 0 auto;background:var(--ati-kaart);
  border:1px solid var(--ati-lijn);display:grid;place-items:center;font-size:14px;font-weight:800;color:var(--ati-accent);line-height:1}
.ati-pres .ati-stap .ati-st{font-size:18px;font-weight:700;letter-spacing:-.012em;line-height:1.35;color:var(--ati-tekst)}
.ati-pres .ati-stap .ati-sd{font-size:15px;color:var(--ati-grijs);font-weight:400;line-height:1.45;margin-top:3px}

.ati-pres .ati-cijfer{font-size:104px;font-weight:800;letter-spacing:-.04em;line-height:1}
.ati-pres .ati-citaat{font-size:40px;font-weight:700;letter-spacing:-.022em;line-height:1.28;max-width:1000px;margin-top:24px;color:var(--ati-tekst)}
.ati-pres .ati-noot{font-size:17px;color:var(--ati-grijs);font-weight:400;line-height:1.5;margin-top:26px;flex:0 0 auto}
.ati-pres .ati-noot b{color:var(--ati-tekst)}
.ati-pres .ati-vulling{flex:1 1 auto}
.ati-pres .ati-pills{display:flex;gap:10px;flex-wrap:wrap}
.ati-pres .ati-pill{display:inline-flex;align-items:center;background:var(--ati-accent-zacht);color:var(--ati-accent);
  border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;line-height:1.4}
.ati-pres .ati-naam{font-size:30px;font-weight:800;letter-spacing:-.028em;line-height:1.2;margin-top:30px;color:var(--ati-tekst)}
.ati-pres .ati-contact{font-size:18px;font-weight:600;color:var(--ati-accent);margin-top:5px;line-height:1.4}

/* ── Bediening ──────────────────────────────────────────────── */
.ati-pres .ati-balk{position:absolute;top:0;left:0;height:3px;background:var(--ati-accent);width:0;
  transition:width .3s var(--ati-ease);z-index:30}
.ati-pres .ati-nav{position:absolute;right:14px;bottom:12px;display:flex;align-items:center;gap:8px;z-index:36}
.ati-pres .ati-nav button{width:36px;height:36px;border:0;border-radius:999px;background:rgba(255,255,255,.92);
  color:#1d1d1f;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.14);font-size:15px;line-height:1;
  display:grid;place-items:center;font-family:inherit;padding:0}
.ati-pres .ati-nav button:hover{background:#fff}
.ati-pres .ati-nav button svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ati-pres .ati-teller{font-size:12.5px;font-weight:700;color:#4a4a50;background:rgba(255,255,255,.92);
  border-radius:999px;padding:7px 12px;box-shadow:0 2px 10px rgba(0,0,0,.14);line-height:1.4}
.ati-pres .ati-hint{position:absolute;left:14px;bottom:14px;z-index:30;font-size:12px;font-weight:600;color:#6a6a70;
  background:rgba(255,255,255,.9);border-radius:999px;padding:7px 13px;box-shadow:0 2px 10px rgba(0,0,0,.12);
  transition:opacity .5s;line-height:1.4}
.ati-pres--embed .ati-nav{right:10px;bottom:10px;gap:6px}
.ati-pres--embed .ati-nav button{width:32px;height:32px}
/* smal (telefoon, of een iframe in een smalle kolom): kleinere knoppen */
.ati-pres.is-smal .ati-teller,.ati-pres.is-smal .ati-hint{display:none}
.ati-pres.is-smal .ati-nav{right:6px;bottom:6px;gap:4px}
.ati-pres.is-smal .ati-nav button{width:26px;height:26px;background:rgba(255,255,255,.85)}
.ati-pres.is-smal .ati-nav button svg{width:13px;height:13px}

.ati-pres .ati-notities{position:absolute;left:0;right:0;bottom:0;z-index:35;display:none;
  background:rgba(20,20,24,.92);color:#fff;font-size:15px;line-height:1.5;padding:14px 22px 60px;max-height:40%;overflow:auto}
.ati-pres.toon-notities .ati-notities{display:block}
.ati-pres .ati-notities .ati-notities-kop{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:4px}

.ati-pres .ati-overzicht{position:absolute;inset:0;background:var(--ati-rand);z-index:40;display:none;overflow:auto;padding:22px}
.ati-pres .ati-overzicht.aan{display:block}
.ati-pres .ati-overzicht .ati-ov{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.ati-pres--embed .ati-overzicht .ati-ov{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.ati-pres .ati-duim{position:relative;padding-top:56.25%;background:#fff;border-radius:10px;
  overflow:hidden;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.12)}
.ati-pres .ati-duim.huidig{outline:3px solid var(--ati-accent);outline-offset:2px}
.ati-pres .ati-duim .ati-binnen{position:absolute;left:0;top:0;transform-origin:top left;width:1280px;height:720px}
.ati-pres .ati-duim .ati-binnen .ati-slide{opacity:1!important;transform:none!important;transition:none!important}
.ati-pres .ati-duim .ati-lbl{position:absolute;left:8px;bottom:6px;z-index:2;font-size:11px;font-weight:800;
  color:#fff;background:rgba(0,0,0,.55);border-radius:999px;padding:2px 8px;line-height:1.4}

.ati-pres .ati-fout{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;
  font-size:16px;color:#6e6e73;background:#f5f5f7}

/* ── Printen (alleen de eigen pagina) ───────────────────────── */
@media print{
  @page{size:1280px 720px;margin:0}
  html,body{background:#fff!important;overflow:visible!important;height:auto!important}
  .ati-pres.ati-pres--pagina{position:static;overflow:visible;background:#fff}
  .ati-pres--pagina .ati-stage{position:static;display:block;overflow:visible}
  .ati-pres--pagina .ati-deck{position:static;left:auto;top:auto;width:auto;height:auto;
    transform:none!important;box-shadow:none;overflow:visible}
  .ati-pres--pagina .ati-slide{position:relative;opacity:1!important;transform:none!important;
    page-break-after:always;break-after:page;transition:none!important}
  .ati-pres--pagina .ati-slide:last-child{page-break-after:auto;break-after:auto}
  .ati-pres--pagina .ati-balk,.ati-pres--pagina .ati-nav,.ati-pres--pagina .ati-hint,
  .ati-pres--pagina .ati-overzicht,.ati-pres--pagina .ati-notities{display:none!important}
  .ati-pres *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}