/* ================================================================
   Inter, lokaal gehost. Geen verzoek naar Google Fonts, dus geen
   IP-adressen van bezoekers naar derden. Relevant bij dit onderwerp.
   ================================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:750;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:850;font-display:swap;src:url('fonts/inter-900.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-900.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/inter-900.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:950;font-display:swap;src:url('fonts/inter-900.woff2') format('woff2')}

/* ================================================================
   Oxycodon.online - aanvullende laag bovenop de Zorgfuik-huisstijl
   Gebruikt uitsluitend bestaande Zorgfuik-tokens:
   --deep --deep2 --green --green2 --light --cream --paper
   --ink --muted --line --shadow --red --amber --radius --font
   ================================================================ */

/* ---- Sitebrede accenten ---- */
body.oxy{background:linear-gradient(180deg,#fbfaf5 0%,var(--cream) 100%)}
body.oxy .brand-mark{background:linear-gradient(135deg,var(--deep),var(--green));font-size:19px}
body.oxy .brand small{display:block;font-size:12px;font-weight:850;color:var(--green);letter-spacing:.01em;margin-top:1px}
body.oxy .brand{flex-direction:row;align-items:center}
body.oxy .brand-tekst{display:flex;flex-direction:column;line-height:1.1}
body.oxy .brand-tekst b{font-size:18px;font-weight:950;letter-spacing:-.02em}
@media(max-width:560px){body.oxy .brand small{display:none}}

/* ---- Acute strook: bovenaan risicopagina's ---- */
.acuutbalk{background:var(--red);color:#fff}
.acuutbalk .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:14px 0}
.acuutbalk p{margin:0;color:#fff;font-weight:900;font-size:17px}
.acuutbalk .btn{margin-left:auto;background:#fff;color:#8a201a;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.acuutbalk .btn:hover{background:#ffece9}
@media(max-width:700px){.acuutbalk .btn{margin-left:0;width:100%}.acuutbalk p{font-size:16px}}

/* ---- Kruimelpad ---- */
.kruimel{padding:16px 0 0;font-size:15px;font-weight:850;color:var(--muted)}
.kruimel a{color:var(--green);text-decoration:none}
.kruimel a:hover{text-decoration:underline}
.kruimel i{font-style:normal;opacity:.45;margin:0 8px}

/* ---- Compacte paginakop (subpagina's) ---- */
.hero.pagina{padding:66px 0 74px}
.hero.pagina .wrap{display:block}
.hero.pagina h1{max-width:20ch;font-size:clamp(38px,5.2vw,68px);margin:20px 0 18px}
.hero.pagina .lead{max-width:760px;margin:0}
.hero.pagina .buttons{margin-top:26px}
.hero.alarm{background:radial-gradient(circle at 82% 18%,rgba(214,90,74,.42),transparent 38%),linear-gradient(135deg,#3d120d 0%,#6b1f17 52%,#a32c22 100%)}
.hero.alarm:after{background:var(--cream)}
.hero.alarm .eyebrow{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.16)}

/* ---- Antwoordblok: het directe antwoord, direct onder de hero ---- */
.antwoord{background:linear-gradient(135deg,var(--paper) 0%,#eefaf4 100%);border:1px solid var(--line);border-left:9px solid var(--green);border-radius:var(--radius);padding:clamp(26px,3.4vw,40px);box-shadow:var(--shadow);position:relative;z-index:3;margin-top:-34px}
.antwoord .kicker{margin-bottom:14px}
.antwoord p{font-size:clamp(19px,1.9vw,23px);color:var(--deep);font-weight:800;line-height:1.4}
.antwoord p:last-child{margin-bottom:0}
.antwoord p strong{font-weight:950}
.antwoord a{color:var(--green);font-weight:900}
.antwoord.rood{border-left-color:var(--red);background:linear-gradient(135deg,#fffdfb 0%,#fff4ef 100%)}
.antwoord.rood .kicker{background:rgba(181,50,41,.12);color:#8a201a}
@media(max-width:700px){.antwoord{margin-top:-22px}}

/* ---- Vergelijkingstabel ---- */
.tabelkaart{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-top:26px}
.tabelscroll{overflow-x:auto}
table.vgl{width:100%;border-collapse:collapse;min-width:580px}
table.vgl th,table.vgl td{text-align:left;padding:18px 22px;border-bottom:1px solid var(--line);font-size:17px;vertical-align:top;color:var(--muted)}
table.vgl th{background:var(--light);color:var(--deep);font-weight:950;font-size:15px;letter-spacing:.01em}
table.vgl tr:last-child td{border-bottom:0}
table.vgl td:first-child{font-weight:950;color:var(--deep)}
table.vgl td.goed{color:#1c6b4b}
table.vgl td.fout{color:#8a201a}

/* ---- Signaalkaarten ---- */
.signaal{background:var(--paper);border:1px solid var(--line);border-left:7px solid var(--red);border-radius:26px;padding:26px;box-shadow:0 12px 32px rgba(6,63,42,.09);transition:.22s ease}
.signaal:hover{transform:translateY(-4px)}
.signaal h3{font-size:21px;color:#8a201a}
.signaal p{font-size:17px;margin-bottom:0}
.signaal.donker{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);border-left-color:#ff7b6b}
.signaal.donker h3{color:#ffb9b0}
.signaal.donker p{color:rgba(255,255,255,.85)}

/* ---- Hulpkaarten ---- */
.hulpkaart{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.22s ease}
.hulpkaart:hover{transform:translateY(-5px);box-shadow:0 26px 62px rgba(6,63,42,.16)}
.hulpkaart .tel{display:block;font-size:clamp(34px,4vw,48px);font-weight:950;color:var(--deep);letter-spacing:-.04em;text-decoration:none;line-height:1;margin:6px 0 10px}
.hulpkaart .tel:hover{color:var(--green)}
.hulpkaart .wanneer{display:inline-flex;background:var(--light);border-radius:999px;padding:7px 13px;font-weight:950;font-size:14px;color:var(--deep);margin-bottom:14px}
.hulpkaart .zeg{background:var(--light);border-radius:20px;padding:15px 17px;font-size:17px;color:var(--deep);font-weight:850;margin:0 0 18px}
.hulpkaart .btn{align-self:flex-start;margin-top:auto}
.hulpkaart.spoed{border-left:9px solid var(--red);background:linear-gradient(135deg,var(--paper) 0%,#fff6f3 100%)}
.hulpkaart.spoed .tel{color:var(--red)}
.hulpkaart.spoed .wanneer{background:rgba(181,50,41,.1);color:#8a201a}
.hulpkaart.spoed h3{color:#8a201a}

/* ---- Routekaarten op de hub ---- */
.routekaart{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:.22s ease}
.routekaart:hover{transform:translateY(-6px);box-shadow:0 26px 62px rgba(6,63,42,.16)}
.routekaart h3{font-size:26px;color:var(--deep);letter-spacing:-.03em}
.routekaart p{font-size:18px}
.routekaart .ga{margin-top:auto;font-weight:950;color:var(--green);font-size:17px}
.routekaart.urgent{border-left:9px solid var(--red);background:linear-gradient(135deg,var(--paper) 0%,#fff6f3 100%)}
.routekaart.urgent h3{color:#8a201a}
.routekaart.urgent .ga{color:var(--red)}
.routekaart.urgent .story-label{background:rgba(181,50,41,.12);color:#8a201a}

/* ---- Volgende-stap navigatie ---- */
.volgende{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
@media(max-width:900px){.volgende{grid-template-columns:1fr}}
.volgkaart{background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:24px;text-decoration:none;color:inherit;display:block;box-shadow:0 12px 32px rgba(6,63,42,.09);transition:.22s ease}
.volgkaart:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(6,63,42,.15)}
.volgkaart .story-label{margin-bottom:10px}
.volgkaart b{display:block;font-size:21px;color:var(--deep);letter-spacing:-.03em;margin-bottom:7px;line-height:1.15}
.volgkaart span.oms{display:block;font-size:16px;color:var(--muted);font-weight:750}

/* ---- Vaste uitgang naar hulp ---- */
.uitgang{background:linear-gradient(135deg,#05321f 0%,#0a5b38 58%,var(--green) 100%);color:#fff;border-radius:var(--radius);padding:clamp(30px,4vw,46px);box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:32px;align-items:center;position:relative;overflow:hidden}
.uitgang:after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.12),transparent);animation:shine 8s ease-in-out infinite}
.uitgang>*{position:relative;z-index:1}
.uitgang h2{color:#fff;font-size:clamp(30px,3.6vw,46px);margin-bottom:12px}
.uitgang p{color:rgba(255,255,255,.9);font-size:19px;margin-bottom:0}
.uitgang .knoppen{display:grid;gap:12px}
.uitgang .knoppen .btn{width:100%}
@media(max-width:900px){.uitgang{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.uitgang:after{animation:none}}

/* ---- Bronnenblok ---- */
.bronnen{background:rgba(228,245,236,.7);border:1px solid var(--line);border-radius:var(--radius);padding:28px 32px;margin-top:30px}
.bronnen h3{font-size:21px;color:var(--deep);margin-bottom:14px}
.bronnen ol{margin:0;padding-left:22px}
.bronnen li{font-size:17px;color:var(--muted);font-weight:750;margin-bottom:9px}
.bronnen a{color:var(--deep);font-weight:900}

/* ---- Metaregel ---- */
.metaregel{font-size:15px;color:var(--muted);font-weight:800;margin-top:22px}

/* ---- FAQ ---- */
details.faq{background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:0 26px;margin-bottom:14px;box-shadow:0 10px 26px rgba(6,63,42,.07)}
details.faq summary{cursor:pointer;font-weight:950;font-size:20px;color:var(--deep);padding:22px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:after{content:"+";color:var(--green);font-size:28px;font-weight:950;flex:none;line-height:1}
details.faq[open] summary:after{content:"\2212"}
details.faq p{padding-bottom:22px;margin:0;font-size:18px}

/* ---- Stappen (verticaal, afwijkend van de horizontale .steps) ---- */
.stappenlijst{display:grid;gap:16px;margin-top:28px}
.stapkaart{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px 28px 92px;box-shadow:0 12px 32px rgba(6,63,42,.09);position:relative}
.stapkaart .num{position:absolute;left:28px;top:28px;margin:0;width:46px;height:46px;font-size:20px}
.stapkaart h3{font-size:23px;color:var(--deep);margin-bottom:9px}
.stapkaart p{font-size:18px;margin-bottom:0}
.stapkaart p+p{margin-top:12px}
@media(max-width:620px){.stapkaart{padding:80px 24px 26px}.stapkaart .num{left:24px;top:24px}}

/* ---- Doen / niet doen ---- */
.doen{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.doen.wel{border-left:9px solid var(--green)}
.doen.niet{border-left:9px solid var(--red)}
.doen h3{font-size:23px;color:var(--deep)}
.doen.niet h3{color:#8a201a}
.doen ul{margin:14px 0 0;padding-left:22px}
.doen li{font-size:17px;color:var(--muted);font-weight:750;margin-bottom:11px}

/* ---- Cijferblok op donkere achtergrond ---- */
.cijfersectie{background:linear-gradient(135deg,#04321f 0%,#075335 47%,var(--green) 100%);color:#fff;position:relative;overflow:hidden}
.cijfersectie h2{color:#fff}
.cijfersectie .kicker{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3)}
.cijfersectie>.wrap>.section-head p{color:rgba(255,255,255,.88)}
.cijferkaart{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);padding:32px;backdrop-filter:blur(8px)}
.cijferkaart .getal{display:block;font-size:clamp(44px,5.4vw,68px);font-weight:950;color:#fff;letter-spacing:-.05em;line-height:1}
.cijferkaart .getal em{font-style:normal;color:#9ee6c4}
.cijferkaart p{color:rgba(255,255,255,.86);font-size:17px;margin:16px 0 0;font-weight:750}
.bronregel{font-size:15px;color:rgba(255,255,255,.72);font-weight:800;margin-top:26px}
.bronregel a{color:#9ee6c4;font-weight:900}

/* ---- Waarschuwingsblok ---- */
.waarschuwing{background:#fff4ef;border:1px solid #f0c9c4;border-left:9px solid var(--red);border-radius:var(--radius);padding:clamp(26px,3.4vw,36px);box-shadow:var(--shadow)}
.waarschuwing h3{color:#8a201a;font-size:26px;display:flex;gap:12px;align-items:center}
.waarschuwing p{color:#70413b;font-size:18px}
.waarschuwing p:last-child{margin-bottom:0}

/* ---- Scamvarianten ---- */
.scamkaart{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.scamkaart h3{font-size:23px;color:var(--deep)}
.scamkaart ul{margin:14px 0 0;padding-left:22px}
.scamkaart li{font-size:17px;color:var(--muted);font-weight:750;margin-bottom:11px}
.scamkaart.donker{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.scamkaart.donker h3{color:#fff}
.scamkaart.donker li{color:rgba(255,255,255,.85)}

/* ---- Donkere sectie ---- */
.donkersectie{background:linear-gradient(135deg,#04321f 0%,#063f2a 60%,#075335 100%);color:#fff}
.donkersectie h2,.donkersectie h3{color:#fff}
.donkersectie .kicker{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3)}
.donkersectie>.wrap>.section-head p{color:rgba(255,255,255,.88)}
.donkersectie .site-note{color:rgba(255,255,255,.72)}

/* ---- Kop links uitlijnen waar gecentreerd te druk wordt ---- */
.section-head.links{text-align:left;margin-left:0;max-width:900px}
.section-head.links p{margin-left:0}

/* ---- Grid van twee met gelijke hoogte ---- */
.grid.gelijk{align-items:stretch}

/* ================================================================
   Telegram-simulator, videofacades en scorebord
   Zelfde Zorgfuik-tokens, ronde vormen, Inter
   ================================================================ */

/* ---- Chatkaart ---- */
.chatkaart{background:#07281a;border-radius:var(--radius);overflow:hidden;box-shadow:0 26px 70px rgba(6,63,42,.34);border:1px solid rgba(255,255,255,.1)}
.chatkop{display:flex;align-items:center;gap:13px;padding:16px 20px;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.09)}
.chatkop .avatar{width:42px;height:42px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-size:20px;flex:none}
.chatkop b{color:#fff;font-size:16px;display:block;line-height:1.2;font-weight:950}
.chatkop span{font-size:12.5px;color:rgba(255,255,255,.55);font-weight:800}
.chatlog{box-sizing:border-box;height:520px;padding:22px 20px;display:flex;flex-direction:column;gap:11px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-behavior:smooth}
.ballon{max-width:80%;padding:12px 16px;border-radius:20px;font-size:15.5px;line-height:1.45;font-weight:700;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease}
.ballon.zicht{opacity:1;transform:none}
.ballon.hun{align-self:flex-start;background:rgba(255,255,255,.1);color:rgba(255,255,255,.94);border-bottom-left-radius:6px}
.ballon.jij{align-self:flex-end;background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;border-bottom-right-radius:6px}
.ballon.systeem{align-self:center;max-width:92%;background:rgba(181,50,41,.24);border:1px solid rgba(181,50,41,.6);color:#ffd9d4;font-size:13.5px;text-align:center;font-weight:900;border-radius:16px}
.ballon .tijd{display:block;font-size:11px;opacity:.55;margin-top:5px;text-align:right;font-weight:700}
.chatvoet{padding:15px 20px;border-top:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chatvoet p{margin:0;font-size:13.5px;color:rgba(255,255,255,.62);font-weight:800}
.chatvoet button{background:none;border:1.5px solid rgba(255,255,255,.4);color:#fff;font-family:var(--font);font-size:13.5px;font-weight:950;border-radius:999px;padding:9px 16px;cursor:pointer;transition:.2s ease}
.chatvoet button:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.chatvoet button:focus-visible{outline:3px solid var(--green2);outline-offset:2px}
@media(max-width:820px){.chatlog{height:460px}}

/* ---- Videofacade ---- */
.vfacade{position:relative;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:26px;overflow:hidden;cursor:pointer;background:#07281a;display:block;box-shadow:var(--shadow);transition:.22s ease}
.vfacade:hover{transform:translateY(-4px);box-shadow:0 26px 62px rgba(6,63,42,.2)}
.vfacade img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.vfacade:hover img{transform:scale(1.04)}
.vfacade .speel{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(6,63,42,0) 40%,rgba(6,63,42,.55) 100%)}
.vfacade .speel span{width:78px;height:78px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green2));display:grid;place-items:center;box-shadow:0 14px 36px rgba(0,0,0,.36);transition:.2s ease}
.vfacade:hover .speel span{transform:scale(1.08)}
.vfacade .speel svg{width:28px;height:28px;fill:#fff;margin-left:4px}
.vfacade:focus-visible{outline:3px solid var(--green2);outline-offset:3px}
.vfacade .duurlabel{position:absolute;left:16px;bottom:14px;font-size:13px;font-weight:950;color:#fff;background:rgba(6,63,42,.82);padding:7px 14px;border-radius:999px}
.vnoot{font-size:14px;color:var(--muted);font-weight:800;margin-top:12px}
.donkersectie .vnoot{color:rgba(255,255,255,.65)}

/* ---- Videomodal ---- */
dialog.speler{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);width:100%}
dialog.speler::backdrop{background:rgba(4,30,19,.88);backdrop-filter:blur(5px)}
dialog.speler .kader{position:relative}
dialog.speler iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:26px;display:block;background:#000}
dialog.speler .sluit{position:absolute;right:0;top:-48px;background:none;border:0;color:#fff;font-family:var(--font);font-size:15px;font-weight:950;cursor:pointer}
dialog.speler .sluit:hover{color:var(--green2)}

/* ---- Citaten met tijdstempel ---- */
.citaat{border-left:7px solid var(--green);padding:4px 0 4px 24px;margin:0 0 20px}
.citaat .ts{display:inline-flex;background:var(--light);color:var(--deep);border-radius:999px;padding:5px 13px;font-size:13.5px;font-weight:950;margin-bottom:9px}
.citaat b{font-size:clamp(19px,2vw,24px);font-weight:950;letter-spacing:-.03em;display:block;line-height:1.2;color:var(--deep)}
.citaat span.duiding{font-size:16.5px;color:var(--muted);font-weight:750;display:block;margin-top:7px}
.donkersectie .citaat{border-left-color:var(--green2)}
.donkersectie .citaat b{color:#fff}
.donkersectie .citaat .ts{background:rgba(255,255,255,.16);color:#fff}
.donkersectie .citaat span.duiding{color:rgba(255,255,255,.8)}

/* ---- Scorebord ---- */
.scorebord{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(28px,3.6vw,40px);box-shadow:var(--shadow);margin-top:34px}
.scorebord h3{font-size:clamp(24px,2.6vw,32px);color:var(--deep);letter-spacing:-.03em}
.scorebord-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:stretch;margin-top:26px}
@media(max-width:820px){.scorebord-flow{grid-template-columns:1fr}.scorebord-flow .pijl{transform:rotate(90deg)}}
.paneel{border-radius:26px;padding:26px}
.paneel .kop{display:block;font-size:13.5px;font-weight:950;letter-spacing:.02em;margin-bottom:14px}
.paneel.dash{background:linear-gradient(135deg,#04321f 0%,#075335 100%);color:#fff}
.paneel.dash .kop{color:#9ee6c4}
.paneel.dash .score{display:block;font-size:clamp(46px,6vw,66px);font-weight:950;color:#ffc98a;line-height:1;letter-spacing:-.05em}
.paneel.dash small{display:block;font-size:14px;color:rgba(255,255,255,.66);margin-top:8px;font-weight:800}
.paneel.dash .actie{margin-top:16px;display:inline-block;font-size:13.5px;font-weight:950;color:#ffd9d4;background:rgba(181,50,41,.32);border-radius:999px;padding:9px 15px}
.pijl{display:grid;place-items:center;font-size:34px;color:var(--green);font-weight:950}
.paneel.mens{background:var(--light);border:1px solid var(--line)}
.paneel.mens .kop{color:var(--deep)}
.paneel.mens .score{display:block;font-size:clamp(21px,2.2vw,27px);font-weight:950;line-height:1.15;color:var(--deep);letter-spacing:-.03em}
.paneel.mens small{display:block;font-size:16px;color:var(--muted);margin-top:10px;font-weight:750}
.scorebord .slotregel{margin:24px 0 0;font-weight:950;font-size:clamp(19px,2vw,23px);color:var(--deep);letter-spacing:-.02em}

/* ---- Split met video naast tekst ---- */
.videosplit{display:grid;grid-template-columns:1fr 1.05fr;gap:34px;align-items:start;margin-top:30px}
.videosplit.omgekeerd{grid-template-columns:1.05fr 1fr}
@media(max-width:900px){.videosplit,.videosplit.omgekeerd{grid-template-columns:1fr;gap:26px}}
.videosplit h3{font-size:clamp(24px,2.6vw,32px);color:var(--deep);letter-spacing:-.03em}
.donkersectie .videosplit h3{color:#fff}

/* Chat zonder JavaScript: toon het gesprek direct */
.chatlog noscript{display:flex;flex-direction:column;gap:11px}

/* Submenu in de navigatie */
.navlinks summary.active{background:var(--light)}
.navlinks details.submenu[open] summary{background:var(--light)}

/* Bronvermelding onder een cijfer */
.cijferbron{display:block;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.22);font-size:13.5px;font-weight:800;color:rgba(255,255,255,.62)}

/* ================================================================
   Red Alert: waarschuwingspagina en statusblokken
   ================================================================ */

/* Statusbanner: is de waarschuwing actief of niet */
.alertstatus{border-radius:var(--radius);padding:clamp(24px,3vw,34px);box-shadow:var(--shadow);border:1px solid var(--line);background:var(--paper);border-left:9px solid var(--red);display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
@media(max-width:700px){.alertstatus{grid-template-columns:1fr}}
.alertstatus .stip{width:20px;height:20px;border-radius:50%;background:var(--red);margin-top:7px;position:relative;flex:none}
.alertstatus .stip:after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--red);opacity:.4;animation:pols 2.2s ease-out infinite}
@keyframes pols{0%{transform:scale(.7);opacity:.55}100%{transform:scale(1.5);opacity:0}}
@media(prefers-reduced-motion:reduce){.alertstatus .stip:after{animation:none}}
.alertstatus.verlopen{border-left-color:#c98a1e}
.alertstatus.verlopen .stip{background:#c98a1e}
.alertstatus.verlopen .stip:after{border-color:#c98a1e;animation:none}
.alertstatus h3{font-size:clamp(22px,2.4vw,28px);color:var(--deep);margin-bottom:8px}
.alertstatus p{font-size:18px;margin-bottom:10px}
.alertstatus p:last-child{margin-bottom:0}
.alertstatus .statuslabel{display:inline-flex;align-items:center;gap:8px;background:rgba(181,50,41,.12);color:#8a201a;border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:950;margin-bottom:12px}
.alertstatus.verlopen .statuslabel{background:rgba(201,138,30,.16);color:#8a5a12}

/* Tijdlijn van waarschuwingen */
.tijdlijn{margin-top:30px;position:relative;padding-left:34px}
.tijdlijn:before{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:3px;background:linear-gradient(180deg,var(--red),var(--green));border-radius:3px}
.tl-item{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:24px 26px;margin-bottom:16px;box-shadow:0 10px 26px rgba(6,63,42,.07)}
.tl-item:before{content:"";position:absolute;left:-31px;top:28px;width:15px;height:15px;border-radius:50%;background:var(--red);border:3px solid var(--paper);box-shadow:0 0 0 2px var(--line)}
.tl-item.groen:before{background:var(--green)}
.tl-item .datum{display:inline-flex;background:var(--light);color:var(--deep);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:950;margin-bottom:10px}
.tl-item h3{font-size:20px;color:var(--deep);margin-bottom:7px}
.tl-item p{font-size:17px;margin-bottom:0}
.tl-item p+p{margin-top:10px}
.donkersectie .tl-item{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.donkersectie .tl-item h3{color:#fff}
.donkersectie .tl-item p{color:rgba(255,255,255,.85)}
.donkersectie .tl-item .datum{background:rgba(255,255,255,.16);color:#fff}
.donkersectie .tl-item:before{border-color:#06301f}
.donkersectie .tijdlijn:before{background:linear-gradient(180deg,#ff7b6b,var(--green2))}

/* Sitebrede alertstrook onder de acuutbalk */
.alertstrook{background:#fff4ef;border-bottom:1px solid #f0c9c4}
.alertstrook .wrap{padding:13px 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.alertstrook p{margin:0;font-size:16px;font-weight:850;color:#8a201a}
.alertstrook a.meer{margin-left:auto;font-weight:950;color:#8a201a;text-decoration:underline;font-size:16px;white-space:nowrap}
@media(max-width:700px){.alertstrook a.meer{margin-left:0}}

/* Stoffenlijst */
.stoflijst{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
@media(max-width:760px){.stoflijst{grid-template-columns:1fr}}
.stof{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:22px 24px}
.stof b{display:block;font-size:19px;color:var(--deep);margin-bottom:6px}
.stof span{font-size:16px;color:var(--muted);font-weight:750}

/* Skip-link voor toetsenbordnavigatie */
.skiplink{position:absolute;left:-9999px;top:0;z-index:999;background:var(--deep);color:#fff;padding:14px 22px;border-radius:0 0 var(--radius) 0;font-weight:950;text-decoration:none}
.skiplink:focus{left:0}

/* Kop-opmaak zonder kopniveau (hero-aside) */
.visual-kop{font-size:20px;font-weight:950;color:var(--deep);letter-spacing:-.02em;margin:0 0 6px}
.alertstatus h2{font-size:clamp(22px,2.4vw,28px);color:var(--deep);margin-bottom:8px;line-height:1.2}

/* ================================================================
   Feitencheck: aantoonbaar / niet aangetoond / buitenland
   ================================================================ */
.feitencheck{display:grid;gap:18px;margin-top:26px}
.fc-blok{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px;box-shadow:0 12px 32px rgba(6,63,42,.09);border-left:9px solid var(--line)}
.fc-blok h3{font-size:23px;color:var(--deep);margin-bottom:10px}
.fc-blok p{font-size:17.5px;margin-bottom:12px}
.fc-blok p:last-child{margin-bottom:0}
.fc-label{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 15px;font-size:13px;font-weight:950;letter-spacing:.02em;margin-bottom:12px}
.fc-ja{border-left-color:var(--green);background:linear-gradient(135deg,var(--paper) 0%,#eefaf4 100%)}
.fc-ja .fc-label{background:rgba(0,143,90,.14);color:#0a6b45}
.fc-ja .fc-label:before{content:"\2714";font-size:15px}
.fc-nee{border-left-color:var(--red);background:linear-gradient(135deg,var(--paper) 0%,#fff4ef 100%)}
.fc-nee .fc-label{background:rgba(181,50,41,.12);color:#8a201a}
.fc-nee .fc-label:before{content:"\2716";font-size:14px}
.fc-nee h3{color:#8a201a}
.fc-vs{border-left-color:#c98a1e;background:linear-gradient(135deg,var(--paper) 0%,#fff9ef 100%)}
.fc-vs .fc-label{background:rgba(201,138,30,.16);color:#8a5a12}
.fc-vs .fc-label:before{content:"\1F1FA\1F1F8"}
.fc-vs h3{color:#8a5a12}
.fc-noot{font-size:15px;color:var(--muted);font-weight:800;border-top:1px solid var(--line);padding-top:12px;margin-top:14px}

/* Kanttekening binnen een tijdlijnitem */
.tl-noot{font-size:15px;color:var(--muted);font-weight:800;border-top:1px solid var(--line);padding-top:11px;margin-top:12px}
.donkersectie .tl-noot{color:rgba(255,255,255,.68);border-top-color:rgba(255,255,255,.2)}

/* Extra noot onder een cijfer (afbakening/noemer) */
.cijfernoot{display:block;margin-top:8px;font-size:13px;font-weight:800;color:rgba(255,255,255,.55);font-style:italic}

/* ================================================================
   Inline grafiek
   ================================================================ */
.grafiek{margin:30px 0 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow)}
.grafiek svg{width:100%;height:auto;display:block;margin:8px 0 4px}
.gr-kop{font-size:clamp(19px,2vw,23px);font-weight:950;color:var(--deep);letter-spacing:-.02em;margin-bottom:6px}
.gr-bron{font-size:14.5px;color:var(--muted);font-weight:750;line-height:1.5;border-top:1px solid var(--line);padding-top:14px;margin-top:12px}
.grafiek .ax{font-family:var(--font);font-size:13px;font-weight:800;fill:var(--muted)}
.grafiek .lb{font-family:var(--font);font-size:15px;font-weight:950}
.grafiek .lb-groen{fill:#0a6b45}
.grafiek .lb-rood{fill:#8a201a}
.grafiek .pt-groen{fill:#fff;stroke:var(--green);stroke-width:2.5}
.grafiek .pt-rood{fill:#fff;stroke:var(--red);stroke-width:2.5}
.grafiek circle:hover{r:6}

/* ================================================================
   Praktijk vs. beleid: twee kolommen tegenover elkaar
   ================================================================ */
.confrontatie{display:grid;grid-template-columns:1fr auto 1fr;gap:0;margin-top:28px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
@media(max-width:900px){.confrontatie{grid-template-columns:1fr}}
.cf-kant{padding:clamp(24px,3vw,34px)}
.cf-kant .cf-bron{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:950;letter-spacing:.02em;margin-bottom:14px}
.cf-praktijk{background:linear-gradient(135deg,var(--paper) 0%,#eefaf4 100%)}
.cf-praktijk .cf-bron{background:rgba(0,143,90,.14);color:#0a6b45}
.cf-beleid{background:linear-gradient(135deg,var(--paper) 0%,#f4f6f8 100%)}
.cf-beleid .cf-bron{background:rgba(23,61,42,.1);color:var(--deep)}
.cf-kant blockquote{margin:0 0 14px;font-size:clamp(19px,2vw,23px);font-weight:950;color:var(--deep);letter-spacing:-.02em;line-height:1.32}
.cf-kant blockquote:before{content:"\201C";color:var(--green);font-size:36px;line-height:0;vertical-align:-10px;margin-right:2px}
.cf-beleid blockquote:before{color:var(--muted)}
.cf-kant .cf-wie{font-size:16px;color:var(--muted);font-weight:800;display:block;margin-bottom:10px}
.cf-kant p{font-size:16.5px;margin-bottom:0}
.cf-midden{display:grid;place-items:center;background:var(--light);padding:0 18px;position:relative}
.cf-midden span{font-size:15px;font-weight:950;color:var(--deep);writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:900px){.cf-midden{padding:14px}.cf-midden span{writing-mode:horizontal-tb}}

/* Citatenblok met tijdstempel, compacter dan .citaat */
.qlijst{display:grid;gap:16px;margin-top:26px}
.q{background:var(--paper);border:1px solid var(--line);border-left:7px solid var(--green);border-radius:22px;padding:24px 26px;box-shadow:0 10px 26px rgba(6,63,42,.07)}
.q blockquote{margin:0 0 10px;font-size:clamp(18px,1.9vw,21px);font-weight:950;color:var(--deep);letter-spacing:-.02em;line-height:1.35}
.q .q-wie{font-size:15.5px;color:var(--muted);font-weight:800}
.q .q-ts{display:inline-flex;background:var(--light);color:var(--deep);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:950;margin-left:8px}
.q .q-duiding{display:block;font-size:16.5px;color:var(--muted);font-weight:750;margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.q.rood{border-left-color:var(--red)}
.q.rood blockquote{color:#8a201a}
.donkersectie .q{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.donkersectie .q blockquote{color:#fff}
.donkersectie .q .q-wie,.donkersectie .q .q-duiding{color:rgba(255,255,255,.82)}
.donkersectie .q .q-ts{background:rgba(255,255,255,.16);color:#fff}
.donkersectie .q .q-duiding{border-top-color:rgba(255,255,255,.2)}

/* Drie keer nee */
.neerij{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
@media(max-width:860px){.neerij{grid-template-columns:1fr}}
.nee-kaart{background:var(--paper);border:1px solid var(--line);border-top:6px solid var(--red);border-radius:22px;padding:24px}
.nee-kaart .nee-vraag{font-size:15.5px;color:var(--muted);font-weight:800;margin-bottom:12px;display:block}
.nee-kaart .nee-woord{display:block;font-size:34px;font-weight:950;color:#8a201a;letter-spacing:-.04em;line-height:1;margin-bottom:10px}
.nee-kaart p{font-size:16px;margin-bottom:0}

/* ================================================================
   Taalkiezer in de navigatie
   ================================================================ */
.taalkiezer{position:relative;margin-left:6px}
.taalkiezer>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:900;font-size:15px;
  color:var(--deep);background:var(--paper);transition:.18s ease}
.taalkiezer>summary::-webkit-details-marker{display:none}
.taalkiezer>summary:hover{background:var(--light)}
.taalkiezer[open]>summary{background:var(--light)}
.taalkiezer .vlag{font-size:17px;line-height:1}
.taalkiezer-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--paper);
  border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 50px rgba(6,63,42,.18);
  padding:8px;min-width:184px;z-index:60;display:grid;gap:2px}
.taalkiezer-menu a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;
  text-decoration:none;color:var(--deep);font-weight:850;font-size:15.5px;white-space:nowrap}
.taalkiezer-menu a:hover{background:var(--light)}
.taalkiezer-menu a.actief{background:var(--light);font-weight:950}
.taalkiezer-menu a.actief:after{content:"\2713";margin-left:auto;color:var(--green);font-weight:950}
@media(max-width:820px){.taalkiezer-menu{right:auto;left:0}}

/* Vertaaldisclaimer */
.vertaalnoot{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-left:6px solid #ffc98a;border-radius:22px;padding:22px 26px;margin-top:26px}
.vertaalnoot h4{font-size:17px;font-weight:950;color:#ffd9a8;margin:0 0 8px;letter-spacing:-.01em}
.vertaalnoot p{font-size:16px;color:rgba(255,255,255,.82);margin:0}
.vertaalnoot p+p{margin-top:9px}
.vertaalnoot a{color:#9ee6c4;font-weight:900}

/* ================================================================
   RTL-voorbereiding (Arabisch). Nog niet actief, wel klaar.
   ================================================================ */
[dir="rtl"] .kruimel i{transform:scaleX(-1);display:inline-block}
[dir="rtl"] .fc-blok,[dir="rtl"] .antwoord,[dir="rtl"] .signaal,[dir="rtl"] .q,
[dir="rtl"] .stapkaart,[dir="rtl"] .doen,[dir="rtl"] .hulpkaart.spoed,
[dir="rtl"] .routekaart.urgent,[dir="rtl"] .alertstatus,[dir="rtl"] .waarschuwing,
[dir="rtl"] .vertaalnoot{border-left:0;border-right-width:9px;border-right-style:solid;
  border-right-color:inherit}
[dir="rtl"] .tijdlijn{padding-left:0;padding-right:34px}
[dir="rtl"] .tijdlijn:before{left:auto;right:9px}
[dir="rtl"] .tl-item:before{left:auto;right:-31px}
[dir="rtl"] .stapkaart{padding:28px 92px 28px 30px}
[dir="rtl"] .stapkaart .num{left:auto;right:28px}
[dir="rtl"] .taalkiezer-menu{right:auto;left:0}
[dir="rtl"] .acuutbalk .btn,[dir="rtl"] .alertstrook a.meer{margin-left:0;margin-right:auto}
[dir="rtl"] .q .q-ts{margin-left:0;margin-right:8px}
[dir="rtl"] .cf-kant blockquote:before{margin-right:0;margin-left:2px}

/* Taal waarin deze pagina (nog) niet bestaat: link gaat naar de startpagina */
.taalkiezer-menu a.onvertaald{opacity:.55}
.taalkiezer-menu a.onvertaald:after{content:"\2192";margin-left:auto;color:var(--muted);font-weight:900}

/* Markering bij vertaalde citaten */
.vertaalmerk{display:inline-flex;align-items:center;gap:6px;background:rgba(23,61,42,.08);color:var(--muted);
  border-radius:999px;padding:4px 11px;font-size:12px;font-weight:900;letter-spacing:.01em;margin-left:8px;
  vertical-align:middle;white-space:nowrap}
.donkersectie .vertaalmerk{background:rgba(255,255,255,.13);color:rgba(255,255,255,.72)}
.q .vertaalmerk{margin-left:0;margin-top:8px}
.citaatnoot{background:var(--light);border-radius:22px;padding:20px 24px;margin-top:22px;
  font-size:16.5px;color:var(--muted);font-weight:750;line-height:1.55}
.citaatnoot strong{color:var(--deep)}

/* ================================================================
   Afdrukken. Iemand die de zin voor de huisarts wil meenemen, moet
   die op papier krijgen zonder navigatie, banners en footer.
   ================================================================ */
@media print {
  .topbar, .acuutbalk, .alertstrook, .ticker, .footer, .skiplink,
  .taalkiezer, .submenu, .kruimel, .volgende, .uitgang, .buttons,
  .btn, .vfacade, .vnoot, .chatkaart, .videosplit > div:last-child,
  .reveal-init { display: none !important; }

  html, body { background: #fff !important; color: #000 !important;
    font-size: 11pt; }
  .wrap { max-width: none !important; padding: 0 !important; }
  section { padding: 0 0 14pt !important; }
  .donkersectie, .cijfersectie, .hero { background: #fff !important;
    color: #000 !important; }
  .donkersectie *, .cijfersectie *, .hero * { color: #000 !important; }

  h1 { font-size: 20pt; margin: 0 0 8pt; }
  h2 { font-size: 15pt; margin: 12pt 0 5pt; page-break-after: avoid; }
  h3 { font-size: 12pt; margin: 8pt 0 3pt; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* Kaders worden lijnen: inkt besparen, structuur behouden */
  .antwoord, .waarschuwing, .signaal, .stapkaart, .hulpkaart, .q,
  .scamkaart, .fc-blok, .nee-kaart, .cijferkaart, .grafiek, .bronnen {
    background: #fff !important; box-shadow: none !important;
    border: 1px solid #999 !important; border-left-width: 3pt !important;
    padding: 8pt 10pt !important; page-break-inside: avoid; }

  /* De zin om mee te nemen springt eruit */
  .zeg, .antwoord em { font-weight: 700; }

  /* FAQ open afdrukken, anders print je lege balkjes */
  details { display: block !important; }
  details > summary { font-weight: 700; list-style: none; }
  details > *:not(summary) { display: block !important; }

  /* Externe links met adres erachter, interne niet */
  a[href^="http"]::after { content: " (" attr(href) ")";
    font-size: 8pt; color: #555; word-break: break-all; }
  a[href^="tel:"]::after, a[href^="#"]::after { content: ""; }

  /* Herkomst op elke afdruk */
  .metaregel::after { content: " Bron: oxycodon.online";
    display: block; margin-top: 4pt; font-size: 8pt; color: #555; }
}

/* ================================================================
   Illustraties. Zelfde opzet als .grafiek: SVG in de huisstijl,
   geen fotografie, alles via CSS-variabelen zodat een
   huisstijlwijziging automatisch doorwerkt.
   ================================================================ */
.illu{margin:30px 0 0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow)}
.illu svg{width:100%;height:auto;display:block;margin:10px 0 6px}
.illu .il-kop{font-size:clamp(19px,2vw,23px);font-weight:950;color:var(--deep);
  letter-spacing:-.02em;margin-bottom:6px}
.illu .il-noot{font-size:14.5px;color:var(--muted);font-weight:750;line-height:1.5;
  border-top:1px solid var(--line);padding-top:14px;margin-top:12px}
.illu .il-lbl{font-family:var(--font);font-size:13.5px;font-weight:900;fill:var(--deep)}
.illu .il-sub{font-family:var(--font);font-size:12.5px;font-weight:750;fill:var(--muted)}
.illu .il-num{font-family:var(--font);font-size:15px;font-weight:950;fill:#fff}
.illu .il-rood{fill:var(--red)}
.illu .il-groen{fill:#0a6b45}
.illu-rood{border-left:9px solid var(--red)}
.illu-rood .il-kop{color:#8a201a}

/* Bij afdrukken blijven illustraties staan: dat is juist de reden
   dat iemand de pagina print. */
@media print{
  .illu{border:1px solid #999 !important;box-shadow:none !important;
    background:#fff !important;page-break-inside:avoid}
  .illu svg{max-height:9cm}
}

/* ================================================================
   404-pagina.

   Twee eerdere versies gebruikten een absoluut gepositioneerde
   achtergrond-SVG met height:100% en preserveAspectRatio slice. Dat
   werkte in Chromium maar niet in Safari: WebKit bepaalt de afmeting
   van zo'n SVG op een andere manier. Omdat die opzet hier niet te
   testen viel, is hij vervangen door het patroon dat op de andere
   pagina's wel werkt: een gewone illustratie in de tekststroom.
   ================================================================ */
.f404-spoor-vak{margin:0 0 30px}
.f404-spoor-svg{width:100%;max-width:820px;height:auto;display:block;
  margin:0 auto}
.f404-code{display:inline-block;font-weight:950;letter-spacing:.06em;
  margin-left:10px;opacity:.7}
@media (prefers-reduced-motion:no-preference){
  .f404-spoor{stroke-dasharray:820;stroke-dashoffset:820;
    animation:spoor 2.2s cubic-bezier(.4,0,.2,1) .2s forwards}
  @keyframes spoor{to{stroke-dashoffset:0}}
}
@media print{.f404-spoor-vak{display:none}}

/* ================================================================
   Lettertype van de koppen.

   zorgfuik-base.css verwacht "Bricolage Grotesque" en verwijst naar
   /fonts/bricolage-*.woff2. Die bestanden staan op zorgfuik.nl maar niet
   hier, dus elke pagina deed twee tot drie verzoeken die faalden. Het
   viel niet op omdat de browser dan terugvalt op Inter, maar het kostte
   wel verzoeken en een korte vertraging voordat tekst verscheen.

   Door --display hier op Inter te zetten wordt Bricolage nergens meer
   gebruikt, en dan haalt de browser het bestand ook niet op. Het
   basisbestand blijft ongewijzigd.

   Wil je alsnog dezelfde koppen als zorgfuik.nl, zet dan de drie
   bricolage-woff2-bestanden in /fonts/ en haal dit blok weg.
   ================================================================ */
:root{--display:"Inter",ui-sans-serif,system-ui,sans-serif}