/* ==========================================================
   powerpoint-maken.nl — 2026
   Concept: diavoorstelling in een donkere zaal
   Lint (ribbon) bovenaan · statusbalk onderaan · heldere dia's op een donker podium
   ========================================================== */

@font-face{font-family:"Bonum";src:url(bonum-bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Bonum";src:url(bonum-bold-italic.woff) format("woff");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow";src:url(barlow-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(barlow-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow";src:url(barlow-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --zaal:#121010;--zaal-2:#1a1716;--zaal-3:#24201e;--zaal-4:#2e2926;
  --lijn:#3a3330;--lijn-2:#4b423d;
  --tekst:#f3ebe0;--tekst-2:#cdbfb1;--tekst-3:#9a8d81;
  --oranje:#ff640a;--oranje-t:#ff8a3d;--amber:#ffa50a;--geel:#ffd23c;--terra:#c1592c;
  --dia:#faf6ef;--dia-inkt:#1d1916;--dia-grijs:#6c625a;
  --display:"Bonum","Bookman Old Style","URW Bookman",Bookman,Georgia,serif;
  --sans:"Barlow","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --r:10px;--r-l:16px;
  --max:1240px;--tekstbreed:44rem;
  --lint-h:92px;--status-h:34px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--lint-h) + 16px)}
body{margin:0;background:var(--zaal);color:var(--tekst);font:400 1.125rem/1.7 var(--sans);padding-bottom:var(--status-h);
  background-image:radial-gradient(1200px 520px at 70% -120px,rgba(255,120,30,.10),transparent 70%)}
img{max-width:100%;height:auto;display:block}
a{color:var(--oranje-t);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--geel)}
:focus-visible{outline:3px solid var(--geel);outline-offset:3px;border-radius:4px}
::selection{background:var(--oranje);color:#fff}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.2vw,4.1rem)}
h2{font-size:clamp(1.65rem,3vw,2.35rem);margin-top:2.2em}
h3{font-size:clamp(1.25rem,2vw,1.5rem);margin-top:1.8em}
h1 em,h2 em,h3 em,.accent{font-style:italic;color:var(--oranje-t)}
p,ul,ol{margin:0 0 1.15em}
strong{color:#fff}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-60px;z-index:200;background:var(--geel);color:#000;padding:.6rem 1rem;border-radius:6px;font-weight:700}
.skip:focus{top:1rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
.label{font:700 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.mono{font-family:var(--mono)}

/* ---------- Lint (ribbon) ---------- */
.lint{position:sticky;top:0;z-index:100;background:#0b0a09;border-bottom:1px solid var(--lijn)}
.lint-titel{display:flex;align-items:center;gap:1rem;height:48px;max-width:var(--max);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
.merk{display:flex;align-items:center;gap:.6rem;color:var(--tekst);text-decoration:none;font:700 1.25rem/1 var(--display)}
.merk img{width:32px;height:32px}
.merk span em{color:var(--oranje-t)}
.bestandsnaam{font:400 .85rem/1 var(--sans);color:var(--tekst-3);display:flex;gap:.5rem;align-items:center}
.bestandsnaam::before{content:"";width:6px;height:6px;border-radius:50%;background:#5bd17a;box-shadow:0 0 8px #5bd17a}
.lint-acties{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.knop{display:inline-flex;align-items:center;gap:.5rem;font:700 .95rem/1 var(--sans);padding:.7rem 1.1rem;border-radius:8px;border:1px solid var(--lijn-2);background:var(--zaal-3);color:var(--tekst);text-decoration:none;cursor:pointer}
.knop:hover{border-color:var(--amber);color:#fff}
.knop-oranje{background:var(--oranje);border-color:var(--oranje);color:#fff}
.knop-oranje:hover{background:#ff7a2a;color:#fff}
.knop-geel{background:var(--geel);border-color:var(--geel);color:#1b1306}
.knop-geel:hover{background:#ffe07a;color:#1b1306}
.knop svg{width:18px;height:18px;flex:none}
.knop-klein{padding:.5rem .8rem;font-size:.85rem}
.lint-tabs{display:flex;align-items:flex-end;gap:.15rem;max-width:var(--max);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem);height:44px}
.tab{position:relative;font:700 .95rem/1 var(--sans);color:var(--tekst-2);background:none;border:0;padding:.8rem 1rem .95rem;cursor:pointer;border-radius:8px 8px 0 0;text-decoration:none}
.tab:hover{color:#fff;background:var(--zaal-2)}
.tab[aria-expanded="true"]{color:#fff;background:var(--zaal-3)}
.tab.actief{color:#fff}
.tab.actief::after{content:"";position:absolute;left:1rem;right:1rem;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--oranje)}
.tab-bestand{background:var(--oranje);color:#fff;border-radius:6px 6px 0 0}
.tab-bestand:hover{background:#ff7a2a;color:#fff}
.tab-rechts{margin-left:auto}
.lint-paneel{position:absolute;left:0;right:0;top:100%;background:var(--zaal-3);border-bottom:1px solid var(--lijn-2);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);animation:paneel .18s ease-out}
.lint-paneel[hidden]{display:none}
@keyframes paneel{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lint-paneel-in{max-width:var(--max);margin:0 auto;padding:.9rem clamp(1rem,4vw,2.5rem) .7rem;display:flex;gap:0;overflow-x:auto}
.groep{display:flex;flex-direction:column;padding:0 1.1rem;border-right:1px solid var(--lijn-2)}
.groep:first-child{padding-left:0}
.groep:last-child{border-right:0}
.groep-knoppen{display:flex;gap:.35rem;flex:1}
.groep-naam{font:400 .75rem/1 var(--sans);color:var(--tekst-3);text-align:center;margin-top:.55rem;letter-spacing:.04em}
.lintknop{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.45rem;width:104px;min-height:96px;padding:.6rem .35rem;border-radius:8px;text-decoration:none;color:var(--tekst);font:400 .82rem/1.2 var(--sans);text-align:center;border:1px solid transparent}
.lintknop:hover{background:var(--zaal-4);border-color:var(--lijn-2);color:#fff}
.lintknop[aria-current="page"]{background:rgba(255,100,10,.14);border-color:rgba(255,100,10,.5)}
.lintknop svg{width:34px;height:34px}
.lint-hint{font-size:.75rem;color:var(--tekst-3);align-self:center;margin-left:auto;padding-left:1.5rem;white-space:nowrap}
.lint-hint kbd{font-size:.72rem}
.menuknop{display:none}

/* iconen */
.ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic .o{stroke:var(--oranje)}.ic .g{stroke:var(--geel)}.ic .a{stroke:var(--amber)}
.ic .fo{fill:var(--oranje);stroke:none}.ic .fg{fill:var(--geel);stroke:none}

/* mobiel menu */
.mobiel-menu{position:fixed;inset:0;z-index:150;background:rgba(8,7,6,.97);overflow-y:auto;padding:1rem 1.25rem 5rem}
.mobiel-menu[hidden]{display:none}
.mobiel-kop{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.mobiel-menu h2{font-size:1.1rem;margin:1.4rem 0 .6rem;color:var(--amber);font-family:var(--sans);letter-spacing:.12em;text-transform:uppercase}
.mobiel-menu ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.mobiel-menu a{display:block;padding:.85rem .9rem;border-radius:10px;background:var(--zaal-3);color:var(--tekst);text-decoration:none;font-weight:700;font-size:.98rem;line-height:1.25;border:1px solid var(--lijn)}
.mobiel-menu a[aria-current="page"]{border-color:var(--oranje);background:rgba(255,100,10,.15)}

@media (max-width:960px){
  :root{--lint-h:56px}
  .lint-tabs,.bestandsnaam,.lint-acties .knop-oranje{display:none}
  .lint-titel{height:56px}
  .menuknop{display:inline-flex}
}

/* ---------- Statusbalk ---------- */
.statusbalk{position:fixed;left:0;right:0;bottom:0;z-index:90;height:var(--status-h);background:#0b0a09;border-top:1px solid var(--lijn);display:flex;align-items:center;gap:1rem;padding:0 clamp(.75rem,3vw,1.5rem);font:400 .8rem/1 var(--sans);color:var(--tekst-3)}
.statusbalk a,.statusbalk button{color:var(--tekst-2);text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;padding:.35rem .4rem;border-radius:5px;display:inline-flex;align-items:center;gap:.3rem}
.statusbalk a:hover,.statusbalk button:hover{color:#fff;background:var(--zaal-3)}
.status-dia{color:var(--tekst-2);white-space:nowrap}
.status-dia b{color:#fff}
.status-titel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32vw}
.status-rechts{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.zoom{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.zoom-baan{position:relative;width:120px;height:3px;background:var(--lijn-2);border-radius:2px}
.zoom-vul{position:absolute;inset:0 auto 0 0;width:0;background:var(--oranje);border-radius:2px}
.zoom-baan::after{content:"";position:absolute;left:50%;top:-4px;width:1px;height:11px;background:var(--tekst-3)}
.zoom-pct{min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:640px){.status-titel,.status-taal,.zoom-baan{display:none}}

/* ---------- Hero / podium ---------- */
.podium{position:relative;padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,5vw,4rem);overflow:hidden}
.podium::before{content:"";position:absolute;left:50%;top:-30%;width:120%;height:130%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,190,90,.12),transparent);pointer-events:none}
.podium-grid{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.podium-tekst .label{display:inline-flex;gap:.6rem;align-items:center;margin-bottom:1.1rem}
.podium-tekst .label::before{content:"";width:28px;height:2px;background:var(--amber)}
.intro{font-size:clamp(1.15rem,1.7vw,1.32rem);color:var(--tekst-2);max-width:38rem}
.podium-acties{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.kruimel{font-size:.85rem;color:var(--tekst-3);margin-bottom:1.4rem}
.kruimel ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.kruimel li+li::before{content:"›";margin-right:.35rem;color:var(--lijn-2)}
.kruimel a{color:var(--tekst-2);text-decoration:none}
.kruimel a:hover{color:var(--geel)}

/* de dia op het podium */
.dia{position:relative;aspect-ratio:16/9;background:var(--dia);color:var(--dia-inkt);border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 80px -30px rgba(0,0,0,.9),0 0 120px -20px rgba(255,150,60,.25);overflow:hidden}
.dia img{width:100%;height:100%;object-fit:cover}
.dia-nr{position:absolute;right:.7rem;bottom:.6rem;font:700 .72rem/1 var(--sans);background:rgba(0,0,0,.6);color:#fff;padding:.35rem .5rem;border-radius:4px;letter-spacing:.06em}
.dia-wrap{position:relative}
.dia-wrap::after{content:"";position:absolute;left:8%;right:8%;bottom:-38px;height:30px;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);z-index:-1}
.dia-pootjes{display:flex;justify-content:space-between;padding:0 18%;margin-top:-2px}
.dia-pootjes span{width:3px;height:26px;background:linear-gradient(var(--lijn-2),transparent)}

/* tekst-dia (getekend) */
.dia-tekst{color:var(--dia-inkt);padding:7% 8%;display:flex;flex-direction:column;justify-content:center;height:100%}
.dia-tekst .dt-kop{font:700 clamp(1.3rem,2.6vw,2.2rem)/1.1 var(--display);margin-bottom:.6em}
.dia-tekst .dt-kop em{color:var(--oranje)}
.dia-tekst ul{margin:0;padding-left:1.1em;font:400 clamp(.85rem,1.4vw,1.1rem)/1.5 var(--sans);color:var(--dia-grijs)}
.dia-tekst li::marker{color:var(--oranje)}
.dia-tekst .dt-voet{position:absolute;left:8%;right:8%;bottom:6%;display:flex;justify-content:space-between;font:400 .7rem/1 var(--sans);color:#a3978c}
.dia-balk{position:absolute;left:0;top:0;bottom:0;width:2.2%;background:linear-gradient(var(--geel),var(--oranje))}

/* ---------- Notities (sprekersnotities) ---------- */
.notities{position:relative;background:var(--zaal-2);border:1px solid var(--lijn);border-radius:var(--r);padding:1.2rem 1.4rem 1.2rem 1.4rem;margin:2rem 0}
.notities::before{content:"Notities";display:block;font:700 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:.7rem}
.notities[data-kop]::before{content:attr(data-kop)}
.notities p:last-child,.notities ul:last-child{margin-bottom:0}
.notities ul{padding-left:1.1em}
.notities li::marker{color:var(--oranje)}
.notities-band{border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);background:var(--zaal-2)}
.notities-band .notities{border:0;background:none;margin:0;padding:1.3rem 0;display:grid;grid-template-columns:9rem 1fr;gap:1.5rem}
.notities-band .notities::before{margin:0;padding-top:.35rem}
@media (max-width:700px){.notities-band .notities{grid-template-columns:1fr;gap:.2rem}}

/* ---------- Diasorteerder (inhoud) ---------- */
.sorteerder{margin:2.5rem 0 1rem}
.sorteerder-kop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.8rem}
.sorteerder ol{list-style:none;margin:0;padding:.3rem .1rem 1rem;display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;counter-reset:dia}
.sorteerder li{flex:0 0 172px;scroll-snap-align:start;counter-increment:dia}
.sorteerder a{display:block;text-decoration:none;color:var(--tekst-2);font-size:.82rem;line-height:1.3}
.sorteerder .mini{display:flex;flex-direction:column;justify-content:center;aspect-ratio:16/9;background:var(--dia);border-radius:4px;padding:.6rem .7rem;margin-bottom:.45rem;box-shadow:0 0 0 1px var(--lijn);position:relative}
.sorteerder .mini b{font:700 .78rem/1.15 var(--display);color:var(--dia-inkt);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sorteerder .mini i{display:block;height:3px;width:40%;background:var(--oranje);margin-top:.45rem;border-radius:2px}
.sorteerder a::before{content:counter(dia);float:left;font:700 .75rem/1 var(--sans);color:var(--tekst-3);margin:-1.4rem 0 0 0}
.sorteerder a:hover .mini,.sorteerder a.bezig .mini{box-shadow:0 0 0 3px var(--oranje)}
.sorteerder a:hover{color:#fff}

/* ---------- Artikel ---------- */
.artikel{padding:1rem 0 3rem}
.artikel-grid{display:grid;grid-template-columns:minmax(0,var(--tekstbreed)) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem)}
.lopend>:first-child{margin-top:0}
.lopend h2{position:relative}
.lopend h2 .h-nr{display:block;font:700 .75rem/1 var(--sans);letter-spacing:.16em;color:var(--amber);text-transform:uppercase;margin-bottom:.6rem}
.lopend ul,.lopend ol{padding-left:1.3em}
.lopend li{margin-bottom:.45em}
.lopend li::marker{color:var(--oranje-t);font-weight:700}
.lopend figure{margin:2rem 0}
.lopend figcaption{font-size:.88rem;color:var(--tekst-3);margin-top:.6rem}
.lopend .foto{border-radius:var(--r);box-shadow:0 0 0 1px var(--lijn),0 30px 60px -30px #000}
.zijkant{position:relative}
.zijkant-plak{position:sticky;top:calc(var(--lint-h) + 1.5rem);display:grid;gap:1.25rem}
.zijkaart{background:var(--zaal-2);border:1px solid var(--lijn);border-radius:var(--r-l);padding:1.3rem}
.zijkaart h2,.zijkaart h3{font-size:1.15rem;margin:0 0 .8rem}
.zijkaart ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.zijkaart li a{display:flex;gap:.6rem;align-items:baseline;padding:.4rem .5rem;margin:0 -.5rem;border-radius:6px;color:var(--tekst-2);text-decoration:none;font-size:.95rem;line-height:1.35}
.zijkaart li a:hover{background:var(--zaal-3);color:#fff}
.zijkaart li a .n{font:700 .72rem/1 var(--mono);color:var(--tekst-3);min-width:1.6rem}
.zijkaart li a[aria-current="page"]{color:#fff;background:rgba(255,100,10,.12)}
.zijkaart-foto{padding:0;overflow:hidden}
.zijkaart-foto img{aspect-ratio:4/3;object-fit:cover;width:100%}
.zijkaart-foto div{padding:1rem 1.2rem}
@media (max-width:980px){.artikel-grid{grid-template-columns:1fr}.zijkant-plak{position:static}}

.drop::first-letter{float:left;font:700 4.2em/.82 var(--display);color:var(--geel);margin:.08em .12em 0 0}

/* aanvulling 2026 */
.update{border-left:4px solid var(--geel);background:linear-gradient(90deg,rgba(255,210,60,.08),transparent 70%);padding:1.1rem 1.3rem;border-radius:0 var(--r) var(--r) 0;margin:2rem 0}
.update::before{content:"Aanvulling 2026";display:block;font:700 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--geel);margin-bottom:.6rem}
.update p:last-child{margin:0}

/* licht-dia blok in de tekst */
.lichtdia{background:var(--dia);color:var(--dia-inkt);border-radius:8px;padding:clamp(1.3rem,3vw,2.2rem);margin:2rem 0;box-shadow:0 30px 60px -30px #000,0 0 80px -30px rgba(255,150,60,.25);position:relative}
.lichtdia h2,.lichtdia h3{color:var(--dia-inkt);margin-top:0}
.lichtdia h2 em,.lichtdia h3 em{color:var(--oranje)}
.lichtdia a{color:#b6400a}
.lichtdia strong{color:#000}
.lichtdia p:last-child,.lichtdia ul:last-child,.lichtdia ol:last-child{margin-bottom:0}
.lichtdia li::marker{color:var(--oranje)}
.lichtdia .klein{color:var(--dia-grijs)}

/* stappen */
.stappen{list-style:none;padding:0!important;margin:2rem 0;counter-reset:stap;display:grid;gap:1rem}
.stappen>li{counter-increment:stap;position:relative;padding:1.2rem 1.3rem 1.2rem 4.4rem;background:var(--zaal-2);border:1px solid var(--lijn);border-radius:var(--r);margin:0!important}
.stappen>li::before{content:counter(stap,decimal-leading-zero);position:absolute;left:1.1rem;top:1.05rem;font:700 1.6rem/1 var(--display);color:var(--geel)}
.stappen>li h3{margin:0 0 .4rem;font-size:1.2rem}
.stappen>li p:last-child{margin:0}

/* do & don't */
.doedont{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0}
.doedont>div{border-radius:var(--r);padding:1.2rem 1.3rem;border:1px solid var(--lijn);background:var(--zaal-2)}
.doedont h3{margin:0 0 .7rem;font-size:1.15rem;display:flex;gap:.5rem;align-items:center}
.doedont ul{list-style:none;padding:0!important;margin:0}
.doedont li{padding-left:1.6rem;position:relative;margin-bottom:.5rem}
.doedont .doe li::before{content:"✓";position:absolute;left:0;color:#5bd17a;font-weight:700}
.doedont .niet li::before{content:"✕";position:absolute;left:0;color:#ff6b5a;font-weight:700}
.doedont .doe{border-top:3px solid #5bd17a}.doedont .niet{border-top:3px solid #ff6b5a}
@media (max-width:640px){.doedont{grid-template-columns:1fr}}

/* tabellen */
.tabel-wrap{overflow-x:auto;margin:1.5rem 0 2rem;border:1px solid var(--lijn);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:.98rem}
th,td{text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--lijn);vertical-align:top}
th{font:700 .78rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--amber);background:var(--zaal-2)}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(255,255,255,.02)}
kbd{display:inline-block;font:700 .82rem/1 var(--mono);padding:.32rem .48rem;border-radius:5px;background:var(--zaal-4);border:1px solid var(--lijn-2);border-bottom-width:3px;color:#fff;white-space:nowrap}

/* kaarten (dia-kaarten) */
.kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.4rem}
.kaart{display:flex;flex-direction:column;text-decoration:none;color:var(--tekst);border-radius:var(--r-l);background:var(--zaal-2);border:1px solid var(--lijn);overflow:hidden;transition:transform .2s,border-color .2s}
.kaart:hover{transform:translateY(-4px);border-color:var(--oranje);color:#fff}
.kaart-beeld{aspect-ratio:16/9;background:var(--dia);position:relative;overflow:hidden}
.kaart-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kaart:hover .kaart-beeld img{transform:scale(1.04)}
.kaart-beeld .dia-tekst{padding:14% 9% 7%}
.kaart-beeld .dia-tekst .dt-kop{font-size:1.15rem}
.kaart-beeld .dia-tekst ul{font-size:.8rem}
.kaart-tekst{padding:1rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.kaart-tekst .label{font-size:.68rem}
.kaart-tekst h3{font-size:1.2rem;margin:0}
.kaart-tekst p{font-size:.95rem;color:var(--tekst-2);margin:0}
.kaart-nr{position:absolute;left:.6rem;top:.6rem;font:700 .7rem/1 var(--sans);background:var(--oranje);color:#fff;padding:.3rem .45rem;border-radius:4px;z-index:1}

/* secties */
.sectie{padding:clamp(3rem,7vw,6rem) 0}
.sectie-kop{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2.2rem;flex-wrap:wrap}
.sectie-kop h2{margin:0;max-width:22ch}
.sectie-kop p{max-width:30rem;color:var(--tekst-2);margin:0}
.sectie-licht{background:var(--dia);color:var(--dia-inkt)}
.sectie-licht h2,.sectie-licht h3{color:var(--dia-inkt)}
.sectie-licht h2 em{color:var(--oranje)}
.sectie-licht .label{color:#b6400a}
.sectie-licht p{color:#4a423c}
.sectie-licht a{color:#b6400a}
.sectie-band{background:var(--zaal-2);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}

/* patroonstrook (oude headerafbeelding) */
.patroon{height:110px;background:url(powerpoint-header.jpg) center/cover;filter:saturate(.9) brightness(.55) contrast(1.05);position:relative}
.patroon::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--zaal),transparent 30%,transparent 70%,var(--zaal))}

/* 5x5 visual */
.vijf{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:260px}
.vijf span{height:10px;border-radius:3px;background:var(--oranje)}
.vijf span:nth-child(5n){width:70%}
.vijf span:nth-child(n+6){background:#d9cfc4}

/* cijferband */
.cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--r-l);overflow:hidden}
.cijfers>div{background:var(--zaal-2);padding:1.6rem 1.4rem}
.cijfers b{display:block;font:700 clamp(2.2rem,4vw,3.2rem)/1 var(--display);color:var(--geel)}
.cijfers span{display:block;margin-top:.5rem;color:var(--tekst-2);font-size:.98rem;line-height:1.4}
@media (max-width:820px){.cijfers{grid-template-columns:1fr 1fr}}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}.podium-grid{grid-template-columns:1fr}}

/* reacties (opmerkingen) */
.opmerkingen{display:grid;gap:1rem;margin:1.5rem 0 2rem}
.opmerking{display:grid;grid-template-columns:44px 1fr;gap:.9rem;background:var(--zaal-2);border:1px solid var(--lijn);border-radius:var(--r);padding:1.1rem 1.2rem}
.opmerking .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 1.1rem/1 var(--display);background:var(--zaal-4);color:var(--geel)}
.opmerking .wie{font-weight:700;color:#fff}
.opmerking .wanneer{font-size:.82rem;color:var(--tekst-3);margin-left:.5rem}
.opmerking p{margin:.35rem 0 0}
.opmerking .antwoord{margin-top:.8rem;padding:.8rem 1rem;border-left:3px solid var(--oranje);background:rgba(255,100,10,.07);border-radius:0 8px 8px 0;font-size:.98rem}
.opmerking .antwoord b{color:var(--oranje-t)}

/* FAQ */
.faq{display:grid;gap:.7rem;margin:1.5rem 0 2rem}
.faq details{background:var(--zaal-2);border:1px solid var(--lijn);border-radius:var(--r)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 3rem 1rem 1.2rem;font:700 1.08rem/1.35 var(--sans);position:relative;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);font:700 1.4rem/1 var(--sans);color:var(--oranje-t)}
.faq details[open] summary::after{content:"–"}
.faq details[open]{border-color:var(--lijn-2)}
.faq .antw{padding:0 1.2rem 1.1rem;color:var(--tekst-2)}
.faq .antw p:last-child{margin:0}

/* video facade */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;margin:1.5rem 0}
.video{margin:0}
.video-knop{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:var(--r);overflow:hidden;cursor:pointer;background:#000}
.video-knop img{width:100%;height:100%;object-fit:cover;opacity:.75;transition:opacity .2s,transform .4s}
.video-knop:hover img{opacity:.95;transform:scale(1.03)}
.video-knop .play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--oranje);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.video-knop .play::after{content:"";border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);display:block}
.video figcaption{font-size:.95rem;color:var(--tekst-2);margin-top:.6rem}
.video figcaption b{color:#fff;display:block}

/* galerij */
.galerij{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem;margin:1.5rem 0}
.galerij figure{margin:0}
.galerij a{display:block;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--lijn)}
.galerij img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .4s}
.galerij a:hover img{transform:scale(1.04)}
.galerij figcaption{font-size:.88rem;color:var(--tekst-3);margin-top:.5rem}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:2rem}
.lightbox[hidden]{display:none}
.lightbox img{max-height:82vh;width:auto;border-radius:6px}
.lightbox p{color:var(--tekst-2);text-align:center;margin:.8rem 0 0}
.lightbox button{position:absolute;top:1rem;right:1rem}

/* tools */
.tool{background:var(--zaal-2);border:1px solid var(--lijn);border-radius:var(--r-l);padding:clamp(1.2rem,3vw,2rem);margin:1.5rem 0 2.5rem}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem)}
@media (max-width:860px){.tool-grid{grid-template-columns:1fr}}
.veld{display:grid;gap:.4rem;margin-bottom:1.1rem}
.veld label,.veld .veldnaam{font-weight:700;font-size:.95rem;color:#fff}
.veld small{color:var(--tekst-3);font-size:.85rem}
input[type=number],input[type=text],input[type=email],select,textarea{width:100%;font:400 1rem/1.4 var(--sans);color:var(--tekst);background:var(--zaal);border:1px solid var(--lijn-2);border-radius:8px;padding:.75rem .85rem}
textarea{min-height:200px;resize:vertical;font-family:var(--sans)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--oranje);outline-offset:1px;border-color:transparent}
input[type=range]{width:100%;accent-color:var(--oranje)}
.keuzes{display:flex;flex-wrap:wrap;gap:.4rem}
.keuzes label{cursor:pointer}
.keuzes input{position:absolute;opacity:0}
.keuzes span{display:inline-block;padding:.5rem .8rem;border-radius:999px;border:1px solid var(--lijn-2);font-size:.9rem;font-weight:700;color:var(--tekst-2)}
.keuzes input:checked+span{background:var(--oranje);border-color:var(--oranje);color:#fff}
.keuzes input:focus-visible+span{outline:3px solid var(--geel);outline-offset:2px}
.uitkomst{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--lijn);border-radius:var(--r);overflow:hidden;border:1px solid var(--lijn)}
.uitkomst>div{background:var(--zaal);padding:1rem 1.1rem}
.uitkomst b{display:block;font:700 2rem/1 var(--display);color:var(--geel)}
.uitkomst span{font-size:.88rem;color:var(--tekst-2)}
.uitkomst .breed{grid-column:1/-1}
.tijdlijn-balk{display:flex;height:42px;border-radius:8px;overflow:hidden;margin:1.2rem 0 .5rem}
.tijdlijn-balk div{display:grid;place-items:center;font:700 .78rem/1 var(--sans);color:#1b1306;min-width:0;overflow:hidden;white-space:nowrap}
.tijdlijn-legenda{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.85rem;color:var(--tekst-2)}
.tijdlijn-legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:.35rem}
.meter{height:10px;background:var(--zaal-4);border-radius:5px;overflow:hidden;margin:.3rem 0 .2rem}
.meter i{display:block;height:100%;background:#5bd17a;width:0;transition:width .3s}
.meter i.mid{background:var(--geel)}.meter i.slecht{background:#ff6b5a}
.check-lijst{list-style:none;padding:0!important;margin:1rem 0 0;display:grid;gap:.5rem}
.check-lijst li{padding:.6rem .8rem .6rem 2.2rem;border-radius:8px;background:var(--zaal);position:relative;font-size:.95rem}
.check-lijst li::before{position:absolute;left:.8rem;top:.6rem;font-weight:700}
.check-lijst li.ok::before{content:"✓";color:#5bd17a}
.check-lijst li.let::before{content:"!";color:var(--geel)}
.check-lijst li.fout::before{content:"✕";color:#ff6b5a}
.timer-scherm{background:#000;border-radius:var(--r-l);padding:clamp(1.5rem,4vw,3rem);text-align:center;border:1px solid var(--lijn);position:relative}
.timer-scherm:fullscreen{display:flex;flex-direction:column;justify-content:center;border-radius:0}
.timer-tijd{font:700 clamp(4rem,16vw,11rem)/1 var(--mono);letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.timer-scherm.waarschuw .timer-tijd{color:var(--geel)}
.timer-scherm.op .timer-tijd{color:#ff6b5a;animation:knipper 1s steps(2) infinite}
@keyframes knipper{50%{opacity:.35}}
.timer-sub{color:var(--tekst-2);margin:.6rem 0 1.4rem;font-size:1.1rem}
.timer-voortgang{height:6px;background:var(--zaal-4);border-radius:3px;overflow:hidden;margin:0 auto 1.6rem;max-width:640px}
.timer-voortgang i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--geel),var(--oranje))}
.timer-knoppen{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}

/* contactformulier */
.formulier{display:grid;gap:1rem;max-width:40rem}
.formulier .knop{justify-self:start}
.formulier-noot{font-size:.9rem;color:var(--tekst-3)}

/* volgende dia */
.volgende{border-top:1px solid var(--lijn);padding:2rem 0 3rem}
.volgende-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.volgende a{display:flex;flex-direction:column;gap:.3rem;padding:1.2rem 1.4rem;border-radius:var(--r);border:1px solid var(--lijn);background:var(--zaal-2);text-decoration:none;color:var(--tekst)}
.volgende a:hover{border-color:var(--oranje);color:#fff}
.volgende a.vol{text-align:right}
.volgende small{color:var(--tekst-3);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.volgende b{font:700 1.2rem/1.25 var(--display)}
@media (max-width:640px){.volgende-grid{grid-template-columns:1fr}.volgende a.vol{text-align:left}}

/* ---------- Footer: Einde van de diavoorstelling ---------- */
.einde{background:#000;color:var(--tekst-2);padding:clamp(3.5rem,8vw,7rem) 0 2.5rem;margin-top:2rem;position:relative;overflow:hidden}
.einde-slot{text-align:center;padding-bottom:clamp(3rem,7vw,5.5rem);border-bottom:1px solid #221e1c;margin-bottom:3rem}
.einde-slot p.groot{font:700 clamp(2rem,6.2vw,5.2rem)/1.05 var(--display);color:#fff;margin:0 0 1.2rem;letter-spacing:-.02em}
.einde-slot p.groot em{color:var(--oranje-t)}
.einde-slot a.sluit{color:var(--tekst-3);text-decoration:none;font-size:1rem}
.einde-slot a.sluit:hover{color:var(--geel)}
.einde-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:2rem}
.einde h2{font:700 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin:0 0 1rem}
.einde ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.einde a{color:var(--tekst-2);text-decoration:none;font-size:.97rem}
.einde a:hover{color:#fff}
.einde-merk p{font-size:.97rem;max-width:22rem}
.einde-merk .merk{margin-bottom:1rem}
.einde-onder{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid #221e1c;font-size:.85rem;color:var(--tekst-3)}
.einde-onder a{font-size:.85rem;color:var(--tekst-3)}
@media (max-width:980px){.einde-grid{grid-template-columns:1fr 1fr}.einde-merk{grid-column:1/-1}}

/* 404 */
.zwart-scherm{min-height:60vh;display:grid;place-items:center;text-align:center;padding:4rem 1rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.lint,.statusbalk,.einde,.sorteerder,.volgende,.zijkant{display:none!important}body{background:#fff;color:#000;padding:0}a{color:#000}.notities,.update,.stappen>li{background:none;border-color:#999}h1,h2,h3,strong{color:#000}}
.statusbalk svg{width:16px;height:16px}
.statusbalk a[data-dia]{border:1px solid var(--lijn-2);padding:.25rem .5rem}
.mobiel-menu{background:#0b0a09}
.mobiel-menu .merk{display:flex;background:none;border:0;padding:0;font-size:1.2rem}

/* ---------- AI-gids ---------- */
.ai-reel{list-style:none;padding:0!important;margin:2rem 0 3rem;display:grid;gap:clamp(2.5rem,5vw,4rem);counter-reset:none}
.ai-stap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2rem);align-items:center;margin:0!important}
.ai-stap-om>.dia-wrap{order:2}
.ai-stap h3{margin:.2rem 0 .6rem;font-size:1.35rem}
.ai-stap p{font-size:1rem}
.ai-stap .dia{transform:rotate(-1.2deg);transition:transform .4s}
.ai-stap-om .dia{transform:rotate(1.2deg)}
.ai-stap:hover .dia{transform:none}
.ai-nr{display:block;font:700 3.2rem/1 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--geel)}
@media (max-width:700px){.ai-stap{grid-template-columns:1fr}.ai-stap-om>.dia-wrap{order:0}}
.voorna{display:grid;grid-template-columns:1fr 1fr;gap:4%;height:100%;padding:5%;background:#ece5da}
.voorna>div{background:var(--dia);border-radius:3px;padding:8% 8% 18%;display:flex;flex-direction:column;gap:5px;box-shadow:0 2px 8px rgba(0,0,0,.15);position:relative;overflow:hidden}
.voorna span{font:700 .55rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#a3978c;margin-bottom:4px}
.voorna b{font:700 clamp(.6rem,1vw,.8rem)/1.15 var(--display);color:var(--dia-inkt)}
.voorna em{font:700 italic clamp(.62rem,.95vw,.85rem)/1.15 var(--display);color:var(--oranje);margin:4px 0}
.voorna i{display:block;height:4px;background:#cfc5b9;border-radius:2px}
.voorna i:nth-child(odd){width:88%}
.voorna i.kort{width:55%;background:#e0a27a}
.voorna>div:first-child::after{content:"✕";position:absolute;right:6px;top:4px;color:#ff6b5a;font:700 .8rem/1 var(--sans)}
.voorna>div:last-child::after{content:"✓";position:absolute;right:6px;top:4px;color:#2e9c4f;font:700 .8rem/1 var(--sans)}
.lopend .tool .tool-grid{grid-template-columns:1fr}
.ai-band{background:radial-gradient(800px 400px at 20% 50%,rgba(255,120,30,.14),transparent 70%)}