/* Bakens voor Succes · kaarten, video, boek, formulierkaart, over Ad, footer */

/* baken-kaarten in eigen scrollvak (brandbook stap 4) */
.ov-wrap{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:radial-gradient(60% 40% at 50% 0,rgba(184,37,36,.14),transparent 70%),#03121F}
.ov-wrap:before,.ov-wrap:after{content:"";position:absolute;left:0;right:12px;height:36px;pointer-events:none;z-index:2}
.ov-wrap:before{top:0;background:linear-gradient(#03121F,transparent)}
.ov-wrap:after{bottom:0;background:linear-gradient(transparent,#03121F)}
.overview{height:640px;overflow-y:auto;overscroll-behavior-y:contain;padding:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;perspective:1400px;scrollbar-width:thin;scrollbar-color:rgba(244,241,236,.25) transparent}
.ov-cap{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:13px;margin-top:14px}
.ov-hint{margin-left:auto}
.ov-nav{display:flex;gap:8px}
.ov-nav button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(244,241,236,.25);background:transparent;color:var(--papier);display:grid;place-items:center;cursor:pointer;transition:background .2s,opacity .3s}
.ov-nav button:hover{background:var(--rood);border-color:var(--rood)}
.ov-nav button:disabled{opacity:.3;cursor:default;background:transparent;border-color:rgba(244,241,236,.25)}
@media (max-width:1000px){.overview{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .overview{height:min(76svh,600px);grid-template-columns:minmax(0,1fr);grid-auto-rows:100%;gap:0;padding:0;scroll-snap-type:y mandatory}
  /* kaart past altijd in het vak: breedte is het kleinste van vakbreedte en (vakhoogte x 3/4) */
  .overview .flip,.overview .flip.in{height:auto;width:min(calc(100% - 40px),calc((min(76svh,600px) - 40px) * .75));aspect-ratio:3/4;align-self:center;margin:0 auto;scroll-snap-align:center;scroll-snap-stop:always;opacity:1;transform:none}
  .ov-hint{display:none}
  .ov-nav{margin-left:auto}
}

.flip{all:unset;display:block;cursor:pointer;aspect-ratio:3/4;position:relative;opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.33,1,.68,1) var(--d),transform .8s cubic-bezier(.33,1,.68,1) var(--d)}
.flip.in{opacity:1;transform:none}
@media (hover:hover){.flip.in:hover{transform:translateY(-6px) scale(1.02);transition-delay:0s}}
.flip-hit{all:unset;position:absolute;inset:0;z-index:1;border-radius:14px;cursor:pointer}
.flip-hit:focus-visible{outline:2px solid #fff;outline-offset:4px}
.flip.open .flip-hit{pointer-events:none}
.inner{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;display:flex;flex-direction:column;padding:24px}
.front{background:radial-gradient(120% 75% at 50% 0,rgba(184,37,36,.32),rgba(184,37,36,.08) 45%,transparent 75%),radial-gradient(80% 40% at 100% 100%,rgba(184,37,36,.10),transparent 70%),var(--nacht);border:1px solid var(--line);color:var(--papier)}
.front .label{font-size:13px}
.front h3{margin-top:14px;flex:1;letter-spacing:-.01em;line-height:1.05;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.front .num{position:absolute;left:24px;top:52px;font:700 110px/1 Outfit;letter-spacing:-.05em;color:rgba(244,241,236,.92);transition:color .5s;pointer-events:none}
.front .foot{display:flex;justify-content:space-between;align-items:flex-end}
.front .foot svg{height:26px;width:auto}
.front .hint{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 "Plus Jakarta Sans";color:rgba(244,241,236,.55);opacity:0;transition:opacity .4s}
.front .tap{position:absolute;left:24px;bottom:24px;font:500 11px/1 "Plus Jakarta Sans";color:rgba(244,241,236,.55);display:none}
.flip:hover h3,.flip:focus-within h3,.flip.reveal h3,.flip:hover .hint,.flip:focus-within .hint,.flip.reveal .hint{opacity:1;transform:none}
.flip:hover .num,.flip:focus-within .num,.flip.reveal .num{color:rgba(244,241,236,.07)}
@media (hover:none){.flip:not(.reveal) .tap{display:block}.flip:not(.reveal) .foot svg{opacity:0}}
.back{transform:rotateY(180deg);background:var(--papier);color:var(--nacht)}
.back .label{color:var(--rood);margin-bottom:12px}
.back h4{font:700 21px/1.15 Outfit;margin-bottom:12px}
.back p{font-size:15px;line-height:1.6;color:#3A4A5A;flex:1;overflow:hidden}
.back .bf{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#5A6878;margin-top:14px}
.back .vid{position:relative;z-index:2;background:var(--rood);color:#fff;font:600 14px/1 "Plus Jakarta Sans";padding:15px 18px;border-radius:8px;text-decoration:none}
@media (prefers-reduced-motion:reduce){.flip{opacity:1;transform:none;transition:none}}

/* video */
.videos{display:grid;grid-template-columns:1.7fr 1fr;gap:18px}
.vbig,.vshort{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);cursor:pointer;background:radial-gradient(70% 90% at 20% 0,rgba(184,37,36,.36),transparent 65%),#061E33;text-align:left;color:var(--papier);font:inherit;padding:0}
.vbig{aspect-ratio:16/10}
.vshorts{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vshort{aspect-ratio:9/16}
.vmeta{position:absolute;left:24px;top:22px;right:24px}
.vmeta h3{font-size:clamp(20px,2.4vw,32px);margin-top:10px}
.vshort .vmeta h3{font-size:18px}
@media (max-width:640px){.vmeta{top:18px;left:18px;right:18px}.vmeta h3{font-size:20px}.vshort .vmeta h3{font-size:15px}.play{top:auto;bottom:20px;left:auto;right:20px;margin:0}.vshort .play{bottom:14px;right:14px;margin:0}}
.play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--rood);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(184,37,36,.18);transition:transform .3s}
.vshort .play{width:48px;height:48px;margin:-24px 0 0 -24px}
.vbig:hover .play,.vshort:hover .play{transform:scale(1.08)}
@media (max-width:900px){.videos{grid-template-columns:1fr}}

/* speler */
dialog#player{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:min(960px,calc(100% - 32px));margin:auto;color:var(--papier)}
dialog#player::backdrop{background:rgba(2,14,26,.8);backdrop-filter:blur(8px)}
dialog#player[open]{animation:plIn .5s cubic-bezier(.33,1,.68,1)}
@keyframes plIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.pl{position:relative;border-radius:18px;overflow:hidden;background:var(--nacht);border:1px solid var(--line)}
.pl-x{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:rgba(4,25,45,.7);color:#fff;font-size:20px;cursor:pointer}
.pl-screen{position:relative;aspect-ratio:16/9;background:radial-gradient(70% 90% at 20% 0,rgba(184,37,36,.40),transparent 65%),#061E33;display:grid;place-items:center}
.pl-screen .vmeta{max-width:60%}
.pl-ph{position:absolute;right:24px;bottom:18px;font-size:12px;color:rgba(244,241,236,.55)}
.pl-screen video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain}
.pl-info{padding:22px 26px 24px;background:var(--papier);color:var(--nacht)}
.pl-info h3{color:var(--nacht);font-size:22px;margin:8px 0 6px}
.pl-info p{font-size:14px;color:#3A4A5A}
@media (max-width:640px){dialog#player{width:100%;height:100%;max-height:100svh}.pl{height:100%;border-radius:0;display:flex;flex-direction:column}.pl-screen{aspect-ratio:auto;flex:1}}

/* boek */
.boek{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.boek img{border-radius:6px;box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 0 1px var(--line);max-width:360px;margin:0 auto;transform:rotate(-2deg)}
.boek h2{font-size:clamp(34px,4.4vw,54px);margin:14px 0 18px}
.boek .lead{margin-bottom:24px}
.facts{display:flex;gap:28px;flex-wrap:wrap;margin:26px 0 30px;color:var(--muted);font-size:14px}
.facts b{display:block;color:var(--papier);font:700 20px/1.2 Outfit}
.shops{display:flex;flex-wrap:wrap;gap:12px}
.boek>*{min-width:0}
@media (max-width:900px){.boek{grid-template-columns:minmax(0,1fr);gap:40px}.boek img{max-width:min(300px,78%)}}

/* formulierkaart (studenten, sessies) */
.formkaart{border-radius:24px;padding:56px;background:var(--papier);color:var(--nacht);display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.formkaart:after{content:"";position:absolute;right:-80px;top:-80px;width:360px;height:360px;border-radius:50%;background:radial-gradient(rgba(184,37,36,.22),transparent 70%)}
.formkaart .label{color:var(--rood)}
.formkaart h2{color:var(--nacht);font-size:clamp(30px,3.6vw,46px);margin:14px 0 14px}
.formkaart p{color:#3A4A5A;max-width:520px}
.formkaart ul{list-style:none;padding:0;display:grid;gap:12px;position:relative;z-index:1}
.formkaart li{padding-left:22px;position:relative}
.formkaart li:before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--rood)}
.formkaart .btn{margin-top:24px;background:var(--nacht);color:#fff}
@media (max-width:900px){.formkaart{grid-template-columns:1fr;padding:32px 24px}}

/* over Ad */
.over{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.over-img{position:relative;border-radius:24px;overflow:hidden;background:radial-gradient(70% 60% at 50% 20%,rgba(184,37,36,.35),transparent 70%),var(--nacht);border:1px solid var(--line);aspect-ratio:4/5}
.over-img img{position:absolute;left:50%;bottom:0;height:96%;width:auto;transform:translateX(-50%)}
.over h2{font-size:clamp(34px,4.4vw,54px);margin:14px 0 20px}
.over p{color:rgba(244,241,236,.8);margin-bottom:14px}
.tijdlijn{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:30px}
.tijdlijn div{border-top:2px solid var(--line);padding-top:12px}
.tijdlijn b{display:block;font:700 18px/1.2 Outfit;color:var(--papier)}
.tijdlijn span{font-size:13px;color:var(--muted)}
@media (max-width:900px){.over{grid-template-columns:1fr;gap:36px}}

/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 40px;margin-top:40px;background:radial-gradient(50% 80% at 0 100%,rgba(184,37,36,.12),transparent 70%)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
footer h4{font:600 12px/1 "Plus Jakarta Sans";letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
footer ul{list-style:none;padding:0;display:grid;gap:8px;font-size:14px}
footer a{text-decoration:none;color:rgba(244,241,236,.8)}
footer a:hover{color:#fff}
.foot-small{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}
.draft{position:fixed;left:12px;bottom:12px;z-index:60;font:600 11px/1 "Plus Jakarta Sans";letter-spacing:.1em;text-transform:uppercase;padding:8px 10px;border-radius:6px;background:rgba(184,37,36,.9);color:#fff}

/* lichte secties voor afwisseling: papier met heel subtiele gloed, korrel en afwisselende tint */
.licht{position:relative;isolation:isolate;color:var(--nacht);background:#fff}
.licht-a{background:radial-gradient(55% 70% at 100% 0,rgba(184,37,36,.06),transparent 70%),#FFFFFF}
.licht-b{background:radial-gradient(55% 70% at 0 100%,rgba(184,37,36,.06),transparent 70%),#F5F7F9}
.licht:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .02 0 0 0 0 .1 0 0 0 0 .18 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.licht-merk:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.045;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='18.75 8 32.5 50'%3E%3Cpath d='M18.75 58 L20.75 25 H31.25 L33.25 58 Z' fill='%2304192D'/%3E%3Crect x='19.75' y='10' width='12.5' height='11' rx='1.5' fill='%2304192D'/%3E%3Cpath d='M32.25 15.5 L51.25 8 V23 Z' fill='%2304192D'/%3E%3C/svg%3E") right -60px bottom -40px/420px 640px no-repeat}
.licht .blok-kop h2,.licht .boek h2,.licht .over h2{color:var(--nacht)}
.licht .blok-kop p{color:#5A6878}
.licht .boek .lead,.licht .over p{color:#3A4A5A}
.licht .label{color:var(--rood)}
.licht .front .label,.licht .vmeta .label{color:#F26B67}
.licht .btn-rand{border-color:rgba(4,25,45,.25);color:var(--nacht)}
.licht .btn-rand:hover{border-color:var(--nacht)}
.licht .facts{color:#6B7785}.licht .facts b{color:var(--nacht)}
.licht .ov-wrap,.licht .vbig,.licht .vshort{border-color:transparent;box-shadow:0 30px 60px rgba(4,25,45,.18)}
.licht .ov-cap{color:#6B7785}
.licht .ov-nav button{border-color:rgba(4,25,45,.25);color:var(--nacht)}
.licht .ov-nav button:hover{background:var(--rood);border-color:var(--rood);color:#fff}
.licht .ov-nav button:disabled{background:transparent;border-color:rgba(4,25,45,.25);color:var(--nacht)}
.licht .soon{color:var(--rood);border-color:rgba(184,37,36,.4)}
.licht .boek img{box-shadow:0 40px 80px rgba(4,25,45,.28)}
.licht .tijdlijn div{border-color:rgba(4,25,45,.15)}
.licht .tijdlijn b{color:var(--nacht)}.licht .tijdlijn span{color:#6B7785}
/* formulierkaart: donkere kaart op licht */
.licht .formkaart{background:radial-gradient(60% 90% at 100% 0,rgba(184,37,36,.32),transparent 65%),var(--nacht);color:var(--papier);box-shadow:0 30px 60px rgba(4,25,45,.22)}
.licht .formkaart:after{display:none}
.licht .formkaart h2{color:var(--papier)}
.licht .formkaart p{color:rgba(244,241,236,.78)}
.licht .formkaart .label{color:#F26B67}
.licht .formkaart .btn{background:transparent;border:1px solid rgba(244,241,236,.35);color:var(--papier)}

/* Ask Ad: knop rechtsonder, klapt uit */
.askad{position:fixed;right:24px;bottom:24px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.ask-btn{position:relative;display:flex;align-items:center;gap:12px;padding:7px 22px 7px 7px;border-radius:99px;border:0;background:var(--rood);color:#fff;cursor:pointer;
  box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.12) inset;transition:transform .25s cubic-bezier(.33,1,.68,1)}
.ask-btn:before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(184,37,36,.55);animation:puls 2.6s cubic-bezier(.33,1,.68,1) infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(184,37,36,.55)}70%,100%{box-shadow:0 0 0 18px rgba(184,37,36,0)}}
.ask-btn:hover{transform:translateY(-3px) scale(1.02)}
.ask-av{position:relative;flex:none}
.ask-av img{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:50% 10%;background:var(--nacht);border:2px solid rgba(255,255,255,.85)}
.ask-dot{position:absolute;right:1px;bottom:3px;width:13px;height:13px;border-radius:50%;background:#3DDC84;border:2px solid var(--rood)}
.ask-txt{display:flex;flex-direction:column;align-items:flex-start;font:700 18px/1.1 Outfit;letter-spacing:-.01em}
.ask-txt small{font:600 10px/1 "Plus Jakarta Sans";letter-spacing:.18em;text-transform:uppercase;opacity:.8;margin-bottom:4px}
.askad.open .ask-txt{display:none}
.askad.open .ask-btn{padding:7px}
.askad.open .ask-btn:before{animation:none}
.ask-bubble{position:relative;max-width:260px;padding:14px 38px 14px 16px;border-radius:16px 16px 4px 16px;background:#fff;color:var(--nacht);font-size:14px;line-height:1.45;box-shadow:0 16px 40px rgba(0,0,0,.3);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .4s,transform .4s cubic-bezier(.33,1,.68,1)}
.ask-bubble b{display:block;font:700 15px/1.2 Outfit;margin-bottom:2px}
.ask-bubble.show{opacity:1;transform:none;pointer-events:auto}
.askad.open .ask-bubble{display:none}
.ask-bx{position:absolute;top:8px;right:8px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(4,25,45,.08);color:var(--nacht);cursor:pointer;font-size:14px;line-height:1}
.ask-panel{width:min(400px,calc(100vw - 40px));transform-origin:bottom right;transform:translateY(12px) scale(.96);opacity:0;pointer-events:none;transition:opacity .3s,transform .35s cubic-bezier(.33,1,.68,1)}
.askad.open .ask-panel{opacity:1;transform:none;pointer-events:auto}
.askad:not(.open) .ask-panel{position:absolute;bottom:0;right:0;visibility:hidden}
.ask-panel .chat{box-shadow:0 30px 70px rgba(0,0,0,.5)}
.ask-panel .chat-body{min-height:0;max-height:min(46svh,360px);overflow-y:auto}
.ask-x{width:32px;height:32px;border-radius:50%;border:0;background:rgba(244,241,236,.08);color:var(--papier);font-size:18px;cursor:pointer;margin-left:8px}
@media (prefers-reduced-motion:reduce){.ask-panel,.ask-btn,.ask-bubble{transition:none}.ask-btn:before{animation:none}}
@media (max-width:640px){.askad{right:14px;bottom:14px}.ask-av img{width:46px;height:46px}.ask-txt{font-size:16px}.ask-bubble{max-width:220px}}

/* bakenlijst en FAQ: echte tekst voor lezers en zoekmachines (gegenereerd door build.py) */
.alle-bakens{margin-top:28px;border-top:1px solid rgba(4,25,45,.12)}
.alle-bakens summary,.faq-lijst summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;font:600 16px/1.4 "Plus Jakarta Sans";color:var(--nacht);padding:18px 0}
.alle-bakens summary::-webkit-details-marker,.faq-lijst summary::-webkit-details-marker{display:none}
.alle-bakens summary:after,.faq-lijst summary:after{content:"+";font:400 24px/1 Outfit;color:var(--rood);transition:transform .25s}
.alle-bakens[open]>summary:after,.faq-lijst details[open]>summary:after{transform:rotate(45deg)}
.baken-lijst{list-style:none;padding:0;margin:0 0 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 40px}
.baken-lijst li{padding:14px 0;border-top:1px solid rgba(4,25,45,.08)}
.baken-lijst h3{font:700 17px/1.3 Outfit;letter-spacing:-.01em;color:var(--nacht);margin:0 0 6px}
.baken-lijst h3 span{display:block;font:700 11px/1 "Plus Jakarta Sans";letter-spacing:.16em;text-transform:uppercase;color:var(--rood);margin-bottom:6px}
.baken-lijst p{font-size:14px;line-height:1.55;color:#5A6878}
.faq{max-width:860px}
.faq-lijst details{border-top:1px solid rgba(4,25,45,.12)}
.faq-lijst details:last-child{border-bottom:1px solid rgba(4,25,45,.12)}
.faq-lijst summary{font:700 19px/1.35 Outfit;padding:22px 0}
.faq-lijst p{color:#3A4A5A;padding:0 0 22px;max-width:720px}
@media (max-width:760px){.baken-lijst{grid-template-columns:1fr}}
html.live [data-live=weg]{display:none!important}

/* longforms (YouTube) */
.lf{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lf-kaart{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--line);padding:0;background:#061E33;cursor:pointer;font:inherit}
.lf-kaart img,.lf-kaart iframe{display:block;width:100%;height:100%;object-fit:cover;border:0}
.lf-kaart:hover .play{transform:scale(1.08)}
.lf-soon{cursor:default}.lf-soon img{opacity:.55}.lf-soon .play{display:none}
.lf-soon .soon{position:absolute;left:18px;bottom:16px;background:rgba(2,14,26,.85)}
.lf-yt{margin-top:22px}.lf-yt a{color:inherit;font-weight:600}
@media (max-width:900px){.lf{grid-template-columns:1fr}}