/*
Theme Name: IO v2
Theme URI: https://islamomroep.nl/
Description: Het ontwerp van IslamOmroep. Staat op zichzelf: geen ouderthema, geen Bootstrap, geen Font Awesome. Alles wat de site toont komt uit dit thema; alles wat de site doet staat in de mu-plugins.
Author: IslamOmroep
Version: 1.0
Text Domain: io-v2
*/

/* ---------------------------------------------------------------------------
   Lettertypen.
   In het prototype zaten deze als base64 ín de pagina: 81 kB per pagina, elke
   keer opnieuw. Nu zijn het echte bestanden die de browser één keer ophaalt en
   daarna voor de hele site hergebruikt.
   ------------------------------------------------------------------------- */

@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/anton.woff2) format('woff2');}
@font-face{font-family:'InterVar';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-var.woff2) format('woff2');}
@font-face{font-family:'IqraKalligrafie';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/iqra-kalligrafie.woff2?v=2) format('woff2');}

/* ---------------------------------------------------------------------------
   Het ontwerp, overgenomen uit het prototype op /v2/.
   ------------------------------------------------------------------------- */


/* ============ TOKENS ============ */
:root{
  /* merk + vaste "sky" (hero & footer blijven altijd donker) */
  --merk:#1616CD;
  --beam:#4D6DFF;
  --beam-lt:#9FB2FF;
  --sky-0:#04060F;
  --sky-1:#0A0F22;
  --sky-panel:#101736;
  --on-sky:#F3F5FC;
  --on-sky-mut:#8B94B8;
  --sky-line:rgba(120,140,255,.16);
  --live:#FF4A5E;
  /* wisselende paginakleuren — night (standaard) */
  --bg:#04060F;
  --surface:#0A0F22;
  --surface-2:#101736;
  --text:#F3F5FC;
  --muted:#8B94B8;
  --line:rgba(120,140,255,.16);
  --accent:#4D6DFF;
  --accent-lt:#9FB2FF;
  --grain-op:.05;
  --kaart-schaduw:0 30px 60px -22px rgba(0,0,0,.7);
  --font-display:'Anton','Arial Narrow',Impact,sans-serif;
  --font-body:'InterVar','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --font-mono:'SF Mono',ui-monospace,'Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace;
  --rand:14px;
  --pad:clamp(24px,5vw,56px);

  /* Ruimte onder de vaste kopbalk.

     Elke kopbalk-band rekende die ruimte uit met calc(var(--pad) + N). Maar
     --pad is de HORIZONTALE marge: die hoort op een telefoon te krimpen. De
     verticale ruimte onder de balk hoort dat juist niet te doen. Op een groot
     scherm is --pad 150 px en viel het niet op; op 375 px zakt --pad naar
     20 px en bleef er 60 px over voor een balk van 73 px. Gemeten op een
     telefoon verdween daardoor het kruimelpad (artikel, column) en zelfs de
     paginatitel (Opinie-archief op 5 px, zoekpagina op 0 px).

     Deze waarde staat los van --pad en wordt met max() als ondergrens gebruikt,
     zodat de ruimere maten op een groot scherm precies blijven zoals ze waren. */
  --kop-hoogte:75px;
  --kop-vrij:calc(var(--kop-hoogte) + clamp(16px,2.2vw,30px));
}
html[data-theme="day"]{
  --bg:#EAEEF9;
  --surface:#FFFFFF;
  --surface-2:#F4F7FE;
  --text:#0B1226;
  --muted:#5B6488;
  --line:rgba(22,30,110,.14);
  --accent:#1B2CD6;
  --accent-lt:#2A3BD8;
  --grain-op:.02;
  --kaart-schaduw:0 22px 44px -26px rgba(20,30,110,.32);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .5s ease,color .5s ease;
}
::selection{background:var(--merk);color:#fff}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.container{max-width:1300px;margin:0 auto;padding-inline:var(--pad)}
h1,h2,h3,h4{text-wrap:balance}

body::after{
  content:"";position:fixed;inset:0;z-index:120;pointer-events:none;opacity:var(--grain-op);
  transition:opacity .5s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}

/* ============ IDENT ============ */
#ident{
  position:fixed;inset:0;z-index:300;background:var(--sky-0);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;
  transition:opacity .7s ease,visibility .7s;color:var(--on-sky);
}
#ident.weg{opacity:0;visibility:hidden;pointer-events:none}
#ident .merk-teken{width:82px;height:82px;color:var(--beam);animation:identMerk 1s cubic-bezier(.2,.8,.2,1) both}
#ident .merk-teken svg{filter:drop-shadow(0 0 34px rgba(77,109,255,.55))}
#ident .ident-naam{font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);letter-spacing:.06em;text-transform:uppercase;animation:identOp .8s .3s both}
#ident .ident-naam b{color:var(--beam-lt);font-weight:400}
#ident .ident-lijn{width:0;height:2px;background:linear-gradient(90deg,transparent,var(--beam),transparent);animation:identLijn 1.1s .45s cubic-bezier(.2,.8,.2,1) both}
#ident .ident-tag{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--on-sky-mut);animation:identOp .8s .6s both}
@keyframes identMerk{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes identOp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes identLijn{from{width:0}to{width:min(420px,70vw)}}
@media (prefers-reduced-motion:reduce){#ident{display:none}}

/* ============ HEADER ============ */
header.site{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
header.site.vast{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav-balk{display:flex;align-items:center;gap:26px;padding:16px var(--pad);max-width:1300px;margin:0 auto}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo .merk-teken{width:32px;height:32px;color:var(--accent)}
.logo-naam{font-family:var(--font-display);text-transform:uppercase;font-size:1.15rem;letter-spacing:.04em}
.logo-naam b{color:var(--accent-lt);font-weight:400}
nav.hoofd{display:flex;gap:26px;margin-left:auto}
nav.hoofd a{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);padding:6px 0;position:relative;transition:color .25s}
nav.hoofd a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
nav.hoofd a:hover,nav.hoofd a.actief{color:var(--text)}
nav.hoofd a:hover::after,nav.hoofd a.actief::after{transform:scaleX(1)}
.kop-acties{display:flex;align-items:center;gap:12px}
.thema-knop{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:border-color .3s,transform .3s;flex-shrink:0}
.thema-knop:hover{border-color:var(--accent);transform:rotate(18deg)}
.thema-knop svg{width:17px;height:17px;stroke:var(--text);fill:none;stroke-width:1.7}
.thema-knop .zon{display:none}
html[data-theme="day"] .thema-knop .maan{display:none}
html[data-theme="day"] .thema-knop .zon{display:block}
/* day-modus: transparante header staat op de altijd-donkere hero — gebruik sky-tinten tot .vast */
html[data-theme="day"] header.site:not(.vast) .logo-naam{color:var(--on-sky)}
html[data-theme="day"] header.site:not(.vast) .logo-naam b{color:var(--beam-lt)}
html[data-theme="day"] header.site:not(.vast) .logo .merk-teken{color:var(--beam)}
html[data-theme="day"] header.site:not(.vast) nav.hoofd a{color:var(--on-sky-mut)}
html[data-theme="day"] header.site:not(.vast) nav.hoofd a:hover,
html[data-theme="day"] header.site:not(.vast) nav.hoofd a.actief{color:var(--on-sky)}
html[data-theme="day"] header.site:not(.vast) .thema-knop{border-color:var(--sky-line)}
html[data-theme="day"] header.site:not(.vast) .thema-knop svg{stroke:var(--on-sky)}
html[data-theme="day"] header.site:not(.vast) .menu-knop span{background:var(--on-sky)}
.knop{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:12px 22px;border-radius:100px;border:1px solid var(--line);transition:background .3s,border-color .3s,color .3s,transform .3s;white-space:nowrap}
.knop.vol{background:var(--merk);border-color:transparent;color:#fff}
.knop.vol:hover{background:var(--beam);transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(22,22,205,.6)}
.knop.rand:hover{border-color:var(--accent);color:var(--accent-lt)}
header .knop.vol{padding:11px 20px}
.menu-knop{display:none;width:40px;height:40px;position:relative;flex-shrink:0}
.menu-knop span{position:absolute;left:8px;right:8px;height:2px;background:var(--text);transition:.3s}
.menu-knop span:nth-child(1){top:13px}.menu-knop span:nth-child(2){top:19px}.menu-knop span:nth-child(3){top:25px}
body.menu-open .menu-knop span:nth-child(1){top:19px;transform:rotate(45deg)}
body.menu-open .menu-knop span:nth-child(2){opacity:0}
body.menu-open .menu-knop span:nth-child(3){top:19px;transform:rotate(-45deg)}

/* ============ HERO (altijd donker) ============ */
#hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--sky-0);color:var(--on-sky)}
.hero-lucht{position:absolute;inset:0;z-index:0}
.hero-lucht::before{content:"";position:absolute;inset:0;background:radial-gradient(1100px 700px at 80% 16%,rgba(22,22,205,.42),transparent 62%),radial-gradient(900px 600px at 6% 92%,rgba(77,109,255,.14),transparent 60%),linear-gradient(180deg,#05070f 0%,#070b1c 55%,#04060F 100%)}
#signaal{position:absolute;inset:0;width:100%;height:100%;opacity:.42}
/* subtiele Iqra-kalligrafie op de achtergrond van de hero (اقرأ = "Lees") */
.hero-iqra{position:absolute;z-index:1;top:52%;left:clamp(-50px,-1vw,10px);transform:translateY(-50%);font-family:'IqraKalligrafie',serif;font-weight:700;font-size:min(66vh,50vw);line-height:.78;color:var(--beam);opacity:.08;pointer-events:none;user-select:none;white-space:nowrap}
@media (max-width:900px){.hero-iqra{top:24%;left:50%;transform:translate(-50%,-50%);font-size:82vw;opacity:.06}}
.hero-inhoud{position:relative;z-index:2;width:100%;max-width:1300px;margin:0 auto;padding:128px var(--pad) 58px;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,72px);align-items:center}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-lt)}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);flex-shrink:0}
#hero .kicker{color:var(--beam-lt)}
#hero .kicker::before{background:var(--beam);box-shadow:0 0 12px var(--beam)}
.hero-tekst .kicker{margin-bottom:22px}
h1.zendtitel{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(3.6rem,9vw,7.6rem);line-height:.9;letter-spacing:.005em;margin-bottom:22px}
h1.zendtitel .accent{color:var(--beam-lt)}
.hero-tekst p.pitch{max-width:44ch;color:var(--on-sky-mut);font-size:1.06rem;margin-bottom:30px}
.hero-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-knoppen{display:flex;gap:12px;flex-wrap:wrap}
/* teller */
.teller{display:flex;align-items:center;gap:14px}
.teller-num{font-family:var(--font-display);font-size:clamp(2.4rem,4vw,3.4rem);line-height:.9;letter-spacing:.01em;color:var(--on-sky);font-variant-numeric:tabular-nums}
.teller-label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-sky-mut);line-height:1.4;max-width:12ch}
.teller-label .pols{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live);margin-right:7px;animation:pulse 1.6s infinite;vertical-align:middle}
.teller-scheid{width:1px;height:52px;background:var(--sky-line)}

/* scherm met echte video */
.scherm-wrap{perspective:1300px}
.scherm{display:block;position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--rand);overflow:hidden;border:1px solid var(--sky-line);background:#070B1E;box-shadow:0 44px 100px -34px rgba(0,0,0,.85),0 0 90px -22px rgba(22,22,205,.4);transform:rotateY(-6deg) rotateX(2deg);transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.scherm .thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:kenburns 18s ease-in-out infinite alternate;filter:saturate(1.05)}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1.14) translate(-1%,-1%)}}
.scherm .filmwaas{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,15,.15) 0%,transparent 30%,rgba(4,6,15,.85) 100%)}
.scherm .speel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:rgba(4,6,15,.4);border:1px solid rgba(243,245,252,.6);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;transition:background .3s,transform .3s}
.scherm .speel svg{width:22px;height:22px;fill:var(--on-sky);margin-left:4px}
.scherm:hover .speel{background:var(--merk);border-color:transparent;transform:translate(-50%,-50%) scale(1.08)}
.lower-third{position:absolute;left:18px;right:18px;bottom:16px;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.lt-tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;background:var(--merk);color:#fff;padding:5px 10px;border-radius:3px}
.lt-balk{background:rgba(4,6,15,.6);backdrop-filter:blur(8px);border-left:3px solid var(--beam);padding:9px 15px;border-radius:0 6px 6px 0}
.lt-balk .lt-titel{font-family:var(--font-display);text-transform:uppercase;font-size:1.15rem;letter-spacing:.02em;line-height:1.05;color:var(--on-sky)}
.lt-balk .lt-sub{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-sky-mut)}
.scherm .live-dot{position:absolute;top:15px;right:15px;display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.22em;color:var(--on-sky);background:rgba(4,6,15,.55);padding:6px 12px;border-radius:100px;border:1px solid var(--sky-line)}
.live-dot i{width:7px;height:7px;border-radius:50%;background:var(--live);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,74,94,.5)}50%{opacity:.6;box-shadow:0 0 0 6px rgba(255,74,94,0)}}

/* hero-nieuws — nieuwste artikelen onder de videokaart */
.hero-nieuws{margin-top:20px;display:flex;flex-direction:column}
.hn-item{display:flex;gap:14px;align-items:center;padding:12px 2px;border-top:1px solid var(--sky-line);transition:transform .3s}
.hn-item:first-child{border-top:0}
.hn-item:hover{transform:translateX(5px)}
.hn-beeld{flex-shrink:0;width:100px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0A0F22;box-shadow:inset 0 0 0 1px var(--sky-line)}
.hn-beeld img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hn-item:hover .hn-beeld img{transform:scale(1.06)}
.hn-tekst{display:flex;flex-direction:column;gap:5px;min-width:0}
.hn-meta{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--beam-lt)}
.hn-titel{font-size:.92rem;line-height:1.32;color:var(--on-sky);font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hn-item:hover .hn-titel{color:var(--beam-lt)}

/* ticker */
.ticker{position:relative;z-index:3;border-top:1px solid var(--sky-line);border-bottom:1px solid var(--sky-line);background:rgba(7,10,26,.9);backdrop-filter:blur(10px);display:flex;align-items:stretch;overflow:hidden}
.ticker-label{flex-shrink:0;display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;padding:14px 20px;background:var(--merk);color:#fff}
.ticker-label i{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}
.ticker-baan{flex:1;display:flex;align-items:center;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ticker-inhoud{display:flex;flex-shrink:0;align-items:center;animation:tik 46s linear infinite;padding-left:20px}
.ticker:hover .ticker-inhoud{animation-play-state:paused}
.ticker-inhoud a{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.05em;color:var(--on-sky-mut);white-space:nowrap;padding-right:16px;transition:color .25s}
.ticker-inhoud a:hover{color:var(--on-sky)}
.ticker-inhoud a b{color:var(--beam-lt);font-weight:400}
.ticker-inhoud .sep{color:var(--merk);padding-right:16px}
@keyframes tik{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-inhoud{animation:none}.ticker-baan{overflow-x:auto;mask-image:none}.live-dot i,.ticker-label i,.teller-label .pols{animation:none}.scherm .thumb{animation:none;transform:scale(1.04)}}

/* ============ SECTIES ============ */
section.blok{padding:clamp(72px,10vh,120px) 0;position:relative}
.sectiekop{display:flex;align-items:baseline;gap:24px;margin-bottom:clamp(32px,5vh,50px);flex-wrap:wrap}
.sectiekop .kicker{transform:translateY(-6px)}
.sectiekop h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.8rem,6vw,4.8rem);line-height:.92;letter-spacing:.01em}
.sectiekop .rechts{margin-left:auto;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sectiekop .rechts a{color:var(--accent-lt);transition:color .25s}
.sectiekop .rechts a:hover{color:var(--text)}
/* Lees-kop met Iqra-kalligrafie (اقرأ = "Lees" — het eerste geopenbaarde woord) */
.lees-kop{display:flex;align-items:center;gap:clamp(18px,3vw,38px);margin-bottom:clamp(32px,5vh,50px);flex-wrap:wrap}
.lees-kop .iqra-art{font-family:'IqraKalligrafie','Amiri',serif;font-weight:700;font-size:clamp(3.6rem,8vw,6.6rem);line-height:1;color:var(--accent);padding:0 .12em .06em 0;position:relative}
html[data-theme="night"] .lees-kop .iqra-art{text-shadow:0 0 34px color-mix(in srgb,var(--accent) 55%,transparent)}
.lees-kop .lees-kop-tekst{display:flex;flex-direction:column;gap:8px}
.lees-kop .lees-kop-tekst .kicker{margin:0}
.lees-kop h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.8rem,6vw,4.8rem);line-height:.9;letter-spacing:.01em}
.lees-kop .rechts{margin-left:auto;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lees-kop .rechts a{color:var(--accent-lt);transition:color .25s}
.lees-kop .rechts a:hover{color:var(--text)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============ LIDMAATSCHAP-BAND (voorop) ============ */
#ledenband{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--merk),#0D0D8A 60%,#080845);color:#fff}
#ledenband::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 340px at 88% -20%,rgba(159,178,255,.35),transparent 60%);pointer-events:none}
.ledenband-in{position:relative;display:flex;align-items:center;gap:clamp(24px,5vw,64px);padding:clamp(34px,5vw,52px) 0;flex-wrap:wrap}
.ledenband-teller{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.ledenband-teller .num{font-family:var(--font-display);font-size:clamp(3.4rem,8vw,6rem);line-height:.85;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.ledenband-teller .lbl{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.ledenband-teller .lbl .pols{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:8px;animation:pulse 1.6s infinite;vertical-align:middle}
.ledenband-tekst{flex:1;min-width:260px}
.ledenband-tekst h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.7rem,3vw,2.6rem);line-height:.98;letter-spacing:.01em;margin-bottom:12px}
.ledenband-tekst p{color:rgba(255,255,255,.85);max-width:46ch;margin-bottom:22px}
.ledenband .knop.wit{background:#fff;color:var(--merk);border-color:transparent}
.ledenband .knop.wit:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(0,0,0,.5)}

/* ============ VIDEO-KAARTEN ============ */
.rail-wrap{position:relative}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 6px 24px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex-shrink:0}
.rail-pijlen{position:absolute;top:-70px;right:0;display:flex;gap:10px}
.rail-pijl{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s;background:var(--surface)}
.rail-pijl:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.rail-pijl svg{width:16px;height:16px;stroke:var(--text);fill:none;stroke-width:2}
#kijk .sectiekop .rechts{margin-right:118px} /* houdt "Alle video's" vrij van de rail-pijlen */
.vcard{width:min(360px,82vw);display:flex;flex-direction:column;gap:14px}
.vcard .vthumb{position:relative;aspect-ratio:16/9;border-radius:var(--rand);overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.vcard .vthumb img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.vcard:hover .vthumb img{transform:scale(1.07)}
.vcard .vthumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(4,6,15,.55));opacity:0;transition:opacity .35s}
.vcard:hover .vthumb::after{opacity:1}
.vchip{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;background:rgba(4,6,15,.62);color:#fff;border:1px solid var(--sky-line);padding:5px 11px;border-radius:100px;backdrop-filter:blur(6px)}
.vplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.86);z-index:2;width:60px;height:60px;border-radius:50%;background:rgba(4,6,15,.42);border:1px solid rgba(243,245,252,.6);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .35s,transform .35s}
.vcard:hover .vplay{opacity:1;transform:translate(-50%,-50%) scale(1)}
.vplay svg{width:18px;height:18px;fill:#fff;margin-left:3px}
.vduur{position:absolute;bottom:12px;right:12px;z-index:2;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;background:rgba(4,6,15,.72);color:#fff;padding:4px 9px;border-radius:5px}
.vcard .vmeta .vserie{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:6px}
.vcard .vmeta .vtitel{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:1.28rem;line-height:1.02;letter-spacing:.01em;transition:color .25s}
.vcard:hover .vmeta .vtitel{color:var(--accent-lt)}

/* categorie-kaarten */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.cat-kaart{position:relative;border:1px solid var(--line);border-radius:var(--rand);padding:24px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;gap:8px;min-height:140px;justify-content:flex-end;transition:border-color .35s,transform .35s}
.cat-kaart:hover{border-color:var(--accent);transform:translateY(-4px)}
.cat-kaart .c-titel{font-family:var(--font-display);text-transform:uppercase;font-size:1.35rem;letter-spacing:.02em}
.cat-kaart .c-n{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cat-kaart .c-pijl{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:background .3s,transform .3s}
.cat-kaart:hover .c-pijl{background:var(--merk);transform:rotate(45deg);border-color:transparent}
.cat-kaart .c-pijl svg{width:13px;height:13px;stroke:var(--text);fill:none;stroke-width:2}
.cat-kaart:hover .c-pijl svg{stroke:#fff}

/* ============ LUISTER ============ */
#luister .console{display:grid;grid-template-columns:.92fr 1.08fr;gap:20px;align-items:stretch}
.koran-kaart{position:relative;border-radius:var(--rand);overflow:hidden;border:1px solid var(--line);background:radial-gradient(600px 400px at 20% 0%,color-mix(in srgb,var(--merk) 55%,transparent),transparent 65%),var(--surface);padding:clamp(28px,4vw,42px);display:flex;flex-direction:column;justify-content:space-between;min-height:400px;color:#fff}
html[data-theme="day"] .koran-kaart{background:linear-gradient(165deg,var(--merk),#12128f);border-color:transparent}
.koran-kaart .kicker{color:var(--beam-lt);margin-bottom:16px}
.koran-kaart .kicker::before{background:var(--beam-lt);box-shadow:0 0 12px var(--beam)}
.koran-kaart h3{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.4rem,4vw,3.4rem);line-height:.92;margin-bottom:12px}
.koran-kaart p{color:rgba(243,245,252,.8);max-width:38ch;margin-bottom:24px}
.equalizer{display:flex;align-items:flex-end;gap:5px;height:54px;margin-bottom:28px}
.equalizer i{width:5px;border-radius:3px;background:linear-gradient(180deg,var(--beam-lt),var(--beam));animation:eq 1.1s ease-in-out infinite alternate}
.equalizer i:nth-child(2n){animation-delay:.15s}.equalizer i:nth-child(3n){animation-delay:.3s}.equalizer i:nth-child(4n){animation-delay:.45s}.equalizer i:nth-child(5n){animation-delay:.6s}
@keyframes eq{from{height:16%}to{height:100%}}
@media (prefers-reduced-motion:reduce){.equalizer i{animation:none}.equalizer i:nth-child(odd){height:45%}.equalizer i:nth-child(even){height:80%}.equalizer i:nth-child(3n){height:60%}}
.koran-kaart .knop.rand{border-color:rgba(255,255,255,.4);color:#fff}
.koran-kaart .knop.rand:hover{background:#fff;color:var(--merk)}
.podcast-lijst{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--rand);overflow:hidden;background:var(--surface)}
.podcast-kop{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 26px;border-bottom:1px solid var(--line)}
.platforms{display:flex;gap:8px;flex-wrap:wrap}
.platform{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);border-radius:100px;padding:5px 12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
a.platform{transition:border-color .25s,color .25s,background .25s}
a.platform:hover{border-color:var(--accent);color:var(--text)}
.platform.spotify{border-color:color-mix(in srgb,#1DB954 55%,transparent);color:#1DB954}
.platform.spotify:hover{background:color-mix(in srgb,#1DB954 15%,transparent);border-color:#1DB954;color:#1DB954}
.platform.spotify svg{width:11px;height:11px;fill:currentColor}
.aflevering{display:flex;align-items:center;gap:18px;padding:16px 26px;border-bottom:1px solid var(--line);transition:background .25s}
.aflevering:last-child{border-bottom:0}
.aflevering:hover{background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.afspeel{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s}
.aflevering:hover .afspeel{background:var(--merk);border-color:transparent}
.afspeel svg{width:12px;height:12px;fill:var(--text);margin-left:2px}
.aflevering:hover .afspeel svg{fill:#fff}
.afl-tekst{min-width:0;flex:1}
.afl-titel{display:block;font-weight:600;font-size:.98rem;line-height:1.35}
.afl-serie{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.afl-duur{flex-shrink:0;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;color:var(--accent-lt)}

/* ============ LEES ============ */
.voorpagina{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(26px,4vw,52px);align-items:start}
.hoofdartikel{display:block;position:relative;border:1px solid var(--line);border-radius:var(--rand);overflow:hidden;background:var(--surface);transition:border-color .35s,transform .35s;box-shadow:var(--kaart-schaduw)}
.hoofdartikel:hover{border-color:var(--accent);transform:translateY(-4px)}
.hoofdartikel .ha-beeld{position:relative;aspect-ratio:16/9;overflow:hidden}
.hoofdartikel .ha-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hoofdartikel:hover .ha-beeld img{transform:scale(1.05)}
.hoofdartikel .ha-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(4,6,15,.35))}
.hoofdartikel .ha-tekst{padding:clamp(30px,5vw,44px)}
.hoofdartikel .a-datum{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;color:var(--accent-lt);text-transform:uppercase}
.hoofdartikel h3{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1;letter-spacing:.01em;margin:14px 0 16px}
.hoofdartikel p{color:var(--muted);max-width:54ch}
.hoofdartikel .lees-verder{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-lt)}
.hoofdartikel .lees-verder svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .3s}
.hoofdartikel:hover .lees-verder svg{transform:translateX(5px)}
.nieuws-lijst{display:flex;flex-direction:column;gap:2px}
.nieuws-item{display:flex;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);transition:transform .3s}
.nieuws-item:hover{transform:translateX(6px)}
.nieuws-item .ni-beeld{flex-shrink:0;width:92px;height:66px;border-radius:9px;overflow:hidden;border:1px solid var(--line)}
.nieuws-item .ni-beeld img{width:100%;height:100%;object-fit:cover}
.nieuws-item .a-datum{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.nieuws-item h4{font-weight:600;font-size:1rem;line-height:1.3;margin-top:5px;transition:color .25s}
.nieuws-item:hover h4{color:var(--accent-lt)}
.columns-strip{margin-top:clamp(40px,6vh,60px)}
.columns-strip .strip-kop{display:flex;align-items:baseline;gap:18px;margin-bottom:22px}
.columns-strip .strip-kop h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.7rem;letter-spacing:.02em}
.columns-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.column-kaart{border:1px solid var(--line);border-radius:var(--rand);padding:24px;background:var(--surface);display:flex;flex-direction:column;gap:12px;transition:border-color .3s,transform .3s}
.column-kaart:hover{border-color:var(--accent);transform:translateY(-4px)}
.column-kaart .c-label{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-lt)}
.column-kaart h4{font-weight:600;font-size:1.05rem;line-height:1.4}
.column-kaart .c-voet{margin-top:auto;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}

/* ============ OVER ============ */
.motto{text-align:center;padding:clamp(24px,5vh,56px) 0;position:relative}
.motto .arabisch{font-size:clamp(1.1rem,2.4vw,1.7rem);color:var(--accent-lt);letter-spacing:.06em;margin-bottom:24px;line-height:1.9}
.motto h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.8rem,7vw,6rem);line-height:.94;letter-spacing:.005em}
.motto h2 .accent{color:var(--accent)}
.motto p{max-width:60ch;margin:26px auto 0;color:var(--muted);font-size:1.06rem}
.org-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(40px,6vh,64px)}
.org-kaart{border:1px solid var(--line);border-radius:var(--rand);padding:26px;background:var(--surface)}
.org-kaart .o-rol{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:14px}
.org-kaart .o-naam{font-weight:600;font-size:1.06rem;line-height:1.4}
.org-kaart p{color:var(--muted);font-size:.88rem;margin-top:6px}
.org-kop{text-align:center;margin-top:clamp(48px,7vh,76px)}
.org-kop .kicker{margin-bottom:12px}
.org-kop h3{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1;letter-spacing:.01em}
.o-lijst{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.o-lijst li{color:var(--muted);font-size:.94rem;line-height:1.35;padding-left:16px;position:relative}
.o-lijst li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--accent-lt)}

/* ============ WORD LID (slot) ============ */
#lid{position:relative;overflow:hidden}
.lid-kader{position:relative;border:1px solid var(--line);border-radius:calc(var(--rand) + 8px);padding:clamp(38px,6vw,72px);text-align:center;overflow:hidden;background:var(--surface);box-shadow:var(--kaart-schaduw)}
.lid-kader::before{content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:520px;height:260px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 30%,transparent),transparent);pointer-events:none}
.lid-kader .kicker{justify-content:center;margin-bottom:20px}
.lid-kader h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.4rem,5.5vw,4.4rem);line-height:.96;margin-bottom:18px}
.lid-kader>p{max-width:54ch;margin:0 auto 32px;color:var(--muted);font-size:1.05rem}
.lid-punten{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:36px}
.lid-punt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:9px 18px;display:inline-flex;align-items:center;gap:9px}
.lid-punt::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.lid-kader .knop.vol{padding:16px 36px;font-size:.78rem}

/* ============ FOOTER (altijd donker) ============ */
footer.site{border-top:1px solid var(--sky-line);padding:clamp(44px,7vh,68px) 0 34px;background:#030509;color:var(--on-sky)}
.voet-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr 1fr;gap:34px;margin-bottom:44px}
footer .logo{margin-bottom:16px}
footer .logo .merk-teken{color:var(--beam)}
footer .logo-naam b{color:var(--beam-lt)}
.missie-kort{color:var(--on-sky-mut);font-size:.9rem;max-width:34ch}
.voet-kop{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--beam-lt);margin-bottom:16px}
.voet-lijst{display:flex;flex-direction:column;gap:10px}
.voet-lijst a{color:var(--on-sky-mut);font-size:.92rem;transition:color .25s}
.voet-lijst a:hover{color:var(--on-sky)}
.voet-onder{border-top:1px solid rgba(120,140,255,.1);padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-sky-mut)}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid var(--sky-line);display:flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s}
.socials a:hover{border-color:var(--beam);background:rgba(77,109,255,.12)}
.socials svg{width:15px;height:15px;fill:var(--on-sky-mut);transition:fill .3s}
.socials a:hover svg{fill:var(--on-sky)}

/* ============ RESPONSIVE ============ */
@media (max-width:1020px){
  .hero-inhoud{grid-template-columns:1fr;align-items:start;padding-top:118px;gap:36px}
  .scherm{transform:none;max-width:620px}
  .voorpagina{grid-template-columns:1fr}
  #luister .console{grid-template-columns:1fr}
  .koran-kaart{min-height:320px}
  .cat-grid{grid-template-columns:1fr 1fr}
  .columns-grid,.org-grid{grid-template-columns:1fr 1fr}
  .voet-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  nav.hoofd{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:32px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;z-index:-1}
  @supports (backdrop-filter:blur(1px)){ body.menu-open nav.hoofd{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(18px)} }
  nav.hoofd a{font-size:1.05rem}
  /* het mobiele menu is een overlay in paginakleur — sky-tinten hier weer terugdraaien */
  html[data-theme="day"] header.site:not(.vast) nav.hoofd a{color:var(--muted)}
  html[data-theme="day"] header.site:not(.vast) nav.hoofd a:hover,
  html[data-theme="day"] header.site:not(.vast) nav.hoofd a.actief{color:var(--text)}
  body.menu-open nav.hoofd{opacity:1;visibility:visible;z-index:99}
  .menu-knop{display:block;z-index:101}
  header .knop.vol{display:none}
  .cat-grid,.columns-grid,.org-grid,.voet-grid{grid-template-columns:1fr}
  .rail-pijlen{display:none}
  .sectiekop .rechts,.lees-kop .rechts{margin-left:0}
  .lees-kop{gap:14px}
  .lees-kop .iqra-art{font-size:clamp(3rem,16vw,4.2rem)}
  #kijk .sectiekop .rechts{margin-right:0}
  .ticker-label{padding:12px 14px}
  .teller-scheid{display:none}
  .hero-cta{gap:16px}
  .ledenband-in{flex-direction:column;align-items:flex-start}
}


/* ---------------------------------------------------------------------------
   Alleen voor de Kijk-pagina: de hero, de filterbalk en het videoraster.
   ------------------------------------------------------------------------- */

/* KIJK-HERO */
#khero{position:relative;padding:128px var(--pad) 40px;max-width:1300px;margin:0 auto;overflow:hidden}

#khero .khero-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,60px);align-items:center}

#khero .khero-tekst .kicker{margin-bottom:20px}

#khero h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(3.6rem,9vw,7rem);line-height:.9;letter-spacing:.01em;margin-bottom:18px}

#khero p{color:var(--muted);max-width:40ch;margin-bottom:26px}

.khero-feat{position:relative;aspect-ratio:16/9;border-radius:var(--rand);overflow:hidden;border:1px solid var(--line);box-shadow:var(--kaart-schaduw);display:block}

.khero-feat img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}

.khero-feat:hover img{transform:scale(1.05)}

.khero-feat .filmwaas{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(4,6,15,.82))}

.khero-feat .live-dot{position:absolute;top:15px;right:15px;display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.22em;color:#fff;background:rgba(4,6,15,.55);padding:6px 12px;border-radius:100px;border:1px solid var(--sky-line)}

.khero-feat .speel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:rgba(4,6,15,.42);border:1px solid rgba(243,245,252,.6);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;transition:background .3s,transform .3s}

.khero-feat:hover .speel{background:var(--merk);border-color:transparent;transform:translate(-50%,-50%) scale(1.08)}

.khero-feat .speel svg{width:24px;height:24px;fill:#fff;margin-left:4px}

.khero-feat .feat-info{position:absolute;left:20px;bottom:18px;right:20px}

.khero-feat .feat-serie{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--beam-lt);margin-bottom:6px}

.khero-feat .feat-titel{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1;color:#fff}

/* FILTER */
.filterbalk{position:sticky;top:66px;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.filterbalk-in{display:flex;gap:10px;overflow-x:auto;padding:16px var(--pad);max-width:1300px;margin:0 auto;scrollbar-width:none}

.filterbalk-in::-webkit-scrollbar{display:none}

.chip{flex-shrink:0;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:10px 18px;border-radius:100px;border:1px solid var(--line);color:var(--muted);transition:all .25s;cursor:pointer}

.chip:hover{color:var(--text);border-color:var(--accent)}

.chip.actief{background:var(--merk);border-color:transparent;color:#fff}

/* GRID */
#catalogus{padding:clamp(40px,6vh,72px) 0 clamp(72px,10vh,120px)}

.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 20px}

.vcard.verborgen{display:none}

.leeg{text-align:center;color:var(--muted);font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:60px 0;display:none}

/* lidband klein */
#kijk-lid{background:linear-gradient(120deg,var(--merk),#0D0D8A 60%,#080845);color:#fff}

.kijk-lid-in{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:clamp(30px,4vw,44px) 0;flex-wrap:wrap}

.kijk-lid-in h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1;letter-spacing:.01em}

.kijk-lid-in p{color:rgba(255,255,255,.82);margin-top:8px;max-width:44ch}

#kijk-lid .knop.wit{background:#fff;color:var(--merk);border-color:transparent}

#kijk-lid .knop.wit:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(0,0,0,.5)}
/* ---------------------------------------------------------------------------
   Het aantal bij een filterknop. Toegevoegd bij het omzetten naar WordPress:
   de knoppen worden nu uit de echte inhoud gebouwd, en dan is het aantal
   gratis informatie die meteen laat zien waar de catalogus zwaar is.
   ------------------------------------------------------------------------- */

.chip-aantal{
  display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;
  background:color-mix(in srgb,var(--text) 10%,transparent);
  font-size:11px;font-weight:700;line-height:1.5;vertical-align:1px;
}
.chip.actief .chip-aantal{background:rgba(255,255,255,.22)}

/* ===========================================================================
   ARTIKEL, ARCHIEF, ZOEKEN EN 404

   Het prototype tekende alleen de voorpagina en de Kijk-pagina. Alles hieronder
   is er bij het omzetten naar WordPress bij gekomen, opgebouwd uit dezelfde
   variabelen en maten als de rest, zodat een artikel niet aanvoelt als een
   andere site dan de voorpagina.
   =========================================================================== */

.smal{max-width:760px;margin-inline:auto}

/* --- kop van een artikel ------------------------------------------------- */

.artikel-kop{padding:max(calc(var(--pad) + 40px),var(--kop-vrij)) 0 0}
.artikel-kop .kruimels{
  font-size:13px;color:var(--muted);margin-bottom:18px;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
.artikel-kop .kruimels a{color:var(--muted);text-decoration:none}
.artikel-kop .kruimels a:hover{color:var(--accent-lt)}
.artikel-kop h1{
  font-family:var(--font-display);font-weight:400;letter-spacing:.01em;
  font-size:clamp(30px,5.2vw,58px);line-height:1.04;margin:0 0 18px;
}
.artikel-meta{
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  font-size:13.5px;color:var(--muted);
  padding-bottom:26px;border-bottom:1px solid var(--line);
}
.artikel-meta .auteur{display:flex;align-items:center;gap:9px;color:var(--text);font-weight:600}
.artikel-meta .auteur img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.artikel-meta a{color:inherit;text-decoration:none}
.artikel-meta a:hover{color:var(--accent-lt)}

.artikel-beeld{
  margin:30px 0 0;border-radius:var(--rand);overflow:hidden;
  box-shadow:var(--kaart-schaduw);
}
.artikel-beeld img{width:100%;height:auto;display:block}
.artikel-beeld figcaption{
  padding:11px 16px;font-size:12.5px;color:var(--muted);background:var(--surface);
}

/* --- de tekst zelf ------------------------------------------------------- */

.artikel-inhoud{padding:34px 0 10px;font-size:17.5px;line-height:1.75}
.artikel-inhoud > *{margin:0 0 1.15em}
.artikel-inhoud h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(23px,3vw,32px);line-height:1.18;margin:1.9em 0 .55em;
}
.artikel-inhoud h3{font-size:21px;font-weight:700;margin:1.6em 0 .5em}
.artikel-inhoud a{color:var(--accent-lt);text-underline-offset:3px}
.artikel-inhoud img{max-width:100%;height:auto;border-radius:var(--rand)}
.artikel-inhoud figure{margin:1.8em 0}
.artikel-inhoud figcaption{font-size:13px;color:var(--muted);margin-top:9px}
.artikel-inhoud ul,.artikel-inhoud ol{padding-left:1.3em}
.artikel-inhoud li{margin-bottom:.45em}
.artikel-inhoud blockquote{
  margin:1.8em 0;padding:4px 0 4px 24px;border-left:3px solid var(--accent);
  font-size:20px;line-height:1.5;color:var(--text);
}
.artikel-inhoud blockquote p:last-child{margin-bottom:0}
.artikel-inhoud iframe{max-width:100%;border-radius:var(--rand)}
.artikel-inhoud table{width:100%;border-collapse:collapse;font-size:15px}
.artikel-inhoud th,.artikel-inhoud td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left}

.artikel-voet{
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:space-between;
}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tags a{
  font-size:12.5px;padding:5px 12px;border-radius:999px;text-decoration:none;
  border:1px solid var(--line);color:var(--muted);
}
.tags a:hover{border-color:var(--accent);color:var(--accent-lt)}

/* --- lijsten: archief, zoeken, verder lezen ------------------------------ */

.lijst-kop{padding:max(calc(var(--pad) + 40px),var(--kop-vrij)) 0 6px}
.lijst-kop h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(30px,5vw,54px);line-height:1.06;margin:0 0 10px;
}
.lijst-kop p{color:var(--muted);margin:0;max-width:60ch}

.kaartlijst{
  display:grid;gap:26px;padding:34px 0 10px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
}
.kaart{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rand);overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s;
}
.kaart:hover{transform:translateY(-4px);border-color:var(--accent)}
.kaart-beeld{aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.kaart-beeld img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.kaart:hover .kaart-beeld img{transform:scale(1.045)}
.kaart-tekst{padding:17px 19px 21px;display:flex;flex-direction:column;gap:8px;flex:1}
.kaart-tekst .a-datum{font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.kaart-tekst h3{font-size:18.5px;line-height:1.3;margin:0;font-weight:700}
.kaart-tekst p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55}

/* --- paginering ---------------------------------------------------------- */

.paginering{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;padding:44px 0 10px}
.paginering .page-numbers{
  min-width:42px;padding:9px 13px;text-align:center;text-decoration:none;
  border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:14px;
  transition:border-color .25s,background .25s;
}
.paginering .page-numbers:hover{border-color:var(--accent)}
.paginering .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.paginering .dots{border-color:transparent}

/* --- zoekveld ------------------------------------------------------------ */

.zoekveld{display:flex;gap:10px;max-width:520px;margin:22px 0 0}
.zoekveld input[type=search]{
  flex:1;padding:13px 17px;font:inherit;font-size:15px;color:var(--text);
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
}
.zoekveld input[type=search]:focus{outline:none;border-color:var(--accent)}

/* --- niets gevonden / 404 ------------------------------------------------ */

.leegblok{padding:clamp(60px,12vh,130px) 0;text-align:center}
.leegblok .grootcijfer{
  font-family:var(--font-display);font-size:clamp(70px,16vw,170px);
  line-height:.9;color:var(--accent);opacity:.22;margin-bottom:8px;
}
.leegblok h1{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,4.4vw,44px);margin:0 0 14px}
.leegblok p{color:var(--muted);max-width:52ch;margin:0 auto 26px}

/* --- auteur -------------------------------------------------------------- */

.auteur-kop{
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  padding:max(calc(var(--pad) + 40px),var(--kop-vrij)) 0 0;
}
.auteur-kop img{width:82px;height:82px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.auteur-kop h1{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,4.4vw,44px);margin:0 0 7px}
.auteur-kop p{color:var(--muted);margin:0;max-width:58ch;font-size:15px}

/* --- gewone pagina ------------------------------------------------------- */

.pagina-inhoud{padding:34px 0 10px;font-size:16.5px;line-height:1.72}
.pagina-inhoud > *{margin:0 0 1.1em}
.pagina-inhoud h2{font-family:var(--font-display);font-weight:400;font-size:clamp(22px,3vw,30px);margin:1.8em 0 .5em}
.pagina-inhoud h3{font-size:20px;font-weight:700;margin:1.5em 0 .45em}
.pagina-inhoud a{color:var(--accent-lt)}
.pagina-inhoud img{max-width:100%;height:auto;border-radius:var(--rand)}
.pagina-inhoud ul,.pagina-inhoud ol{padding-left:1.3em}

/* Gravity Forms staat op Word lid, Contact en de formulierpagina's. Alleen het
   hoogstnodige, zodat de velden bij de rest passen zonder de plugin te vechten. */
.pagina-inhoud .gform_wrapper input[type=text],
.pagina-inhoud .gform_wrapper input[type=email],
.pagina-inhoud .gform_wrapper input[type=tel],
.pagina-inhoud .gform_wrapper input[type=number],
.pagina-inhoud .gform_wrapper select,
.pagina-inhoud .gform_wrapper textarea{
  background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;font:inherit;
}
.pagina-inhoud .gform_wrapper input:focus,
.pagina-inhoud .gform_wrapper textarea:focus,
.pagina-inhoud .gform_wrapper select:focus{outline:none;border-color:var(--accent)}

/* ---------------------------------------------------------------------------
   Veelgestelde vragen. <details>/<summary> in plaats van een JavaScript-accordeon:
   werkt zonder script, is met het toetsenbord te bedienen en door een schermlezer
   te begrijpen.
   ------------------------------------------------------------------------- */

.vragen{margin:26px 0 8px;border-top:1px solid var(--line)}
.vraag{border-bottom:1px solid var(--line)}
.vraag summary{
  list-style:none;cursor:pointer;padding:19px 44px 19px 0;position:relative;
  font-size:17px;font-weight:600;line-height:1.4;
  transition:color .25s;
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary:hover{color:var(--accent-lt)}
.vraag summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.vraag summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;
}
.vraag[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.vraag[open] summary{color:var(--accent-lt)}
.vraag .antwoord{padding:0 10px 22px 0;color:var(--muted);font-size:16px;line-height:1.7}
.vraag .antwoord > *:last-child{margin-bottom:0}
.vraag .antwoord a{color:var(--accent-lt)}


/* De voet kreeg een vijfde kolom (rubrieken) en een regel met de kleine
   lettertjes. Onder 1100px wordt het twee kolommen, op de telefoon één. */
@media (max-width:1100px){ .voet-grid{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .voet-grid{grid-template-columns:1fr;gap:28px} }
.voet-klein{display:flex;gap:18px;flex-wrap:wrap}
.voet-klein a{color:var(--on-sky-mut);transition:color .25s}
.voet-klein a:hover{color:var(--on-sky)}

/* ---------------------------------------------------------------------------
   Luister: de Koran-speler en de podcastafleveringen.
   ------------------------------------------------------------------------- */

.koran{padding:40px 0 10px}
.koran-kop{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.koran-kop h2{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,4vw,40px);margin:0;display:flex;align-items:center;gap:10px}
.live-punt{width:9px;height:9px;border-radius:50%;background:var(--live);
  box-shadow:0 0 0 0 var(--live);animation:io-pols 2s infinite}
@keyframes io-pols{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 70%,transparent)}
  70%{box-shadow:0 0 0 11px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.koran-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:30px;align-items:start}
.koran-speler{border-radius:var(--rand);overflow:hidden;aspect-ratio:16/9;
  box-shadow:var(--kaart-schaduw);background:var(--surface-2)}
.koran-speler iframe{width:100%;height:100%;border:0;display:block}
.vers{margin:0;padding:26px 28px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rand)}
.vers-ar{font-family:'IqraKalligrafie',serif;font-size:clamp(20px,2.6vw,27px);
  line-height:2;margin:0 0 18px;color:var(--text)}
.vers-nl{color:var(--muted);font-size:15.5px;line-height:1.7;margin:0 0 14px}
.vers cite{font-style:normal;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-lt)}

.podcast{padding:48px 0 10px}
.podcast-kop-groot{display:flex;justify-content:space-between;align-items:flex-end;
  gap:22px;flex-wrap:wrap;margin-bottom:26px}
.podcast-kop-groot h2{font-family:var(--font-display);font-weight:400;
  font-size:clamp(24px,3.6vw,36px);margin:0}
.podcast-kop-groot .platforms{display:flex;gap:10px;flex-wrap:wrap}

.afleveringen{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.aflevering-kaart{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rand);padding:20px 22px 22px;
  transition:border-color .3s}
.aflevering-kaart:hover{border-color:var(--accent)}
.aflevering-kaart h3{font-size:17px;line-height:1.35;margin:0 0 6px;font-weight:700}
.aflevering-kaart .a-datum{font-size:12px;color:var(--muted);letter-spacing:.04em;
  text-transform:uppercase;margin:0 0 14px}
.aflevering-kaart audio{width:100%;height:36px}

@media (max-width:820px){
  .koran-grid{grid-template-columns:1fr}
}

/* ===========================================================================
   VIDEOSPELER OP DE SITE ZELF
   Een laag over de pagina in plaats van een sprong naar YouTube.
   =========================================================================== */

.speler-laag{
  position:fixed;inset:0;z-index:9000;display:flex;align-items:center;
  justify-content:center;padding:clamp(14px,4vw,48px);
  background:rgba(4,6,15,.86);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s;
}
.speler-laag.aan{opacity:1;visibility:visible}
body.speler-open{overflow:hidden}

.speler-doos{width:min(1100px,100%);transform:translateY(12px) scale(.985);
  transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.speler-laag.aan .speler-doos{transform:none}

.speler-balk{display:flex;align-items:center;gap:16px;justify-content:space-between;
  margin-bottom:12px}
.speler-titel{color:var(--on-sky);font-weight:700;font-size:15.5px;line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.speler-sluit{flex:0 0 auto;width:38px;height:38px;border-radius:50%;cursor:pointer;
  background:rgba(243,245,252,.1);border:1px solid rgba(243,245,252,.22);
  display:flex;align-items:center;justify-content:center;transition:background .25s}
.speler-sluit:hover{background:rgba(243,245,252,.2)}
.speler-sluit svg{width:17px;height:17px;fill:none;stroke:var(--on-sky);stroke-width:2;
  stroke-linecap:round}
.speler-sluit:focus-visible{outline:2px solid var(--beam-lt);outline-offset:3px}

.speler-kader{aspect-ratio:16/9;border-radius:var(--rand);overflow:hidden;
  background:#000;box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.speler-kader iframe{width:100%;height:100%;border:0;display:block}

@media (prefers-reduced-motion:reduce){
  .speler-laag,.speler-doos{transition:none}
}

/* ---------------------------------------------------------------------------
   Verholpen na het bekijken van het ontwerp in de browser.
   ------------------------------------------------------------------------- */

/* 1. De titel op een videokaart liep buiten de kaart. Nu netjes afgekapt na
      twee regels, met genoeg hoogte zodat kaarten even lang blijven. */
.vcard .vtitel{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* 2. De kaarten in de Over-sectie sneden hun laatste regel af. */
#over .kaart-persoon,
#over .rol-kaart,
#over [class*="persoon"],
#over ul{overflow:visible}
#over li{line-height:1.55}

/* 3. "leden en groeiend" viel in de hero uit elkaar over drie regels. */
.teller-label{white-space:nowrap}

/* 4. De zendtitel brak op middelgrote schermen naar drie regels. */
@media (min-width:900px){
  .zendtitel{white-space:nowrap}
}

/* ===========================================================================
   WORD LID

   De belangrijkste pagina van de site. In het oude ontwerp was dit een kaal
   formulier; hier staat eerst waaróm, en dan pas de velden. De Gravity
   Forms-opmaak is bijgewerkt zodat de velden bij de rest van de site passen —
   in de browser waren het witte blokken op een donkere pagina.
   =========================================================================== */

.lid-hero{
  position:relative;padding:max(calc(var(--pad) + 54px),var(--kop-vrij)) 0 calc(var(--pad) + 10px);
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);overflow:hidden;
}
.lid-hero::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:70%;
  background:radial-gradient(60% 60% at 30% 40%,color-mix(in srgb,var(--beam) 26%,transparent),transparent 70%);
  pointer-events:none;
}
.lid-hero-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center}
.lid-hero-tekst h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(36px,6.4vw,74px);line-height:.98;margin:12px 0 20px;
}
.lid-pitch{font-size:clamp(16px,1.6vw,19px);line-height:1.65;color:var(--muted);max-width:44ch;margin:0 0 30px}

.lid-teller{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.lid-teller .num{font-family:var(--font-display);font-size:clamp(38px,5vw,58px);line-height:1;color:var(--accent-lt)}
.lid-teller .lbl{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

.lid-voordelen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.lid-voordelen li{display:flex;gap:18px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rand);
  padding:20px 22px;transition:border-color .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
.lid-voordelen li:hover{border-color:var(--accent);transform:translateX(3px)}
.lid-nr{flex:0 0 auto;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--accent-lt);padding-top:3px}
.lid-voordelen h3{font-size:16.5px;margin:0 0 5px;font-weight:700;line-height:1.35}
.lid-voordelen p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}

.lid-formulier{padding:clamp(44px,7vw,78px) 0}
.lid-formulier-in{max-width:720px;margin-inline:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rand);
  padding:clamp(26px,4vw,46px);box-shadow:var(--kaart-schaduw)}
.lid-formulier-kop{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.lid-formulier-kop h2{font-family:var(--font-display);font-weight:400;
  font-size:clamp(25px,3.4vw,36px);margin:0 0 8px}
.lid-formulier-kop p{margin:0;color:var(--muted);font-size:15px}
.lid-klein{margin:24px 0 0;font-size:13px;color:var(--muted);line-height:1.6}
.lid-klein a{color:var(--accent-lt)}

/* --- Gravity Forms in het donkere ontwerp ------------------------------- */

.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper .gfield_label{color:var(--text);font-weight:600;font-size:14.5px;margin-bottom:7px}
.gform_wrapper .gfield_required{color:var(--live);font-weight:600}

.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=url],
.gform_wrapper input[type=number],
.gform_wrapper input[type=password],
.gform_wrapper select,
.gform_wrapper textarea{
  width:100%;background:var(--surface-2);color:var(--text);
  border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;font:inherit;font-size:15px;
  transition:border-color .22s,box-shadow .22s;
}
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder{color:var(--muted);opacity:.75}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
}
.gform_wrapper select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 55%,calc(100% - 13px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}

.gform_wrapper .gfield_description,
.gform_wrapper .gform_fileupload_rules,
.gform_wrapper .ginput_complex label{color:var(--muted);font-size:12.5px}

.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label{color:var(--text);font-size:14.5px;line-height:1.5}
.gform_wrapper input[type=checkbox],
.gform_wrapper input[type=radio]{
  width:17px;height:17px;accent-color:var(--accent);margin-right:9px;vertical-align:-3px}

.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_page_footer input[type=button],
.gform_wrapper .gform_page_footer input[type=submit],
.gform_wrapper button.gform_button{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;border:0;cursor:pointer;
  font:inherit;font-weight:700;font-size:15px;letter-spacing:.02em;
  padding:14px 30px;border-radius:999px;
  transition:background .25s,transform .25s cubic-bezier(.2,.8,.2,1);
}
.gform_wrapper .gform_footer input[type=submit]:hover,
.gform_wrapper button.gform_button:hover{background:var(--accent-lt);transform:translateY(-2px)}

.gform_wrapper .gform_validation_errors{
  background:color-mix(in srgb,var(--live) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--live) 45%,transparent);
  border-radius:10px;color:var(--text)}
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message{color:var(--live);font-size:13px}

@media (max-width:900px){
  .lid-hero-in{grid-template-columns:1fr;gap:34px}
}

/* De inhoud van de pagina Word lid bevat nog het Bootstrap-raster van het oude
   ontwerp: <div class="row py-4"><div class="col-md-5 offset-md-2">. In de
   bredere oude layout klopte dat, maar binnen deze kaart perste het formulier
   zich in 241 van de 720 pixels. Dat raster wordt hier opgeheven in plaats van
   dat de redactie-inhoud aangepast wordt. */
.lid-formulier-in .row{display:block;margin-left:0;margin-right:0}
.lid-formulier-in [class*="col-"]{
  width:100%;max-width:none;flex:none;margin-left:0;padding-left:0;padding-right:0;
}

/* Twee velden naast elkaar mogen niet in een smalle kolom kruipen. */
.gform_wrapper .gform_fields{grid-column-gap:18px;grid-row-gap:18px}
.gform_wrapper .gfield_label{white-space:normal;word-break:normal;hyphens:none}
.gform_wrapper .ginput_container_date input{min-width:0}
.gform_wrapper .gfield--type-date .ginput_container{display:flex;gap:8px;flex-wrap:wrap}

/* ===========================================================================
   ARTIKELPAGINA — herzien na het lezen van een echt artikel op een echt scherm
   =========================================================================== */

/* Leesvoortgang: een dun streepje bovenaan. Bij een lang stuk zie je zo hoever
   je bent, zonder dat er iets in de weg staat. */
.leesbalk{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;
  background:transparent;pointer-events:none}
.leesbalk span{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-lt));
  transition:width .1s linear}

.artikel-kop .kruimels .huidig{color:var(--text)}

.artikel-label{
  display:inline-block;margin-bottom:14px;padding:5px 13px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  color:var(--accent-lt);font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
}

/* Een aanloop naar het artikel: groter dan de rest, rustiger dan de kop. */
.artikel-intro{
  font-size:clamp(17px,1.9vw,20.5px);line-height:1.6;color:var(--muted);
  margin:0 0 26px;max-width:60ch;
}

.artikel-meta{gap:12px;row-gap:9px}
.meta-punt{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.6}
.artikel-meta .auteur img.auteur-foto{width:32px;height:32px;border-radius:50%;object-fit:cover}
.auteur-letters{
  width:32px;height:32px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent) 26%,transparent);
  color:var(--accent-lt);font-weight:700;font-size:14px;
}

/* Een vierkante foto vulde het hele scherm voordat de eerste zin in beeld kwam. */
.artikel-beeld{max-height:min(62vh,540px);overflow:hidden;position:relative}
.artikel-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.artikel-beeld figcaption{position:relative}

/* De eerste alinea wat groter, als overgang van intro naar lopende tekst. */
.artikel-inhoud > p:first-of-type{font-size:19px;line-height:1.7;color:var(--text)}

/* --- delen ---------------------------------------------------------------- */

.artikel-deel{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:34px;padding-top:24px;border-top:1px solid var(--line);
}
.deel-kop{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-right:4px}
.deel-knop{
  width:38px;height:38px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--muted);
  transition:border-color .25s,color .25s,transform .25s cubic-bezier(.2,.8,.2,1);
}
.deel-knop svg{width:16px;height:16px;fill:currentColor}
.deel-knop:hover{border-color:var(--accent);color:var(--accent-lt);transform:translateY(-2px)}
.artikel-deel .tags{margin-left:auto}

/* --- steunblok ------------------------------------------------------------ */

.steunblok{
  margin-top:34px;padding:clamp(24px,3.4vw,34px);
  border-radius:var(--rand);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,var(--surface)),var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.steunblok h2{font-family:var(--font-display);font-weight:400;
  font-size:clamp(21px,2.8vw,29px);margin:8px 0 8px;line-height:1.1}
.steunblok p{margin:0;color:var(--muted);font-size:15px;max-width:48ch;line-height:1.6}

/* --- verder lezen --------------------------------------------------------- */

.verder{margin-top:clamp(44px,6vw,78px);padding-top:clamp(30px,4vw,46px);
  border-top:1px solid var(--line)}
.verder .sectiekop{margin-bottom:8px}
.verder .kaartlijst{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}

@media (max-width:640px){
  .steunblok{flex-direction:column;align-items:flex-start}
  .artikel-deel .tags{margin-left:0;width:100%}
}

/* De tag onder een artikel kreeg nog de lichte pil van het ouder-thema.
   Hier hoort dezelfde rustige stijl als de rest. */
.artikel-deel .tags a,
.artikel-voet .tags a{
  background:transparent;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;font-size:12.5px;text-decoration:none;
  transition:border-color .25s,color .25s;
}
.artikel-deel .tags a:hover,
.artikel-voet .tags a:hover{border-color:var(--accent);color:var(--accent-lt);background:transparent}

/* ===========================================================================
   NIEUWSTYPOGRAFIE

   Het prototype zette élke kop in Anton, in kapitalen. Dat is een affichefont:
   prachtig voor "LEES" en "KIJK", maar een krantenkop van drie regels in
   kapitalen leest als een reclame en niet als nieuws. Zo doet geen enkele
   serieuze nieuwssite het — NYT, Guardian, BBC en Al Jazeera gebruiken allemaal
   een affichefont voor het merk en de rubrieken, en een gewoon leesbaar font
   voor de koppen zelf.

   Daarom hier de scheiding:
     Anton, kapitalen  -> merk, rubriekstitels, hero-zendtitel
     InterVar, zwaar   -> alle artikelkoppen
   =========================================================================== */

.hoofdartikel h3,
.kaart-tekst h3,
.nieuws-item h4,
.artikel-kop h1,
.lijst-kop h1,
.hn-titel,
.vcard .vtitel{
  font-family:var(--font-body);
  text-transform:none;
  letter-spacing:-.018em;
  font-weight:800;
}

/* De aanvoerder van de voorpagina. Groot genoeg om te leiden, niet zo groot
   dat hij de rest wegdrukt. */
.hoofdartikel h3{
  font-size:clamp(23px,2.3vw,31px);
  line-height:1.18;
  margin:0 0 12px;
}

.kaart-tekst h3{font-size:18px;line-height:1.32}
.nieuws-item h4{font-size:15.5px;line-height:1.38;font-weight:700}
.hn-titel{font-size:14.5px;line-height:1.38;font-weight:700}
.vcard .vtitel{font-size:15.5px;line-height:1.35;font-weight:700}

/* Op een artikelpagina mag de kop groot zijn, maar wel leesbaar. */
.artikel-kop h1{
  font-size:clamp(28px,3.6vw,46px);
  line-height:1.12;
  letter-spacing:-.022em;
}
.lijst-kop h1{font-size:clamp(26px,3.2vw,40px);line-height:1.12}

/* ---------------------------------------------------------------------------
   DE LEES-SECTIE OPNIEUW INGEDEELD

   Wat er misging: het beeld van het hoofdartikel groeide mee met de breedte,
   waardoor de linkerkolom op een breed scherm veel langer werd dan de lijst
   ernaast. Daaronder bleef een groot gat staan.

   Oplossing: het beeld krijgt een vaste verhouding en de twee kolommen worden
   even hoog uitgelijnd, met de lijst netjes verdeeld over die hoogte.
   ------------------------------------------------------------------------- */

.voorpagina{align-items:stretch}

.hoofdartikel{display:flex;flex-direction:column;height:100%}
.hoofdartikel .ha-beeld{
  aspect-ratio:16/9;
  flex:0 0 auto;
  overflow:hidden;
  display:block;
}
.hoofdartikel .ha-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.hoofdartikel .ha-tekst{flex:1;display:flex;flex-direction:column}
.hoofdartikel .ha-tekst p{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:16px;
}
.hoofdartikel .lees-verder{margin-top:auto}

.nieuws-lijst{display:flex;flex-direction:column;height:100%}
.nieuws-item{flex:1;align-items:center}
.nieuws-item .ni-beeld{aspect-ratio:16/10;flex:0 0 96px;overflow:hidden;border-radius:10px}
.nieuws-item .ni-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.nieuws-item h4{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* De rubriekskop stond over het logo heen te vallen doordat hij met een
   negatieve marge omhoog getrokken werd. */
.lees-kop,.sectiekop{scroll-margin-top:90px}

@media (max-width:860px){
  .voorpagina{grid-template-columns:1fr}
}

/* ===========================================================================
   DICHTERE NIEUWSOVERZICHTEN

   Gemeten op de Lees-pagina: twee kolommen, kaarten van 463px hoog (beeld 251 +
   tekst 211), 23 kaarten samen 5640px scrollen. Dat is een fotogalerij, geen
   nieuwsoverzicht. Op een sectiepagina van een nieuwssite wil je in één blik
   zien wát er is — dus meer koppen, kleinere beelden, minder lucht.
   =========================================================================== */

.kaartlijst{
  grid-template-columns:repeat(auto-fill,minmax(235px,1fr));
  gap:22px 20px;
  padding-top:26px;
}
.kaart-beeld{aspect-ratio:16/9}
.kaart-tekst{padding:13px 15px 16px;gap:5px}
.kaart-tekst .a-datum{font-size:11px;letter-spacing:.05em}
.kaart-tekst h3{font-size:16px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kaart-tekst p{
  font-size:13.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Rubriekskoppen kwamen onder de vaste kopbalk terecht; die is 75px hoog. */
.lees-kop,.lijst-kop,.sectiekop{padding-top:0}
.blok > .container > .lees-kop:first-child,
main > .container > .lijst-kop:first-child{margin-top:0}

/* ---------------------------------------------------------------------------
   Het lijstje naast het hoofdartikel op de voorpagina: strakker, en er passen
   meer koppen in dezelfde hoogte.
   ------------------------------------------------------------------------- */

.nieuws-lijst{gap:0}
.nieuws-item{
  padding:13px 0;gap:13px;
  border-bottom:1px solid var(--line);
}
.nieuws-item:last-child{border-bottom:0}
.nieuws-item .ni-beeld{flex:0 0 78px;border-radius:8px}
.nieuws-item h4{font-size:14.5px;line-height:1.35;-webkit-line-clamp:2}
.nieuws-item .a-datum{font-size:10.5px;letter-spacing:.06em;margin-bottom:3px;display:block}

/* ---------------------------------------------------------------------------
   Het hoofdartikel op een overzichtspagina ligt horizontaal: beeld links,
   tekst rechts. Staand nam het bijna een heel scherm in beslag voordat de
   tweede kop in beeld kwam.
   ------------------------------------------------------------------------- */

.lees-hoofd{
  display:grid;grid-template-columns:1.15fr 1fr;gap:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rand);overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .3s;margin-top:26px;
}
.lees-hoofd:hover{border-color:var(--accent)}
.lees-hoofd .ha-beeld{aspect-ratio:16/10;overflow:hidden}
.lees-hoofd .ha-beeld img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.lees-hoofd:hover .ha-beeld img{transform:scale(1.03)}
.lees-hoofd .ha-tekst{padding:clamp(20px,2.6vw,34px);display:flex;flex-direction:column;justify-content:center}
.lees-hoofd h2{
  font-family:var(--font-body);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(20px,2.1vw,28px);line-height:1.2;margin:10px 0 12px;
}
.lees-hoofd p{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 16px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

@media (max-width:760px){
  .lees-hoofd{grid-template-columns:1fr}
}

/* De kopbalk staat vast op 75px. Op een binnenpagina begint de inhoud daar
   direct onder, dus zonder deze ruimte schuift de rubriekskop eronder — op de
   Lees-pagina stond "LEES" over het logo heen. De voorpagina heeft dit niet
   nodig: de hero loopt daar bewust door tot achter de balk. */
main > .container > .lees-kop:first-child{padding-top:max(calc(var(--pad) + 46px),var(--kop-vrij))}

/* Het pijltje bij "Lees het artikel" kreeg in de nieuwe horizontale kaart geen
   maat mee en werd een zwarte driehoek van een paar honderd pixels. */
.lees-hoofd .lees-verder{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--accent-lt);font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
}
.lees-hoofd .lees-verder svg{
  width:17px;height:17px;flex:0 0 17px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.lees-hoofd:hover .lees-verder svg{transform:translateX(4px)}

/* ===========================================================================
   KIJK — opgezet als een omroepaanbod (NPO Start als voorbeeld)

   Programma's zijn dingen op zichzelf, geen filterknoppen: eerst een raster
   met de series, daarna per serie een rij afleveringen, en tot slot rijen voor
   wat niet bij een programma hoort.
   =========================================================================== */

.kijk-hero{
  position:relative;min-height:min(62vh,540px);display:flex;align-items:flex-end;
  padding:max(calc(var(--pad) + 60px),var(--kop-vrij)) 0 clamp(34px,5vh,58px);overflow:hidden;
}
.kijk-hero-beeld{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 30%;
}
.kijk-hero-waas{
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--sky-0) 14%,color-mix(in srgb,var(--sky-0) 68%,transparent) 48%,transparent 82%),
             linear-gradient(0deg,var(--bg) 2%,transparent 58%);
}
.kijk-hero .container{position:relative;z-index:2}
.kijk-hero-tekst{max-width:640px}
.kijk-hero-tekst h1{
  font-family:var(--font-body);font-weight:800;letter-spacing:-.024em;
  font-size:clamp(28px,4.4vw,52px);line-height:1.06;margin:12px 0 14px;
  color:var(--on-sky);
}
.kijk-hero-meta{color:var(--on-sky-mut);font-size:14.5px;margin:0 0 24px;
  font-family:var(--font-mono);letter-spacing:.06em}
.knop-play{width:15px;height:15px;fill:currentColor;margin-right:9px}
.knop.vol{display:inline-flex;align-items:center}

/* --- het programmaraster -------------------------------------------------- */

.programmas{padding:clamp(34px,5vw,56px) 0 6px}
.rij-kop{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.rij-kop h2{
  font-family:var(--font-body);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(19px,2.1vw,25px);margin:0;
}
.rij-telling{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.rij-kop .rail-pijlen{margin-left:auto;display:flex;gap:8px;position:static}

.programma-raster{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
}
.programma-tegel{
  position:relative;aspect-ratio:16/9;border-radius:var(--rand);overflow:hidden;
  display:flex;align-items:flex-end;text-decoration:none;
  border:1px solid var(--line);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s;
}
.programma-tegel:hover{transform:translateY(-4px);border-color:var(--accent)}
.programma-tegel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.programma-tegel:hover img{transform:scale(1.05)}
.tegel-waas{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(4,6,15,.94) 6%,rgba(4,6,15,.42) 46%,rgba(4,6,15,.1) 100%)}
.tegel-tekst{position:relative;padding:15px 16px 14px;width:100%}
.tegel-naam{display:block;color:#fff;font-weight:800;font-size:16px;line-height:1.25;
  letter-spacing:-.015em}
.tegel-aantal{display:block;margin-top:3px;color:rgba(255,255,255,.66);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}

/* --- de rijen met afleveringen ------------------------------------------- */

.kijk-rij{padding:clamp(28px,4vw,44px) 0 0}
.rij-anker{position:relative;top:-90px}
.kijk-rij .rail{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:6px;scrollbar-width:none;
}
.kijk-rij .rail::-webkit-scrollbar{display:none}
.kijk-rij .rail .vcard{flex:0 0 clamp(228px,22vw,286px);scroll-snap-align:start}

/* De looptijd op het beeld, zoals elke videodienst het doet. */
.vduur{
  position:absolute;right:8px;bottom:8px;z-index:2;
  background:rgba(4,6,15,.82);color:#fff;border-radius:5px;
  padding:2px 7px;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.04em;
}
.vthumb{position:relative}

@media (max-width:720px){
  .programma-raster{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:13px}
  .tegel-naam{font-size:14px}
}

.rail-pijl[disabled]{opacity:.3;cursor:default;pointer-events:none}

/* ===========================================================================
   PROGRAMMATEGELS — herzien

   De eerste versie was functioneel maar vlak: een foto met een donkere waas en
   een naam erop. Een programma-aanbod is het uithangbord van een omroep en mag
   er ook zo uitzien. Wat er is bijgekomen:

     - grotere tegels met de eigen omslag van de afspeellijst;
     - diepte: een zachte schaduw die bij hover meegroeit;
     - een gouden-snede-verloop in plaats van een egale waas, zodat de foto
       bovenin zichtbaar blijft en de tekst onderin leesbaar wordt;
     - een accentlijn die bij hover onder de naam doorloopt;
     - het aantal afleveringen als rustige badge, niet als schreeuwerig label.
   =========================================================================== */

.programma-raster{
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:22px;
}

.programma-tegel{
  position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;
  display:block;text-decoration:none;isolation:isolate;
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  box-shadow:0 12px 30px -18px rgba(0,0,0,.8);
  transition:transform .42s cubic-bezier(.2,.8,.2,1),
             box-shadow .42s cubic-bezier(.2,.8,.2,1),
             border-color .32s;
}
.programma-tegel:hover,
.programma-tegel:focus-visible{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  box-shadow:0 30px 56px -24px rgba(0,0,0,.92),
             0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);
}
.programma-tegel:focus-visible{outline:2px solid var(--accent-lt);outline-offset:3px}

.programma-tegel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s;
  filter:saturate(.92);
}
.programma-tegel:hover img{transform:scale(1.07);filter:saturate(1.08)}

/* Verloop met twee stops: de foto blijft bovenin ademen, de tekst onderin
   krijgt genoeg contrast. Een egale waas maakte alles even grijs. */
.tegel-waas{
  position:absolute;inset:0;
  background:linear-gradient(0deg,
    rgba(4,6,15,.97) 0%,
    rgba(4,6,15,.82) 24%,
    rgba(4,6,15,.30) 56%,
    rgba(4,6,15,.04) 100%);
  transition:opacity .4s;
}
.programma-tegel:hover .tegel-waas{opacity:.92}

.tegel-tekst{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:18px 19px 17px;
}
.tegel-naam{
  display:block;color:#fff;font-weight:800;
  font-size:clamp(17px,1.5vw,20px);line-height:1.18;letter-spacing:-.02em;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}
/* Het lijntje dat bij hover onder de naam doorschuift. */
.tegel-naam::after{
  content:"";display:block;height:2px;width:26px;margin-top:9px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-lt));
  transition:width .42s cubic-bezier(.2,.8,.2,1);
}
.programma-tegel:hover .tegel-naam::after{width:66px}

.tegel-aantal{
  display:inline-block;margin-top:9px;
  color:rgba(255,255,255,.72);background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:3px 10px;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;backdrop-filter:blur(6px);
}

/* Een speelknop die pas verschijnt als je er met de muis op komt. */
.tegel-speel{
  position:absolute;top:14px;right:14px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.8);
  transition:opacity .32s,transform .32s cubic-bezier(.2,.8,.2,1);
}
.programma-tegel:hover .tegel-speel{opacity:1;transform:none}
.tegel-speel svg{width:14px;height:14px;fill:#fff;margin-left:2px}

@media (prefers-reduced-motion:reduce){
  .programma-tegel,.programma-tegel img,.tegel-naam::after,.tegel-speel{transition:none}
  .programma-tegel:hover{transform:none}
  .programma-tegel:hover img{transform:none}
}

@media (max-width:720px){
  .programma-raster{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
  .tegel-tekst{padding:13px 14px 12px}
}

/* De prototype-regel .vcard .vmeta .vtitel telt drie klassen en won daardoor
   van de nieuwe nieuwstypografie: de videokoppen stonden nog in Anton-kapitalen.
   Deze regel weegt even zwaar en staat later, dus die wint nu. */
.vcard .vmeta .vtitel{
  font-family:var(--font-body);
  text-transform:none;
  font-size:15.5px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vcard .vmeta .vserie{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}

/* ---------------------------------------------------------------------------
   Programmategel, tweede ronde: beeld boven, naam eronder.

   De omslagen van de afspeellijsten dragen hun eigen titel al. Tekst daar
   overheen leverde twee keer dezelfde naam op — en dekte bovendien het beeld af
   dat de redactie juist gemaakt heeft.
   ------------------------------------------------------------------------- */

.programma-tegel{
  aspect-ratio:auto;border:0;background:none;box-shadow:none;overflow:visible;
  border-radius:0;display:block;
}
.programma-tegel:hover,.programma-tegel:focus-visible{
  transform:none;box-shadow:none;border-color:transparent;
}

.tegel-beeld{
  position:relative;display:block;aspect-ratio:16/9;
  border-radius:14px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  box-shadow:0 14px 30px -20px rgba(0,0,0,.85);
  transition:transform .42s cubic-bezier(.2,.8,.2,1),
             box-shadow .42s cubic-bezier(.2,.8,.2,1),
             border-color .32s;
}
.programma-tegel:hover .tegel-beeld,
.programma-tegel:focus-visible .tegel-beeld{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--accent) 65%,transparent);
  box-shadow:0 28px 52px -24px rgba(0,0,0,.92),
             0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent);
}
.tegel-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.programma-tegel:hover .tegel-beeld img{transform:scale(1.06)}

.tegel-tekst{position:static;padding:12px 2px 0;display:block}
.tegel-naam{
  display:block;color:var(--text);font-weight:700;
  font-size:15.5px;line-height:1.3;letter-spacing:-.012em;text-shadow:none;
  transition:color .25s;
}
.programma-tegel:hover .tegel-naam{color:var(--accent-lt)}
.tegel-naam::after{display:none}
.tegel-aantal{
  display:block;margin-top:4px;padding:0;border:0;background:none;backdrop-filter:none;
  color:var(--muted);font-family:var(--font-mono);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
}
.tegel-speel{top:auto;bottom:11px;right:11px}

/* ===========================================================================
   LUISTER — opgezet als een albumpagina (Spotify als voorbeeld)
   =========================================================================== */

.plaat{
  position:relative;padding:max(calc(var(--pad) + 56px),var(--kop-vrij)) 0 clamp(30px,4vw,46px);
  background:linear-gradient(170deg,
    color-mix(in srgb,var(--accent) 34%,var(--sky-1)) 0%,
    var(--sky-1) 46%,
    var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.plaat-in{display:flex;gap:clamp(20px,3.4vw,40px);align-items:flex-end;flex-wrap:wrap}

.plaat-omslag{
  flex:0 0 clamp(150px,20vw,232px);aspect-ratio:1;border-radius:10px;overflow:hidden;
  box-shadow:0 26px 54px -18px rgba(0,0,0,.85);background:var(--surface-2);
}
.plaat-omslag img{width:100%;height:100%;object-fit:cover;display:block}

.plaat-tekst{flex:1;min-width:250px}
.plaat-soort{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-sky-mut);
}
.plaat-tekst h1{
  font-family:var(--font-body);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(34px,6vw,76px);line-height:1;margin:8px 0 14px;color:var(--on-sky);
}
.plaat-info{color:var(--on-sky-mut);font-size:14.5px;line-height:1.6;margin:0 0 10px;max-width:56ch}
.plaat-cijfers{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 22px;
  color:var(--on-sky-mut);font-size:13px;
}
.plaat-knoppen{display:flex;align-items:center;gap:13px;flex-wrap:wrap}

.speelknop-groot{
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -10px color-mix(in srgb,var(--accent) 80%,transparent);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),background .25s;
}
.speelknop-groot:hover{transform:scale(1.06);background:var(--accent-lt)}
.speelknop-groot svg{width:20px;height:20px;fill:#fff;margin-left:3px}
.speelknop-groot:focus-visible{outline:2px solid var(--on-sky);outline-offset:3px}

/* --- de afleveringenlijst ------------------------------------------------ */

.lijstblok{padding:clamp(22px,3vw,34px) 0 clamp(30px,4vw,46px)}

.lijst-hoofding,.spoor{
  display:grid;
  grid-template-columns:40px 1fr 110px 62px;
  gap:14px;align-items:center;
}
.lijst-hoofding{
  padding:0 12px 10px;border-bottom:1px solid var(--line);margin-bottom:8px;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.sporen{list-style:none;margin:0;padding:0}
.spoor{
  padding:11px 12px;border-radius:9px;cursor:pointer;
  transition:background .2s;
}
.spoor:hover,.spoor:focus-visible{background:color-mix(in srgb,var(--text) 7%,transparent);outline:none}
.spoor:focus-visible{box-shadow:0 0 0 2px var(--accent)}

.spoor-nr{position:relative;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-family:var(--font-mono);font-size:13px}
.spoor-speel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0}
.spoor-speel svg{width:13px;height:13px;fill:var(--text)}
.spoor:hover .nr,.spoor.speelt .nr{opacity:0}
.spoor:hover .spoor-speel{opacity:1}

.spoor-titel{font-weight:600;font-size:15px;line-height:1.35;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spoor .kolom-datum,.spoor .kolom-duur{color:var(--muted);font-size:13px;
  font-family:var(--font-mono);letter-spacing:.03em}
.spoor .kolom-duur{text-align:right}

/* De aflevering die speelt: accentkleur en een klein staafdiagram. */
.spoor.speelt .spoor-titel{color:var(--accent-lt)}
.spoor.speelt .spoor-speel{opacity:1}
.spoor.speelt .spoor-speel svg{fill:var(--accent-lt)}

@media (max-width:640px){
  .lijst-hoofding,.spoor{grid-template-columns:30px 1fr 56px}
  .kolom-datum{display:none}
}

/* --- het balkje onderin --------------------------------------------------- */

.speelbalk{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  border-top:1px solid var(--line);backdrop-filter:blur(14px);
  transform:translateY(100%);transition:transform .38s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -14px 34px -22px rgba(0,0,0,.8);
}
.speelbalk.aan{transform:none}
.speelbalk-in{display:flex;align-items:center;gap:15px;padding:11px 0}

.balk-knop{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent);display:flex;align-items:center;justify-content:center;
  transition:background .25s,transform .25s;
}
.balk-knop:hover{background:var(--accent-lt);transform:scale(1.05)}
.balk-knop svg{width:15px;height:15px;fill:#fff}
.balk-knop .ic-speel{display:none;margin-left:2px}
.speelbalk.gepauzeerd .balk-knop .ic-pauze{display:none}
.speelbalk.gepauzeerd .balk-knop .ic-speel{display:block}

.balk-titel{flex:1;min-width:0;font-weight:600;font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.balk-tijd{flex:0 0 auto;color:var(--muted);font-family:var(--font-mono);font-size:12px}
.balk-voortgang{
  flex:0 0 clamp(90px,22vw,260px);height:5px;border-radius:3px;cursor:pointer;
  background:color-mix(in srgb,var(--text) 14%,transparent);overflow:hidden;
}
.balk-vulling{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-lt))}

@media (max-width:520px){
  .balk-tijd{display:none}
}

/* ---------------------------------------------------------------------------
   De kopbalk heeft standaard een achtergrond.

   In het prototype was de balk bovenaan altijd doorzichtig en kreeg hij pas bij
   het scrollen een achtergrond (.vast). Dat prototype bestond uit twee pagina's
   die allebei met een donkere hero begonnen. Zodra er gewone pagina's bij komen
   — FAQ, contact, een artikel — begint de inhoud meteen onder de balk en zweven
   logo en menu over de tekst, onleesbaar.

   Dus: achtergrond als regel, doorzichtig als uitzondering, en die uitzondering
   geldt alleen waar er echt een hero achter staat (zie body_class in
   functions.php).
   ------------------------------------------------------------------------- */

header.site{
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}

body.hero-achter-kop header.site:not(.vast){
  background:transparent;
  border-bottom-color:transparent;
  backdrop-filter:none;
}

/* Boven een hero moet de tekst leesbaar blijven zonder achtergrond: een zachte
   verloopband vangt lichte beelden op. */
body.hero-achter-kop header.site:not(.vast)::before{
  content:"";position:absolute;inset:0 0 auto;height:210%;z-index:-1;
  background:linear-gradient(180deg,rgba(4,6,15,.72) 0%,rgba(4,6,15,.34) 48%,transparent 100%);
  pointer-events:none;
}
header.site{position:fixed;isolation:isolate}

/* ===========================================================================
   OPINIE

   Columns zijn geen nieuws. Ze worden geschreven door eigen columnisten —
   drieënveertig stukken van twaalf mensen, allemaal met een biografie — en je
   leest ze om wie het zegt. Daarom staat de schrijver bovenaan de kaart en niet
   als voetnoot onder de kop, zoals bij een nieuwsbericht.
   =========================================================================== */

.column-raster{
  display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
}

.column-kaart{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rand);overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .32s;
}
.column-kaart:hover{transform:translateY(-4px);border-color:var(--accent)}

.col-beeld{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.col-beeld img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.column-kaart:hover .col-beeld img{transform:scale(1.04)}

.col-tekst{padding:19px 20px 21px;display:flex;flex-direction:column;flex:1;gap:11px}

.col-auteur{display:flex;align-items:center;gap:11px}
.col-auteur img.col-foto,
.col-auteur .auteur-letters{
  width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 38px;
  border:1px solid var(--line);
}
.col-naam{
  display:block;font-weight:700;font-size:14.5px;line-height:1.25;
  color:var(--text);text-decoration:none;transition:color .22s;
}
.col-naam:hover{color:var(--accent-lt)}
.col-label{
  display:block;margin-top:2px;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-lt);
}

.column-kaart h3{margin:0;font-size:18.5px;line-height:1.3;font-weight:800;
  letter-spacing:-.016em}
.column-kaart h3 a{color:inherit;text-decoration:none}
.column-kaart h3 a:hover{color:var(--accent-lt)}
.column-kaart p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.col-datum{
  margin-top:auto;padding-top:4px;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;color:var(--muted);
}

/* --- de columnisten op de archiefpagina ---------------------------------- */

.columnisten{
  display:flex;gap:10px;overflow-x:auto;padding:4px 2px 18px;
  scrollbar-width:none;
}
.columnisten::-webkit-scrollbar{display:none}
.columnist{
  flex:0 0 auto;display:flex;align-items:center;gap:9px;
  padding:7px 15px 7px 7px;border-radius:999px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .25s,transform .25s cubic-bezier(.2,.8,.2,1);
}
.columnist:hover{border-color:var(--accent);transform:translateY(-2px)}
.columnist img,.columnist .auteur-letters{
  width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 30px;font-size:13px;
}
.columnist span{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap}
.columnist b{color:var(--muted);font-weight:400;font-family:var(--font-mono);font-size:.62rem}

@media (max-width:560px){
  .column-raster{grid-template-columns:1fr}
}

/* ===========================================================================
   DE OPINIEPAGINA

   Een column hoort er anders uit te zien dan een nieuwsbericht: de schrijver
   staat vóór de kop in plaats van eronder, en de kop zelf krijgt een rustiger,
   redactioneler karakter. Zo zie je aan de vorm al dat dit een mening is en
   geen verslag.
   =========================================================================== */

.opinie-kop{
  padding:max(calc(var(--pad) + 44px),var(--kop-vrij)) 0 clamp(24px,3vw,34px);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 12%,var(--bg)) 0%,
    var(--bg) 100%);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(26px,3.6vw,40px);
}
.opinie-kop .kruimels{margin-bottom:22px;font-size:13px;color:var(--muted);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.opinie-kop .kruimels a{color:var(--muted);text-decoration:none}
.opinie-kop .kruimels a:hover{color:var(--accent-lt)}

.opinie-auteur{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.oa-foto{flex:0 0 auto;display:block}
.oa-foto .auteur-foto,
.oa-foto .auteur-letters{
  width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid color-mix(in srgb,var(--accent) 52%,transparent);
  font-size:24px;
}
.oa-label{
  display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-lt);margin-bottom:4px;
}
.oa-naam{
  display:block;font-size:19px;font-weight:800;letter-spacing:-.015em;
  color:var(--text);text-decoration:none;line-height:1.2;
}
.oa-naam:hover{color:var(--accent-lt)}
.oa-rol{margin:5px 0 0;color:var(--muted);font-size:13.5px;line-height:1.5;max-width:52ch}

/* De kop van een column: iets lichter en met meer regelhoogte dan een
   nieuwskop. Een mening schreeuwt niet. */
.opinie-kop h1{
  font-family:var(--font-body);font-weight:700;
  font-size:clamp(27px,3.5vw,44px);line-height:1.18;letter-spacing:-.02em;
  margin:0 0 16px;max-width:22ch;
}
.opinie-intro{
  font-size:clamp(16.5px,1.8vw,19.5px);line-height:1.62;color:var(--muted);
  margin:0 0 20px;max-width:58ch;
}
.opinie-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  color:var(--muted);font-size:13.5px}

/* In de lopende tekst mag een citaat eruit springen: dat is waar een column
   het van moet hebben. */
.opinie-inhoud blockquote{
  border-left:0;padding:0;margin:1.9em 0;
  font-family:var(--font-body);font-weight:700;
  font-size:clamp(20px,2.4vw,27px);line-height:1.35;letter-spacing:-.018em;
  color:var(--text);position:relative;padding-left:26px;
}
.opinie-inhoud blockquote::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent-lt));
}

/* --- de kaart met de schrijver onderaan --------------------------------- */

.auteurskaart{
  display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;
  margin-top:34px;padding:clamp(22px,3vw,30px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rand);
}
.auteurskaart .auteur-foto,
.auteurskaart .auteur-letters{
  width:76px;height:76px;border-radius:50%;object-fit:cover;flex:0 0 76px;
  border:1px solid var(--line);font-size:28px;
}
.auteurskaart > div{flex:1;min-width:210px}
.ak-label{
  display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.auteurskaart h2{font-size:19px;margin:0 0 9px;font-weight:800;letter-spacing:-.015em}
.auteurskaart h2 a{color:inherit;text-decoration:none}
.auteurskaart h2 a:hover{color:var(--accent-lt)}
.auteurskaart p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.62}
.ak-kanalen{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.ak-kanalen a{
  font-size:12.5px;padding:5px 13px;border-radius:999px;text-decoration:none;
  border:1px solid var(--line);color:var(--muted);transition:border-color .25s,color .25s;
}
.ak-kanalen a:hover{border-color:var(--accent);color:var(--accent-lt)}

@media (max-width:560px){
  .opinie-auteur{gap:13px}
  .oa-foto .auteur-foto,.oa-foto .auteur-letters{width:52px;height:52px}
}

/* Onder een column staat de naam van de schrijver als sectiekop. Anton in
   kapitalen werkt voor "LEES" en "KIJK" — dat zijn rubrieken — maar de naam van
   een mens hoort gewoon geschreven te staan. */
.opinie-stuk .verder .sectiekop h2{
  font-family:var(--font-body);
  font-weight:800;
  text-transform:none;
  font-size:clamp(20px,2.2vw,27px);
  letter-spacing:-.02em;
}

/* ---------------------------------------------------------------------------
   De voet naar pijlers: merk + Lees + Kijk + Luister + Organisatie.
   De sociale kanalen zijn naar de onderregel verhuisd, zodat de vier
   inhoudskolommen evenveel ruimte krijgen.
   ------------------------------------------------------------------------- */

.voet-grid{grid-template-columns:1.7fr 1fr 1fr 1fr 1.15fr;gap:30px}
.voet-merk{max-width:34ch}

/* De kop van een kolom is zelf een link naar de pijler. */
.voet-kop a{color:var(--beam-lt);text-decoration:none;transition:color .22s}
.voet-kop a:hover{color:var(--on-sky)}

.voet-onder{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between;
}
.voet-onder .socials{order:2;margin-inline:auto}
.voet-onder .voet-klein{order:3}

@media (max-width:1160px){
  .voet-grid{grid-template-columns:1fr 1fr 1fr}
  .voet-merk{grid-column:1 / -1;max-width:46ch}
}
@media (max-width:660px){
  .voet-grid{grid-template-columns:1fr 1fr;gap:26px}
  .voet-onder{justify-content:flex-start}
  .voet-onder .socials{margin-inline:0}
}
@media (max-width:420px){
  .voet-grid{grid-template-columns:1fr}
}

/* Een speelknop op een videokaartje in een archief, zodat je ziet dat het geen
   artikel is. */
.kaart-beeld{position:relative}
.kaart-speel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);
  width:44px;height:44px;border-radius:50%;
  background:rgba(4,6,15,.55);border:1px solid rgba(243,245,252,.5);
  backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.2,1);
}
.kaart-speel svg{width:15px;height:15px;fill:#fff;margin-left:2px}
.kaart:hover .kaart-speel{opacity:1;transform:translate(-50%,-50%)}

/* Een rij op de Kijk-pagina is een ankerdoel; de vaste kopbalk mag hem niet
   afdekken als je er vanuit de voet naartoe springt. */
.kijk-rij{scroll-margin-top:96px}
.programmas{scroll-margin-top:96px}

/* ===========================================================================
   REDACTIE-INHOUD UIT HET OUDE THEMA

   Pagina's als Dit is IslamOmroep zijn in de editor opgebouwd met de
   Bootstrap-klassen van het oude, lichte thema: `bg-white`, `text-primary`,
   `text-white`, `break-out`, plus het raster row/col-md-6.

   Op een donkere site levert dat een wit vlak op met tekst die er nauwelijks
   op te lezen is — precies wat er op Missie & visie te zien was.

   Die klassen worden hier vertaald naar het nieuwe palet. De inhoud zelf blijft
   ongemoeid: de redactie hoeft niets over te typen, en als een pagina ooit
   opnieuw wordt opgemaakt, vervalt deze vertaling vanzelf.
   =========================================================================== */

.pagina-inhoud .bg-white,
.pagina-inhoud .bg-light,
.artikel-inhoud .bg-white,
.artikel-inhoud .bg-light{
  background:var(--surface) !important;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--rand);
}

.pagina-inhoud .text-primary,
.artikel-inhoud .text-primary{color:var(--accent-lt) !important}

/* `text-white` was bedoeld op een donkere achtergrond; die achtergrond is nu
   juist licht van kleur ontdaan, dus de tekst moet gewoon de tekstkleur zijn. */
.pagina-inhoud .text-white,
.artikel-inhoud .text-white{color:var(--text) !important}

.pagina-inhoud .text-muted,
.pagina-inhoud .text-secondary,
.artikel-inhoud .text-muted{color:var(--muted) !important}

.pagina-inhoud .bg-dark,
.artikel-inhoud .bg-dark{background:var(--surface-2) !important;color:var(--text)}

/* `break-out` liet een blok buiten de kolom uitlopen. Binnen de nieuwe,
   smallere opmaak geeft dat rare uitstulpingen. */
.pagina-inhoud .break-out{width:auto;margin-inline:0;max-width:100%}
.pagina-inhoud .break-out > .container{width:auto;max-width:none;padding-inline:clamp(18px,3vw,30px)}

/* Bootstrap-kaarten en randen uit de oude opmaak. */
.pagina-inhoud .card,
.artikel-inhoud .card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rand);color:var(--text);
}
.pagina-inhoud .card-body{padding:clamp(18px,2.4vw,26px)}
.pagina-inhoud .border,
.pagina-inhoud .border-top,
.pagina-inhoud .border-bottom,
.pagina-inhoud .border-start,
.pagina-inhoud .border-end{border-color:var(--line) !important}
.pagina-inhoud .shadow,
.pagina-inhoud .shadow-sm,
.pagina-inhoud .shadow-lg{box-shadow:var(--kaart-schaduw) !important}

/* De oude knopklassen, in het nieuwe jasje. */
.pagina-inhoud .btn,
.artikel-inhoud .btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 26px;border-radius:999px;border:1px solid var(--line);
  font-weight:700;font-size:15px;text-decoration:none;color:var(--text);
  transition:border-color .25s,background .25s,transform .25s;
}
.pagina-inhoud .btn:hover{border-color:var(--accent);transform:translateY(-2px)}
.pagina-inhoud .btn-primary,
.artikel-inhoud .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.pagina-inhoud .btn-primary:hover{background:var(--accent-lt);border-color:var(--accent-lt)}

/* Het raster van Bootstrap werkt nog (de ouderstijl laadt mee), maar de
   verticale ruimtes uit de oude opmaak waren op een bredere pagina berekend. */
.pagina-inhoud .py-5{padding-top:clamp(22px,3vw,34px) !important;padding-bottom:clamp(22px,3vw,34px) !important}
.pagina-inhoud .mb-5{margin-bottom:clamp(20px,2.6vw,30px) !important}

/* ===========================================================================
   BREEDTE

   Gemeten op een scherm van 1920: de inhoud was 1188 pixels breed, met 310
   pixels leegte aan elke kant. Dat is 62% van het scherm — ruim een derde
   ongebruikt. Een omroep met videorijen hoort breder te staan; NPO, Netflix en
   YouTube benutten 85 tot 95 procent.

   De nieuwe maat: 1680 pixels, met ruimere zijmarges die meeschalen. Dat geeft
   op 1920 zo'n 1550 pixels inhoud (81%), en op 1440 en smaller bijna het hele
   scherm. Breder dan dit wordt onrustig: de blik moet nog wel in één keer van
   links naar rechts kunnen.

   Leestekst blijft smal — zie .smal, dat op 760 pixels staat. Een regel van
   anderhalve meter leest niemand.
   =========================================================================== */

:root{
  --pad:clamp(20px,3.6vw,64px);
}

.container{max-width:1680px}

/* Verticaal mag er ook meer lucht tussen de blokken; met een bredere pagina
   gaan secties anders aan elkaar plakken. */
.blok{padding-block:clamp(48px,6.5vw,104px)}

/* De videorijen op Kijk mogen tot dicht bij de rand lopen, zoals bij elke
   videodienst: dat laat zien dat er meer naast staat. */
.kijk-rij .container,
.programmas .container{max-width:1780px}

/* Tekstkolommen blijven leesbaar breed, ook nu de pagina groeit. */
.smal{max-width:768px}
.lijst-kop p,.artikel-intro,.opinie-intro{max-width:62ch}

/* Rasters mogen meer kolommen aan op een breed scherm. */
@media (min-width:1500px){
  .kaartlijst{grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
  .programma-raster{grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
  .column-raster{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
}

/* ===========================================================================
   BREEDTE PER SOORT PAGINA

   Niet elke pagina wil dezelfde maat. Een artikel leest het prettigst op zo'n
   70 tekens per regel — dat is waarom NYT, Guardian en BBC allemaal rond de
   700 à 760 pixels zitten en niet breder. Maar een informatiepagina als
   Contact of Dit is IslamOmroep is geen lopend verhaal; die mag de ruimte
   gewoon gebruiken.

   Dus: lopende tekst blijft smal, alles eromheen verbreedt mee.
   =========================================================================== */

/* Informatiepagina's: ruimer dan een artikel, want het zijn blokken en lijsten
   in plaats van een doorlopend betoog. */
.page .smal:not(.artikel),
.page-template-page-faq .smal{max-width:1040px}

/* De FAQ-vragen mogen over de volle breedte; dat scheelt scrollen bij elf
   vragen. */
.vragen{max-width:none}

/* Beeld, citaten en video in een artikel mogen buiten de tekstkolom treden.
   Zo blijft de tekst leesbaar en oogt de pagina toch niet krap — precies wat
   een krantensite doet. */
.artikel-beeld,
.artikel-inhoud > figure,
.artikel-inhoud > .wp-block-image,
.artikel-inhoud > iframe,
.opinie-inhoud > blockquote{
  width:min(1040px,calc(100vw - var(--pad) * 2));
  margin-left:50%;
  transform:translateX(-50%);
}

/* Verwante artikelen onder een stuk gebruiken de volle pagina. */
.verder{max-width:none}

/* Het blok "word lid" onder een artikel ook. */
.steunblok{width:min(1040px,calc(100vw - var(--pad) * 2));margin-left:50%;transform:translateX(-50%)}

/* Deelknoppen en auteurskaart houden de breedte van de tekst aan: die horen
   bij het stuk zelf. */
.artikel-deel,.auteurskaart{width:auto;margin-left:0;transform:none}

@media (max-width:1100px){
  .artikel-beeld,.artikel-inhoud > figure,.artikel-inhoud > .wp-block-image,
  .artikel-inhoud > iframe,.opinie-inhoud > blockquote,.steunblok{
    width:auto;margin-left:0;transform:none;
  }
}

/* ===========================================================================
   BREEDTE, BIJGESTELD

   Eerste poging: 1300 breed met 56 marge — te smal, 62% van een scherm van
   1920 bleef ongebruikt. Tweede poging: 1680 met krappe marges — toen plakte de
   inhoud bijna tegen de rand.

   Deze maat zit ertussenin. De marge groeit mee met het scherm maar zakt nooit
   onder de 26 pixels, zodat er altijd lucht tussen de inhoud en de rand staat:

     scherm 1920 -> inhoud 1392, 264 vrij aan elke kant
     scherm 1680 -> inhoud 1406, 137 vrij
     scherm 1440 -> inhoud 1308,  66 vrij
     scherm 1280 -> inhoud 1162,  59 vrij

   Nog steeds veel ruimer dan de 1188 van het begin, maar zonder dat iets de
   rand raakt.
   =========================================================================== */

:root{
  --pad:clamp(26px,4.6vw,84px);
}

.container{max-width:1560px}

/* De videorijen mogen iets verder doorlopen — dat hoort bij een videodienst —
   maar houden dezelfde marge aan de rand. */
.kijk-rij .container,
.programmas .container{max-width:1640px}

/* ===========================================================================
   ZIJMARGE, RUIMER

   De gebruiker gaf aan dat de inhoud nog steeds te dicht bij de rand stond.
   De vorige marge liep van 59 pixels op een laptop tot 264 op een breed scherm;
   op de kleinere maten was dat inderdaad krap.

   Nu loopt hij van 90 tot ruim 300, en schaalt hij sneller mee met het scherm:

     scherm 1920 -> inhoud 1292, 314 vrij aan elke kant
     scherm 1680 -> inhoud 1324, 178 vrij
     scherm 1512 -> inhoud 1300, 106 vrij
     scherm 1440 -> inhoud 1238, 101 vrij
     scherm 1280 -> inhoud 1100,  90 vrij

   Nog altijd ruimer dan de 1188 waar dit mee begon, maar met echte lucht
   tussen de inhoud en de rand van het scherm.
   =========================================================================== */

:root{
  --pad:clamp(32px,7vw,150px);
}

/* Op een telefoon moet de marge juist klein blijven; daar telt elke pixel. */
@media (max-width:620px){
  :root{--pad:20px}
}

/* ===========================================================================
   ARTIKELKOLOM OP DE BREEDTE VAN HET BEELD

   Tot nu toe was de tekst 768 breed en trad het beeld daarbuiten tot 1040.
   Op verzoek lopen ze nu gelijk: alles 1040.

   Eén aanpassing hoort daarbij. Een regel van 1040 pixels telt bij 17,5 px
   zo'n honderd tekens, en dat is lang — het oog verliest bij het terugspringen
   makkelijk de volgende regel. Daarom gaat de tekst iets groter en komt er meer
   regelafstand bij: dan zit een regel weer rond de vijfentachtig tekens en
   leest het rustig door.
   =========================================================================== */

.smal.artikel,
.opinie-stuk .smal,
.single-columns .smal{max-width:1040px}

/* Beeld, citaat en steunblok stonden buiten de kolom om breder te kunnen zijn;
   nu de kolom zelf die breedte heeft, kan dat uitstappen eruit. */
.artikel-beeld,
.artikel-inhoud > figure,
.artikel-inhoud > .wp-block-image,
.artikel-inhoud > iframe,
.opinie-inhoud > blockquote,
.steunblok{
  width:auto;
  margin-left:0;
  transform:none;
}

/* Grotere letter en meer regelafstand, passend bij de bredere kolom. */
.artikel-inhoud{font-size:18.5px;line-height:1.8}
.artikel-inhoud > p:first-of-type{font-size:20px;line-height:1.75}

/* De kop mag mee groeien nu er meer ruimte is. */
.artikel-kop h1{font-size:clamp(30px,3.9vw,52px);max-width:20ch}
.opinie-kop h1{max-width:20ch}

/* Intro en meta houden dezelfde kolom aan. */
.artikel-intro,.opinie-intro{max-width:70ch}

/* ===========================================================================
   PROGRAMMAPAGINA — /programma/{naam}/

   Een programma is een ding op zichzelf en verdient een eigen adres. Op de
   Kijk-pagina blader je; hier krijg je overzicht. Daarom een raster en geen rij.
   =========================================================================== */

.prog-hero{
  position:relative;padding:max(calc(var(--pad) + 62px),var(--kop-vrij)) 0 clamp(30px,4vw,48px);
  overflow:hidden;border-bottom:1px solid var(--line);
}
.prog-hero-beeld{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(28px) saturate(1.1);transform:scale(1.12);opacity:.5;
}
.prog-hero-waas{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,6,15,.82) 0%,rgba(4,6,15,.92) 62%,var(--bg) 100%);
}
.prog-hero .container{position:relative;z-index:2}
.prog-hero-in{display:flex;gap:clamp(20px,3vw,40px);align-items:flex-end;flex-wrap:wrap}

.prog-omslag{
  flex:0 0 clamp(190px,26vw,340px);aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  box-shadow:0 26px 54px -20px rgba(0,0,0,.9);border:1px solid var(--line);
}
.prog-omslag img{width:100%;height:100%;object-fit:cover;display:block}

.prog-tekst{flex:1;min-width:270px}
.prog-tekst .kruimels{margin-bottom:14px;font-size:13px;color:var(--on-sky-mut);
  display:flex;gap:8px;align-items:center}
.prog-tekst .kruimels a{color:var(--on-sky-mut);text-decoration:none}
.prog-tekst .kruimels a:hover{color:var(--accent-lt)}
.prog-soort{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-lt);
}
.prog-tekst h1{
  font-family:var(--font-body);font-weight:800;letter-spacing:-.028em;
  font-size:clamp(30px,5vw,60px);line-height:1.02;margin:8px 0 14px;color:var(--on-sky);
}
.prog-cijfers{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0 0 22px;
  color:var(--on-sky-mut);font-size:14px}
.prog-knoppen{display:flex;gap:12px;flex-wrap:wrap}

.prog-lijst{padding:clamp(34px,5vw,56px) 0 clamp(40px,6vw,72px)}

/* Op de eigen pagina een raster: je wilt zien hoeveel er is, niet scrollen. */
.video-raster{
  display:grid;gap:22px 20px;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
}

@media (max-width:640px){
  .prog-omslag{flex-basis:100%}
}

/* ===========================================================================
   LUISTER — per serie in plaats van één lange lijst
   =========================================================================== */

.luister-kop{
  padding:max(calc(var(--pad) + 52px),var(--kop-vrij)) 0 clamp(26px,3.4vw,40px);
  background:linear-gradient(170deg,color-mix(in srgb,var(--accent) 24%,var(--sky-1)) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.luister-kop h1{
  font-family:var(--font-body);font-weight:800;letter-spacing:-.028em;
  font-size:clamp(32px,5vw,62px);line-height:1.02;margin:8px 0 12px;color:var(--on-sky);
}
.luister-kop p{color:var(--on-sky-mut);font-size:15.5px;max-width:62ch;margin:0 0 20px}
.luister-platforms{display:flex;gap:11px;flex-wrap:wrap}

.podcastblok{padding:clamp(30px,4vw,50px) 0}
.serie + .serie{margin-top:clamp(34px,4.6vw,58px);padding-top:clamp(30px,4vw,46px);
  border-top:1px solid var(--line)}

.serie-kop{display:flex;gap:18px;align-items:center;margin-bottom:18px}
.serie-omslag{
  flex:0 0 clamp(72px,8vw,108px);aspect-ratio:1;border-radius:10px;overflow:hidden;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.85);background:var(--surface-2);
}
.serie-omslag img{width:100%;height:100%;object-fit:cover;display:block}
.serie-label{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-lt);
}
.serie-tekst h2{
  font-family:var(--font-body);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(20px,2.4vw,29px);line-height:1.15;margin:5px 0 4px;
}
.serie-cijfers{margin:0;color:var(--muted);font-size:13.5px}

/* ===========================================================================
   PROGRAMMAKAARTEN — groot en duidelijk aanklikbaar

   De vorige tegels waren klein en de tekst stond er los onder; het zag er niet
   uit als iets waar je op drukt. Nu is de kaart één geheel met een eigen vlak,
   een badge met het aantal afleveringen op het beeld, en onderin een zichtbare
   "Bekijken →". Geen verborgen hover-knop: je moet vóór het aanwijzen al zien
   dat het een ingang is.
   =========================================================================== */

.prog-sectiekop{margin-bottom:clamp(24px,3vw,36px);max-width:60ch}
.prog-sectiekop h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(28px,4.2vw,50px);line-height:1;margin:10px 0 10px;
}
.prog-sectiekop p{margin:0;color:var(--muted);font-size:15.5px}

.programmas{padding:clamp(40px,5.5vw,76px) 0 clamp(20px,3vw,34px)}

.programma-raster{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:clamp(22px,2.4vw,32px);
}

.programma-kaart{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;overflow:hidden;
  box-shadow:0 16px 36px -24px rgba(0,0,0,.8);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),
             border-color .32s, box-shadow .4s cubic-bezier(.2,.8,.2,1);
}
.programma-kaart:hover,
.programma-kaart:focus-visible{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--accent) 70%,transparent);
  box-shadow:0 34px 60px -26px rgba(0,0,0,.92),
             0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent);
}
.programma-kaart:focus-visible{outline:2px solid var(--accent-lt);outline-offset:3px}

.pk-beeld{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:var(--surface-2)}
.pk-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.programma-kaart:hover .pk-beeld img{transform:scale(1.05)}
.pk-waas{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(4,6,15,.55) 0%,transparent 42%)}

.pk-badge{
  position:absolute;left:14px;bottom:13px;z-index:2;
  background:rgba(4,6,15,.72);border:1px solid rgba(243,245,252,.2);
  backdrop-filter:blur(8px);border-radius:999px;padding:5px 13px;
  color:#fff;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;
}

.pk-tekst{padding:18px 20px 19px;display:flex;flex-direction:column;gap:14px;flex:1}
.pk-naam{
  display:block;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(18px,1.6vw,22px);line-height:1.22;color:var(--text);
  transition:color .25s;
}
.programma-kaart:hover .pk-naam{color:var(--accent-lt)}

.pk-onder{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:auto;padding-top:13px;border-top:1px solid var(--line);
}
.pk-laatst{color:var(--muted);font-size:12.5px}
.pk-ga{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent-lt);font-family:var(--font-mono);
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
}
.pk-ga svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.programma-kaart:hover .pk-ga svg{transform:translateX(5px)}

/* --- de ingang voor alles buiten de series ------------------------------- */

.losse-ingang{padding:clamp(24px,3vw,40px) 0}
.losse-in{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;padding:clamp(22px,3vw,32px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rand);
}
.losse-in h2{
  font-family:var(--font-body);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(19px,2.2vw,26px);margin:8px 0 6px;
}
.losse-in p{margin:0;color:var(--muted);font-size:14.5px}

@media (max-width:560px){
  .programma-raster{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   Meer lucht tussen de afleveringen op een programmapagina; ze stonden te dicht
   op elkaar.
   ------------------------------------------------------------------------- */

.video-raster{gap:clamp(30px,3vw,40px) clamp(22px,2vw,28px)}
.video-raster .vcard .vmeta{padding-top:12px;gap:6px}
.prog-lijst .rij-kop{margin-bottom:24px}

/* ===========================================================================
   DE VIDEOKAART IN EEN RASTER

   De kaart komt uit het prototype, waar hij alleen in een horizontale rij
   stond: daar heeft hij een vaste breedte van 360 pixels nodig, anders krimpt
   hij mee. In het raster op een programmapagina is die vaste maat juist fout —
   de cel is daar 273 pixels breed, dus stak elke kaart 87 pixels uit en liepen
   de titels dwars door de titel van de buurman heen.

   In een raster bepaalt de cel de breedte, niet de kaart.
   =========================================================================== */

.video-raster .vcard{
  width:auto;
  max-width:100%;
  min-width:0;
  flex:initial;
}
.video-raster .vcard .vthumb,
.video-raster .vcard .vmeta,
.video-raster .vcard .vtitel,
.video-raster .vcard .vserie{
  width:auto;
  max-width:100%;
  min-width:0;
}

/* De titel mag nooit buiten zijn kaart vallen, in welke opstelling dan ook. */
.vcard .vmeta .vtitel{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* ===========================================================================
   DE HERO, OPGERUIMD

   Twee dingen zaten elkaar in de weg.

   1. Teller en knoppen stonden op één regel, gescheiden door een streepje.
      Gemeten op 1920: het label "leden en groeiend" kreeg 76 pixels, mocht niet
      afbreken, en liep dus over de knop ernaast. Nu staat de teller erboven.

   2. De hero-video kreeg een titelbalk over het beeld, terwijl de omslag die
      titel al draagt. Twee keer dezelfde woorden, en het beeld eronder verdween.
      Alleen de looptijd blijft staan.
   =========================================================================== */

.hero-cta{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(18px,2vw,26px);
}
.teller{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.teller-num{
  font-family:var(--font-display);line-height:1;
  font-size:clamp(34px,4.4vw,56px);color:var(--on-sky);
}
.teller-label{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-sky-mut);
}
.teller-scheid{display:none}
.hero-knoppen{display:flex;gap:12px;flex-wrap:wrap}

/* De looptijd op de hero-video, klein in de hoek. */
.scherm-duur{
  position:absolute;right:14px;bottom:14px;z-index:3;
  background:rgba(4,6,15,.78);border:1px solid rgba(243,245,252,.2);
  backdrop-filter:blur(6px);border-radius:6px;padding:3px 9px;
  color:#fff;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;
}

/* ===========================================================================
   DE HERO-INDELING

   Gemeten op een scherm van 1920x1080: de hero was 1080 hoog, maar de inhoud
   begon pas na 483 pixels. Bijna de helft stond leeg, omdat de hero zijn
   inhoud onderaan uitlijnde. En de inhoud zelf was tot 1300 pixels beperkt
   terwijl de rest van de site inmiddels op 1560 staat — daardoor kreeg de
   videokolom maar 296 pixels naast 637 voor de tekst.

   Nu staat de inhoud verticaal gecentreerd en loopt hij even breed als de rest
   van de site, met een evenwichtiger verdeling tussen tekst en beeld.
   =========================================================================== */

#hero{
  min-height:min(100svh,920px);
  justify-content:center;
}

.hero-inhoud{
  max-width:1560px;
  padding-top:clamp(96px,11vh,128px);
  padding-bottom:clamp(40px,6vh,68px);
  grid-template-columns:1fr .82fr;
  align-items:center;
}

/* Het scherm mag groter: het is het visitekaartje van de omroep. */
.scherm-wrap{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}

@media (max-width:980px){
  .hero-inhoud{grid-template-columns:1fr}
  #hero{min-height:auto}
}

/* ===========================================================================
   DE OMSLAG VAN KIJK — samengesteld, niet uitgerekt

   Een YouTube-miniatuur is 1280 pixels breed en draagt zijn eigen titeltekst.
   Schermbreed uitrekken maakte hem zacht en vervormde die tekst. Nu staat hij
   op zijn eigen 16:9 naast de tekst; de sfeer komt van een uitvergrote,
   onscherpe kopie erachter.
   =========================================================================== */

.kijk-hero{
  position:relative;overflow:hidden;
  padding:max(calc(var(--pad) + 58px),var(--kop-vrij)) 0 clamp(36px,5vw,64px);
  border-bottom:1px solid var(--line);
}
.kijk-hero-achter{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(46px) saturate(1.15);transform:scale(1.18);opacity:.42;
}
.kijk-hero-waas{
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--sky-0) 8%,color-mix(in srgb,var(--sky-0) 74%,transparent) 52%,color-mix(in srgb,var(--sky-0) 52%,transparent) 100%),
             linear-gradient(0deg,var(--bg) 1%,transparent 46%);
}
.kijk-hero .container{position:relative;z-index:2}

.kijk-hero-in{
  display:grid;grid-template-columns:1fr .92fr;
  gap:clamp(26px,4vw,58px);align-items:center;
}
.kijk-hero-tekst{max-width:none}
.kijk-hero-tekst h1{
  font-family:var(--font-body);font-weight:800;letter-spacing:-.026em;
  font-size:clamp(28px,3.6vw,46px);line-height:1.08;margin:12px 0 14px;
  color:var(--on-sky);
}

.kijk-hero-kaart{
  position:relative;display:block;aspect-ratio:16/9;border-radius:16px;
  overflow:hidden;border:1px solid var(--line);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.9);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
}
.kijk-hero-kaart:hover{transform:translateY(-5px);
  box-shadow:0 44px 76px -26px rgba(0,0,0,.95)}
.kijk-hero-kaart img{width:100%;height:100%;object-fit:cover;display:block}
.khk-speel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;
  background:rgba(4,6,15,.5);border:1px solid rgba(243,245,252,.55);
  backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),background .3s;
}
.kijk-hero-kaart:hover .khk-speel{transform:translate(-50%,-50%) scale(1.08);
  background:color-mix(in srgb,var(--accent) 80%,transparent)}
.khk-speel svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.khk-duur{
  position:absolute;right:12px;bottom:12px;
  background:rgba(4,6,15,.8);border:1px solid rgba(243,245,252,.2);
  border-radius:6px;padding:3px 9px;color:#fff;
  font-family:var(--font-mono);font-size:.64rem;
}

@media (max-width:900px){
  .kijk-hero-in{grid-template-columns:1fr}
}

/* ===========================================================================
   REELS — bewust bijzaak

   Korte video's van hooguit anderhalve minuut, staand opgenomen. Ze staan ná
   de programma's en zijn klein gehouden: dit is sfeer, geen navigatie. Wie ze
   overslaat mist niets van de structuur van de site.
   =========================================================================== */

.reels{padding:clamp(20px,3vw,34px) 0 clamp(26px,3.4vw,42px)}
.reels-kop{margin-bottom:16px}
.reels-kop h2{
  font-family:var(--font-body);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(17px,1.8vw,22px);margin:6px 0 0;
}

.reels-rail{
  display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;
  scroll-snap-type:x proximity;scrollbar-width:none;
}
.reels-rail::-webkit-scrollbar{display:none}

.reel{
  flex:0 0 clamp(124px,11vw,158px);scroll-snap-align:start;
  text-decoration:none;display:block;
}
.reel-beeld{
  position:relative;display:block;aspect-ratio:9/16;border-radius:12px;
  overflow:hidden;background:var(--surface-2);
  border:1px solid var(--line);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s;
}
.reel:hover .reel-beeld{transform:translateY(-4px);border-color:var(--accent)}

/* De miniatuur is liggend; voor een staande kaart wordt het midden gebruikt. */
.reel-beeld img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.reel:hover .reel-beeld img{transform:scale(1.06)}

.reel-waas{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(4,6,15,.9) 0%,rgba(4,6,15,.18) 46%,transparent 72%)}

.reel-speel{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.9);
  width:34px;height:34px;border-radius:50%;
  background:rgba(4,6,15,.46);border:1px solid rgba(243,245,252,.46);
  backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.2,1);
}
.reel:hover .reel-speel{opacity:1;transform:translate(-50%,-50%)}
.reel-speel svg{width:12px;height:12px;fill:#fff;margin-left:2px}

.reel-duur{
  position:absolute;right:8px;top:8px;
  background:rgba(4,6,15,.76);border-radius:5px;padding:2px 6px;color:#fff;
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.04em;
}
.reel-titel{
  position:absolute;left:10px;right:10px;bottom:10px;
  color:#fff;font-size:12.5px;line-height:1.3;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}


/* ===========================================================================
   شاهد EN استمع NAAST KIJK EN LUISTER

   Het lettertype van "اقرأ" leek een tekening van één woord te zijn: het
   bestand bevatte maar vier tekens (ا ق ر أ). Dat klopt niet — de naamtabel
   wijst uit dat het Aref Ruqaa Bold 1.003 is (SIL OFL), waar iemand vier
   letters uit had geknipt. Het volledige lettertype heeft het hele Arabische
   alfabet.

   Het bestand is nu opnieuw uit datzelfde lettertype en dezelfde versie
   gesneden, met de elf tekens voor alle drie de woorden — 14,7 kB. De vier
   letters van اقرأ zijn vormgelijk aan wat er stond, dus die kop verandert
   niet. شاهد en استمع komen uit exact dezelfde hand: geen tweede lettertype,
   geen benadering.

   Ze delen daarom één regel — .lees-kop .iqra-art — met dezelfde maat, kleur
   en gloed. Er is geen aparte klasse meer nodig.
   =========================================================================== */

/* De kop op de Kijk-pagina gebruikt de lees-kop-opbouw; de ondertitel hoort
   in dezelfde kolom als de titel. */
.prog-sectiekop.lees-kop{align-items:center}
.prog-sectiekop .lees-kop-tekst p{margin:8px 0 0;color:var(--muted);font-size:15.5px}

/* De Luister-kop is een pagina-kop (h1 + inleiding + platformknoppen), geen
   sectiekop. Het woord staat links náást die kolom, net als اقرأ naast LEES. */
.luister-kop .lees-kop{align-items:center}
.luister-kop .lees-kop-tekst{gap:6px}
.luister-kop .lees-kop-tekst h1{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2.8rem,6vw,4.8rem);line-height:.9;letter-spacing:.01em;
}

/* Hier stonden maatregels voor شاهد en استمع naast de koppen. Ze zijn met de
   streekdikte van اقرأ gelijkgezet — gemeten mediane streek bij font-size 200:
   اقرأ 22 px, شاهد 20 px, استمع 26 px — maar staan nu niet meer naast de tekst:
   beide woorden zijn watermerk in de achtergrond geworden (zie .sfeer-woord).
   اقرأ blijft als enige zichtbaar naast LEES. De regels zijn daarom weg; deze
   notitie blijft, zodat de maten terug te vinden zijn als een woord ooit weer
   naast een kop moet komen. */

/* Het Arabische woord moet náást de kop blijven staan, ook op een telefoon.
   Zonder min-width:0 rekent de flexbox voor de tekstkolom met de volle
   regellengte van de inleiding eronder ("Elke serie heeft een eigen pagina
   met alle afleveringen."). Die basisbreedte past niet naast het woord, dus
   brak de regel en kwam شاهد erbovenop. Met flex:1 1 0 krimpt de kolom en
   breekt de inleiding netjes binnen zichzelf af. */
.lees-kop .lees-kop-tekst{flex:1 1 0;min-width:0}

/* ===========================================================================
   SFEER — de hero-achtergrond, hergebruikt in het hele thema

   De hero had drie lagen die nergens anders terugkwamen: een radiale gloed,
   een canvas met negen traag bewegende golflijnen, en het Arabische woord als
   groot doorzichtig watermerk. De rest van het thema was daardoor vlak donker.

   Deze regels maken er een component van (zie inc/sfeer.php). 'vol' is de
   sterkte van een pagina-hero, 'kalm' die van een sectie verderop — daar mag
   het niet met de inhoud gaan concurreren.
   =========================================================================== */

.sfeer{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;user-select:none;
}
.sfeer::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(1100px 700px at 80% 16%,rgba(22,22,205,.34),transparent 62%),
             radial-gradient(900px 600px at 6% 92%,rgba(77,109,255,.12),transparent 60%);
}
.sfeer-kalm::before{opacity:.6}
.sfeer-signaal{position:absolute;inset:0;display:block;width:100%;height:100%}
.sfeer-kalm .sfeer-signaal{opacity:.55}

/* Het watermerk. Dezelfde opzet als .hero-iqra: het loopt bewust links het
   beeld uit, zodat het een achtergrondvorm is en geen tweede kop. */
.sfeer-woord{
  position:absolute;top:50%;left:clamp(-70px,-2vw,6px);
  transform:translateY(-50%);
  font-family:'IqraKalligrafie',serif;font-weight:700;line-height:.78;
  font-size:min(56vh,42vw);
  color:var(--beam);opacity:.085;white-space:nowrap;
}
@media (max-width:900px){
  .sfeer-woord{left:50%;transform:translate(-50%,-50%);font-size:78vw;opacity:.06}
}
@media (prefers-reduced-motion:reduce){
  .sfeer-signaal{opacity:.35}
}

/* Secties die sfeer dragen: de sfeer ligt erachter, de inhoud erboven. */
.luister-kop,
.programmas,
.lees-band,
.prog-lijst,
#kijk.blok,
#luister.blok,
footer.site{position:relative}

.luister-kop>.container,
.programmas>.container,
.lees-band>.container,
.prog-lijst>.container,
#kijk.blok>.container,
#luister.blok>.container,
footer.site>.container{position:relative;z-index:1}

/* De Lees-pagina had geen kopbalk; de kop stond los op de paginakleur. Met een
   eigen band krijgt hij dezelfde behandeling als Kijk en Luister. */
.lees-band{
  padding:max(calc(var(--pad) + 52px),var(--kop-vrij)) 0 clamp(26px,3.4vw,40px);
  background:linear-gradient(170deg,color-mix(in srgb,var(--accent) 18%,var(--sky-1)) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(28px,4vw,44px);
}
.lees-band .lees-kop{margin-bottom:0}

/* De 'kalm'-variant zit niet in een hero maar bovenaan een lange sectie. Met
   de hero-plaatsing (top:50%) belandde het watermerk in het midden van een
   sectie van duizenden pixels — ver onder de vouw, en door overflow:hidden
   ook nog eens afgesneden. Hier hangt alles daarom aan de bovenrand, op de
   hoogte van de sectiekop. */
.sfeer-kalm::before{
  opacity:1;
  background:radial-gradient(920px 440px at 78% 0%,rgba(22,22,205,.30),transparent 64%),
             radial-gradient(720px 380px at 4% 10%,rgba(77,109,255,.11),transparent 62%);
}
.sfeer-kalm .sfeer-signaal{height:min(560px,65%);top:0;bottom:auto}
.sfeer-kalm .sfeer-woord{
  top:0;transform:translateY(-12%);
  font-size:min(34vh,26vw);
  opacity:.075;
}
@media (max-width:900px){
  .sfeer-kalm .sfeer-woord{left:50%;transform:translate(-50%,-10%);font-size:54vw}
}

/* ===========================================================================
   HET KORANVERS

   .vers-ar stond op 'IqraKalligrafie'. Zolang dat bestand maar vier tekens had
   viel het hele vers terug op een systeemlettertype en klopte het beeld nog.
   Sinds het volledige Arabisch erin zit, pakte het vers de lettervormen uit
   Aref Ruqaa Bold terwijl de harakat, de koranleestekens, de Arabische cijfers
   en de sierhaken ﴿﴾ uit een ánder lettertype kwamen — tien tekens die er niet
   in zitten. Dat botste, en een zware kalligrafische display-letter is sowieso
   niet waarin je een koranvers zet.

   Hiervoor staat nu Amiri Quran (SIL OFL): gemaakt voor koranzetwerk, met de
   GPOS-tabel die de tekens boven en onder de letter op hun plaats zet. Het
   Arabische bereik is compleet, dus elk volgend vers werkt ook.
   =========================================================================== */

@font-face{
  font-family:'KoranVers';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/koran-vers.woff2) format('woff2');
}

.vers-ar{
  font-family:'KoranVers','Amiri',serif;
  font-size:clamp(21px,2.5vw,28px);
  line-height:2.15;
}

/* Zonder werkende uitzending is er geen speler; het vers vult dan de breedte
   in plaats van een lege kolom naast zich te houden. */
.koran-stil .koran-grid{grid-template-columns:1fr}
.koran-stil .vers{max-width:84ch;margin:0 auto;padding:clamp(26px,3.5vw,38px)}

/* Op een telefoon stonden het Arabische woord, de kop én de "Alle artikelen →"
   link met z'n drieën op één regel geperst: de tekstkolom hield 97 px over,
   "PIJLER ÉÉN" brak in tweeën en "LEES" werd afgeknepen.

   Oorzaak is flex:1 1 0 op de tekstkolom. Dat is nodig om het Arabische woord
   naast de kop te houden op smalle schermen, maar met flex-basis 0 dwingt niets
   meer een regelafbreking af en past "alles" technisch op één regel. De link
   hoort daar niet bij en krijgt een eigen regel. */
@media (max-width:680px){
  .lees-kop .rechts{flex:0 0 100%;order:3;margin-top:2px}
}

/* .lees-kop, .lijst-kop en .sectiekop krijgen eerder in dit bestand
   padding-top:0, omdat ze ook midden in een pagina voorkomen en daar geen
   ruimte onder de kopbalk nodig hebben. Voor .lees-kop werd die ruimte daarna
   teruggegeven als het de eerste kop van de pagina was; voor .lijst-kop en
   .sectiekop niet. Daardoor stond de titel van het Opinie-archief op 5 px en
   die van de zoekpagina op 0 px — allebei onder een vaste balk van 73 px.

   Alleen als eerste kind van main dus de ruimte terug, en nu uit --kop-vrij,
   die niet meekrimpt met de horizontale marge. */
main > .container > .lijst-kop:first-child,
main > .container > .sectiekop:first-child,
main > .container > .lees-kop:first-child{padding-top:var(--kop-vrij)}

/* ===========================================================================
   HET MOBIELE MENU

   Wat er stond: een overlay van 92% dekking met drie kleine, grijze links
   (Lees, Kijk, Luister) midden op het scherm. Daar ging veel mis tegelijk.

   - "Word lid" was onbereikbaar. De knop in de balk wordt onder 680 px
     verborgen en stond niet in het menu. De belangrijkste actie van de omroep
     bestond dus niet op een telefoon.
   - De organisatiepagina's (Missie & visie, Tip de redactie, Veelgestelde
     vragen, Contact) stonden alleen in de voet, onderaan een lange pagina.
   - Het logo verdween. De overlay ligt op z-index 99 binnen de kopbalk, dus
     hij schoof over het logo heen en de linkerbovenhoek was leeg.
   - De links waren 1,05 rem in de gedempte tekstkleur: klein om te raken en
     laag in contrast, terwijl er een heel scherm beschikbaar was.

   Nu: een dicht paneel dat bovenaan begint, met de drie pijlers als grote
   raakbare regels, daaronder de ledenknop en de organisatielinks.
   =========================================================================== */

.nav-extra{display:none}

@media (max-width:680px){

  nav.hoofd{
    position:fixed;inset:0;
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;
    padding:calc(var(--kop-hoogte) + 14px) var(--pad) 44px;
    background:var(--bg);
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;z-index:-1;
    transition:opacity .28s,visibility .28s;
  }
  body.menu-open nav.hoofd{opacity:1;visibility:visible;z-index:99}

  /* De drie pijlers: groot, links uitgelijnd, elk een eigen raakvlak. */
  nav.hoofd > a{
    display:block;
    font-family:var(--font-display);text-transform:uppercase;
    font-size:clamp(1.9rem,9vw,2.6rem);line-height:1;letter-spacing:.01em;
    color:var(--text);
    padding:20px 0;
    border-bottom:1px solid var(--line);
  }
  nav.hoofd > a.actief{color:var(--accent-lt)}

  .nav-extra{display:block;margin-top:30px}
  /* header .knop.vol staat op display:none voor de balk; binnen het menu niet. */
  .nav-extra .knop.vol{display:inline-flex;width:100%;justify-content:center;padding-block:15px}

  .nav-secundair{display:grid;margin-top:26px}
  .nav-secundair a{
    font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);
    padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  }
  .nav-secundair a:last-child{border-bottom:0}

  /* Logo en themaknop horen zichtbaar te blijven boven het open menu. */
  body.menu-open .logo,
  body.menu-open .thema-knop{position:relative;z-index:101}

  /* De pagina eronder mag niet meescrollen zolang het menu open is. */
  body.menu-open{overflow:hidden}
}

/* Waarom het paneel 133 px hoog was in plaats van schermvullend.

   Een voorouder met backdrop-filter wordt het containing block voor álles wat
   daarbinnen position:fixed is. De kopbalk heeft blur(14px), dus inset:0 op het
   menu betekende "de kopbalk", niet "het scherm". Het paneel kreeg de hoogte
   van de balk, de achtergrond dekte alleen die strook, en de menu-items liepen
   er onderuit over de pagina heen — precies wat er te zien was.

   Zolang het menu open staat heeft de balk zijn eigen achtergrond niet nodig:
   het paneel bedekt het hele scherm en logo en themaknop liggen er bovenop. */
@media (max-width:680px){
  body.menu-open header.site{
    backdrop-filter:none;
    background:transparent;
    border-bottom-color:transparent;
  }
  /* Eerder in dit bestand staat een @supports-regel die het menu 92% dekkend
     met blur maakt. Voor een paneel dat het hele scherm vult is dicht beter. */
  body.menu-open nav.hoofd{
    background:var(--bg);
    backdrop-filter:none;
  }
}

/* ===========================================================================
   TYPOGRAFIE VAN DE ARTIKELTEKST

   Gemeten in de browser op echte artikelen, niet geschat. Wat er misging:

   CITATEN — Bootstrap uit het ouderthema zet `blockquote` op achtergrond
   #f8f9fa. Dit thema is donker met lichte tekst (#f3f5fc), dus het citaat werd
   wit op wit: een lege witte balk. Het overkwam 268 citaten in de artikelen en
   alle citaten in de columns. Dit was geen kwestie van mooier maken; de tekst
   was onleesbaar.

   KOP h3 — stond op 21px in hetzelfde lettertype als de lopende tekst en was
   daardoor nauwelijks te onderscheiden van een vetgedrukte zin.

   REGELEINDES — de meeste artikelen hebben nette alinea's, maar wie met enkele
   regeleindes schrijft krijgt van WordPress één alinea met <br>'s. Zonder
   ruimte daartussen plakt de hele tekst aan elkaar (1 op de 60 artikelen).

   ARABISCH — Koranverzen in citaten stonden links-naar-rechts in een
   lettertype zonder Arabische letters. Zie io_v2_arabisch_markeren() in
   inc/artikel.php: die zet dir en lang, hier staat de opmaak.
   =========================================================================== */

/* --- citaten ------------------------------------------------------------- */

.artikel-inhoud blockquote,
.opinie-inhoud blockquote,
.pagina-inhoud blockquote{background:transparent}

.artikel-inhoud:not(.opinie-inhoud) blockquote,
.pagina-inhoud blockquote{
  background:color-mix(in srgb,var(--surface) 86%,var(--accent));
  border-left:3px solid var(--accent);
  border-radius:0 var(--rand) var(--rand) 0;
  margin:2em 0;
  padding:clamp(18px,2.6vw,26px) clamp(20px,3vw,30px);
  font-size:1.02em;line-height:1.62;color:var(--text);
}
.artikel-inhoud:not(.opinie-inhoud) blockquote p:last-child,
.pagina-inhoud blockquote p:last-child{margin-bottom:0}

/* De column houdt zijn eigen, grotere uitspraak-opmaak; alleen de erfenis van
   Bootstrap moest eruit. */
.opinie-inhoud blockquote{border-radius:0;padding-left:26px}

/* --- koppen -------------------------------------------------------------- */

.artikel-inhoud h3,
.pagina-inhoud h3{
  font-size:clamp(19px,2.1vw,23px);font-weight:800;
  letter-spacing:-.015em;line-height:1.3;
  margin:2em 0 .55em;color:var(--text);
}
.artikel-inhoud h4,
.pagina-inhoud h4{
  font-size:17px;font-weight:700;letter-spacing:.01em;
  margin:1.8em 0 .45em;color:var(--text);
}

/* --- ritme bij losse regeleindes ----------------------------------------- */

.artikel-inhoud p br,
.pagina-inhoud p br{content:"";display:block;margin-top:.55em}

/* --- beeld in de tekst --------------------------------------------------- */

/* Negen artikelen hebben een kale <img> in een alinea in plaats van een
   <figure>. Zonder deze regel staat zo'n foto midden in een zin. */
.artikel-inhoud p > img,
.pagina-inhoud p > img{display:block;margin:1.7em auto}
.artikel-inhoud figure img,
.artikel-inhoud p > img{width:100%}

/* --- tabellen ------------------------------------------------------------ */

.artikel-inhoud table,
.pagina-inhoud table{margin:1.8em 0;display:block;overflow-x:auto}
.artikel-inhoud th,
.pagina-inhoud th{background:var(--surface-2);font-weight:700}

/* --- Arabisch in de lopende tekst ---------------------------------------- */

.artikel-inhoud [lang="ar"],
.opinie-inhoud [lang="ar"],
.pagina-inhoud [lang="ar"]{
  font-family:'KoranVers','Amiri',serif;
  font-size:1.22em;line-height:2.05;
  text-align:right;
}

/* De luisterlink per podcast.

   Er zijn drie podcasts, elk met een eigen Spotify-show. Eén knop bovenaan de
   pagina kon dus niet meer kloppen; de link staat nu bij de podcast zelf. Zonder
   deze regels stond hij als kale tekst onder "13 afleveringen" en was hij niet
   als link te herkennen. */
.serie-platform{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:10px;padding:7px 14px;
  border:1px solid var(--line);border-radius:999px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-lt);
  text-decoration:none;transition:border-color .25s,color .25s,background .25s;
}
.serie-platform::before{
  content:"";width:13px;height:13px;border-radius:50%;
  background:#1DB954; /* het groen van Spotify */
  flex-shrink:0;
}
.serie-platform:hover{
  border-color:var(--accent);color:var(--text);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
}

/* De podcastlijst stond naast de Koran-kaart in een raster van twee kolommen.
   Die kaart is weg — zonder deze regel houdt de lijst de linkerkolom van 46%
   aan en blijft de rechterhelft leeg. */
#luister .console{grid-template-columns:1fr}

/* ===========================================================================
   DE BEELDVERHOUDING VAN ARTIKELEN

   Het thema zette bijna elk beeldvak op 16/9, en de twee grote artikelen op
   16/10. Dat past bij video — YouTube levert altijd 16:9 — maar niet bij de
   foto's van de redactie.

   Gemeten aan 200 uitgelichte afbeeldingen:

       1.00 vierkant   19,5%      1.50 (3:2)    9%
       1.25 (5:4)      13,5%      1.78 (16:9)   3,5%
       0.80 staand     10,0%      rest          verspreid

   Ruim een derde is vierkant of staand; 16:9 haalt maar 3,5%. Waarschijnlijk
   komen veel beelden uit de socialformaten (1080x1350). Een staande foto in een
   vak van 16/10 verliest de helft van zijn hoogte — precies de klacht dat er
   "belangrijke details worden afgesneden".

   Hoeveel er wegvalt, per vak:

                     vierkant   staand 0.8
       16/9            -44%        -55%
       16/10           -37%        -50%
       4/3             -25%        -40%
       5/4             -20%        -36%

   Daarom 5/4. Dat is ook wat The Guardian gebruikt — gemeten: 76 van de 86
   beelden op hun voorpagina — en zij hebben hetzelfde probleem van gemengde
   bronformaten. NOS en NU.nl zetten hun opening juist op 16:9 met de kop over
   het beeld, maar die werken met brede persfoto's; met deze beeldbank zou dat
   de zwaarste uitsnede van allemaal zijn.

   De videovakken blijven 16/9: die bron ís 16:9 en wordt dus niet uitgesneden.

   object-position staat iets boven het midden. Op nieuwsfoto's zit het
   onderwerp — meestal een gezicht — zelden onderin; bij een krappe uitsnede is
   naar boven schuiven de veiligste gok.
   =========================================================================== */

.hoofdartikel .ha-beeld,
.lees-hoofd .ha-beeld,
.kaart-beeld,
.col-beeld,
.hn-beeld,
.nieuws-item .ni-beeld{
  /* 3:2 — het huisformaat, zie mu-plugins/io-beeldnorm.php. Nieuw beeld vult
     dit kader precies; ouder beeld dat afwijkt wordt niet uitgesneden maar
     opgevuld (io-vulbeeld hieronder). Eerder stond hier 5/4: dat was de
     zachtste uitsnede voor een gemengde beeldbank, maar met een vast
     huisformaat aan de bronkant is die verdediging niet meer nodig. */
  aspect-ratio:3/2;
}

.hoofdartikel .ha-beeld img,
.lees-hoofd .ha-beeld img,
.kaart-beeld img,
.col-beeld img,
.hn-beeld img,
.nieuws-item .ni-beeld img{
  object-fit:cover;
  object-position:50% 38%;
}

/* ===========================================================================
   BEELDEN DIE NIET WORDEN UITGESNEDEN

   Het vorige antwoord — één vaste verhouding kiezen — was het verkeerde
   antwoord. Gemeten per jaar:

       2026    staand 24%   vierkant 23%   liggend 52%   (237 beelden)
       2025    staand  7%   vierkant 28%   liggend 63%   ( 63 beelden)

   Staand is in één jaar van 7% naar 24% gegaan. Samen met vierkant past bijna
   de helft van de beeldbank in géén enkel liggend kader, en dat aandeel groeit.
   Welke verhouding je ook kiest, je snijdt altijd de helft kapot.

   Dus niet meer snijden. Het beeld past vóluit in het kader (object-fit:
   contain) en de ruimte die overblijft wordt gevuld met een uitvergrote,
   vervaagde kopie van datzelfde beeld. Het raster blijft daarmee strak — alle
   kaarten even hoog — terwijl er geen millimeter foto verloren gaat.

   De vervaagde laag is decoratie: aria-hidden hoeft niet, het is een
   achtergrond. Hij komt uit js/site.js, dat de src van elk beeld overneemt.
   =========================================================================== */

.io-vulbeeld{position:relative;overflow:hidden;background:var(--surface-2)}

.io-vulbeeld::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--io-beeld);
  background-size:cover;
  background-position:center;
  filter:blur(26px) saturate(1.15) brightness(.55);
  transform:scale(1.25);          /* de blur mag geen lichte randen tonen */
  pointer-events:none;
}

.io-vulbeeld > img{
  position:relative;
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
}

/* Een beeld dat het kader tóch precies vult, hoeft geen vulling: de
   vervaagde laag zou er dan alleen rekenwerk zijn. */
.io-vulbeeld.io-past::before{display:none}
.io-vulbeeld.io-past > img{object-fit:cover}

/* De regels hierboven voor de vaste verhouding zetten object-fit:cover met een
   hogere soortelijkheid dan .io-vulbeeld > img. Daardoor bleef juist het
   openingsartikel — het grootste beeld op de pagina — wél uitgesneden.
   Deze regels wegen zwaarder en gelden alleen als het beeld echt niet past. */
.io-vulbeeld:not(.io-past) > img,
.hoofdartikel .io-vulbeeld:not(.io-past) > img,
.lees-hoofd .io-vulbeeld:not(.io-past) > img,
.nieuws-item .io-vulbeeld:not(.io-past) > img{
  object-fit:contain;
  object-position:center;
}

/* ===========================================================================
   DE ARTIKELPAGINA — ÉÉN MAATSYSTEEM

   Gemeten op drie nieuwssites, artikelpagina op 1440 px breed:

                    kolom   tekst   regelhoogte   kop
       NOS           640    18px     30px (1,67)   28px
       The Guardian  620    17px     23,8px (1,4)  34px
       hier (was)    866    20px     35px (1,75)   tot 58px

   Onze tekstkolom was 35% breder dan die van beide. Bij 866 px komt de regel op
   ruim 80 tekens; leesonderzoek en de praktijk van kranten houden 60 tot 75 aan.
   Daarboven verliest het oog de aanhechting bij het terugspringen naar de
   volgende regel — dat is de "structurele" fout die je zag, niet de opmaak.

   Hoe het zo gekomen is: de vraag was ooit om de Lees-pagina even breed te
   maken als het beeld. Die breedte is toen ook op de artikelkolom beland, en de
   tekst is meegegroeid met een maat die voor een beeld bedoeld was.

   Nu gescheiden, zoals NYT en Guardian het doen bij lange stukken:

       beeld        volle 1040 px   — het beeld mag breed
       tekst         680 px         — ongeveer 68 tekens per regel
       kop           680 px         — op dezelfde maat als de tekst

   Het beeld blijft dus breed; alleen de tekst eronder wordt weer leesbaar.
   =========================================================================== */

.smal.artikel > .artikel-kop > *,
.smal.artikel > .artikel-inhoud,
.smal.artikel > .artikel-deel,
.opinie-stuk .opinie-inhoud{
  max-width:680px;
  margin-inline:auto;
}

/* Het beeld, het citaat en de uitgelichte blokken mogen wél breed blijven. */
.smal.artikel > .artikel-beeld,
.smal.artikel > .artikel-inhoud > figure,
.smal.artikel > .artikel-inhoud > .wp-block-image{
  max-width:none;
}

/* De kop stond op 58 px: groter dan bij beide vergelijkingssites, en op een
   eigen, smallere maat dan de tekst eronder. Nu dezelfde kolom, en een maat die
   gezaghebbend blijft zonder te schreeuwen. */
.artikel-kop h1{
  font-size:clamp(30px,4vw,42px);
  line-height:1.12;
}

/* Tekstmaat terug naar de bandbreedte van de kranten. 18,5 px bij 1,75 gaf een
   regelafstand die bij 680 px te ruim staat; 1,68 sluit de alinea's. */
.artikel-inhoud,
.pagina-inhoud{
  font-size:18px;
  line-height:1.68;
}
.artikel-inhoud > p:first-of-type{
  font-size:19.5px;
  line-height:1.6;
}

/* Het rubrieklabel is een inline-element; margin-inline:auto doet daar niets,
   dus het bleef aan de linkerrand van de 1040 px staan terwijl kruimelpad, kop
   en meta op de kolom van 680 px waren gaan staan. Hier schuift het over
   dezelfde afstand op als die kolom, zonder dat het label zelf breed wordt.
   De max() vangt smalle schermen op, waar 680 breder is dan de container. */
.smal.artikel > .artikel-kop > .artikel-label{
  margin-inline-start:max(0px, calc((100% - 680px) / 2));
}

/* Het beeld bovenaan een artikel stond op max-height 540 px met object-fit:
   cover. Bij een staande foto — en bijna een kwart van de beeldbank is staand —
   sneed dat 60% van de hoogte weg. Gemeten voorbeeld: een bron van 640x873 in
   een kader van 866x476.

   Nu hetzelfde principe als bij de kaarten: een vast kader op de huisverhouding
   3:2, het beeld er vóluit in, en de rest gevuld met een vervaagde uitvergroting.
   Een beeld dat al 3:2 is vult het kader gewoon; daar verandert niets. */
.artikel-beeld.io-vulbeeld{
  aspect-ratio:3/2;
  max-height:none;
  height:auto;
}
.artikel-beeld.io-vulbeeld > img{
  height:100%;
}

/* ===========================================================================
   ÉÉN LINKERLIJN

   Gemeten op 1440 px, linkerrand van elk blok:

                     kop    tekst   beeld
       Guardian      323     323     323     — alles op één lijn, alles 620
       NOS           393     393     296     — beeld breder, maar bóven de kop
       hier (was)    373     373     193     — beeld 180 px uitstekend, midden
                                               in de leesvolgorde

   NOS mag uitsteken omdat hun beeld een eigen band bóven het artikel is: het
   onderbreekt niets. Bij ons stond het tussen de kop en de tekst, en dan leest
   elke uitstekende rand als een knik.

   The Guardian lost het op door er geen uitzondering te maken: kop, beeld en
   tekst staan op dezelfde maat en dezelfde lijn. Dat is hier overgenomen.
   =========================================================================== */

.smal.artikel,
.opinie-stuk .smal,
.single-columns .smal{
  max-width:680px;
}

/* De maten per blok zijn nu overbodig: alles ligt al op 680. */
.smal.artikel > .artikel-kop > *,
.smal.artikel > .artikel-inhoud,
.smal.artikel > .artikel-deel,
.opinie-stuk .opinie-inhoud{
  max-width:none;
  margin-inline:0;
}

.smal.artikel > .artikel-kop > .artikel-label{
  margin-inline-start:0;
}

/* Beeld en steunblok staken uit tot 1040; ook zij volgen nu de kolom. */
.smal.artikel > .artikel-beeld,
.smal.artikel > .steunblok,
.opinie-stuk .steunblok{
  max-width:none;
  width:100%;
  margin-inline:0;
}

/* ===========================================================================
   HET BEELD ALS OPENINGSBAND

   De kolom van 680 px leest goed, maar op 1440 px blijft er veel leeg. Gemeten
   bij NOS op diezelfde breedte:

       beeld   links 296   breed 834   bovenaan de pagina
       kop     links 393   breed 600   eronder
       tekst   links 393   breed 640
       rechts van de kolom: niets

   Zij verbreden de tekst dus niet — dat zou de regel onleesbaar lang maken —
   maar laten het BEELD de breedte pakken, en zetten het bóven de kop. Daardoor
   is de bredere rand een opening en geen onderbreking. Precies dat verschil
   maakte het eerder rommelig: bij ons stond het beeld tussen de kop en de
   tekst, en dan leest elke uitstekende rand als een knik.

   Het artikel wordt hier een flexkolom zodat het beeld met order:-1 naar voren
   schuift; de sjablonen blijven ongemoeid.
   =========================================================================== */

.smal.artikel{
  display:flex;
  flex-direction:column;
  max-width:1040px;          /* de band mag breed; de tekst blijft 680 */
}

.smal.artikel > .artikel-beeld{
  order:-1;
  max-width:none;
  width:100%;
  margin:0 0 clamp(26px,3vw,40px);
}

/* Alles wat gelezen wordt houdt de leesmaat, gecentreerd onder de band. */
.smal.artikel > .artikel-kop,
.smal.artikel > .artikel-inhoud,
.smal.artikel > .artikel-deel,
.smal.artikel > .steunblok{
  width:100%;
  max-width:680px;
  margin-inline:auto;
}

/* De kopbalk hoeft geen ruimte meer vrij te houden voor de vaste balk: de
   beeldband staat er nu boven en doet dat zelf. */
.smal.artikel > .artikel-kop{padding-top:0}
.smal.artikel > .artikel-beeld{margin-top:var(--kop-vrij)}

/* De band was 1040 breed en daarmee 693 hoog (3:2). De kop belandde dan op
   921 px — bij een scherm van 900 px onder de vouw, terwijl juist de kop het
   eerste moet zijn wat je leest.

   NOS houdt de band op 834 breed bij een kolom van 640. Dezelfde verhouding
   hier: band 880, kolom 680. De band is dan 587 hoog en de kop staat weer in
   beeld, en de rand steekt 100 px uit in plaats van 180 — bij NOS is dat 97. */
.smal.artikel{max-width:880px}

/* ===========================================================================
   DE ARTIKELPAGINA — LEESKOLOM MET RAIL

   Twee eisen die elkaar leken tegen te spreken: de regel mag niet te lang
   worden, en de ruimte rechts mag niet leeg blijven. Dat lost een rail op —
   de manier waarop elke grote nieuwssite die ruimte invult.

       leeskolom   680 px    ~71 tekens per regel
       rail        300 px    laatste nieuws, loopt mee bij het scrollen
       samen      1020 px

   De eerdere poging om het beeld als brede band boven de kop te zetten is
   teruggedraaid: dat veranderde de vorm in plaats van de ruimte te gebruiken.
   Beeld, kop en tekst staan weer op één lijn in de leeskolom.
   =========================================================================== */

.artikel-raster{
  display:grid;
  grid-template-columns:minmax(0,680px) 300px;
  gap:clamp(28px,4vw,56px);
  justify-content:center;
  align-items:start;
}

/* Het artikel neemt de leeskolom; de band-opmaak van de vorige poging vervalt. */
.artikel-raster > .smal.artikel{
  display:block;
  max-width:none;
  width:100%;
}
.artikel-raster > .smal.artikel > .artikel-beeld{
  order:0;
  margin:clamp(22px,2.6vw,30px) 0 0;
}
.artikel-raster > .smal.artikel > .artikel-kop{padding-top:var(--kop-vrij)}
.artikel-raster > .smal.artikel > .artikel-kop,
.artikel-raster > .smal.artikel > .artikel-inhoud,
.artikel-raster > .smal.artikel > .artikel-deel,
.artikel-raster > .smal.artikel > .steunblok{max-width:none;margin-inline:0}

/* --- de rail ------------------------------------------------------------- */

.artikel-rail{padding-top:var(--kop-vrij)}

.rail-vast{
  position:sticky;top:calc(var(--kop-hoogte) + 22px);
  border:1px solid var(--line);border-radius:var(--rand);
  background:var(--surface);
  padding:20px 18px;
}

.rail-kop{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}

.rail-lijst{list-style:none;margin:0;padding:0;counter-reset:rail}
.rail-lijst li{border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.rail-lijst li:last-child{border-bottom:0}

.rail-lijst a{
  display:block;padding:12px 0;text-decoration:none;
  transition:opacity .2s;
}
.rail-lijst a:hover{opacity:.72}

.rail-datum{
  display:block;font-family:var(--font-mono);font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-lt);
  margin-bottom:5px;
}
.rail-titel{
  display:block;font-size:14.5px;line-height:1.4;font-weight:600;color:var(--text);
}

.rail-meer{
  display:inline-block;margin-top:14px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-lt);text-decoration:none;
}
.rail-meer:hover{color:var(--text)}

/* Onder 1100 px is er geen ruimte voor twee kolommen. De rail gaat dan onder
   het artikel staan, waar hij nog steeds nuttig is. */
@media (max-width:1100px){
  .artikel-raster{grid-template-columns:minmax(0,680px);}
  .artikel-rail{padding-top:0;margin-top:clamp(30px,4vw,48px)}
  .rail-vast{position:static}
}

/* Een klein liggend beeld bij elk bericht in de rail. Het beeld is niet
   informatief maar herkenbaar — daarom klein, vaste 16:9 en aria-loos. Bij
   staande bronbeelden wordt hier wél uitgesneden: op 92 bij 52 pixels is
   opvullen met een vervaagde rand alleen maar ruis. */
.rail-lijst a{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.rail-beeld{
  flex:0 0 92px;
  aspect-ratio:16/9;
  border-radius:8px;
  overflow:hidden;
  background:var(--surface-2);
}
.rail-beeld img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 38%;
  display:block;
}
.rail-tekst{min-width:0;flex:1 1 auto}
.rail-titel{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* Onder het artikel — daar is de rail breder — mogen de beelden meegroeien. */
@media (max-width:1100px){
  .rail-beeld{flex-basis:120px}
}

/* De kop van een column stond op max-width 20ch — 483 px bij een leeskolom van
   680. "De PVV kan Marokko niet loslaten" brak daardoor midden in de zin af,
   op een plek die niets met de zin te maken had, terwijl er rechts ruimte
   leegstond. Een korte maat past bij een groot display-lettertype, maar niet
   naast een kolom die breder is: dan leest het als een fout.

   De kop volgt nu dezelfde kolom als de rest, zoals bij een nieuwsartikel. */
.opinie-kop h1{
  max-width:none;
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.14;
}
.opinie-intro,
.artikel-intro{max-width:none}

/* De kopbalk van een column is een band over de volle breedte met de inhoud
   gecentreerd op 680. Het artikel eronder staat in het raster met de rail, en
   dat raster is 1036 breed (680 + 56 + 300). De kop kwam daardoor op 373 te
   staan en de tekst eronder op 195: twee linkerlijnen op één pagina.

   De band houdt nu dezelfde buitenmaat als het raster, met de inhoud links
   uitgelijnd op de leeskolom. */
.opinie-kop .smal{
  max-width:1036px;
}
.opinie-kop .smal > *{
  max-width:680px;
  margin-inline:0;
}

/* ===========================================================================
   DE COLUMNKAARTEN

   Gemeten op 1440 px: het raster zette vier kolommen van 288 px neer. Van die
   288 ging 88 px op aan padding — 24 op de kaart en nog eens 20 op het
   tekstblok erbinnen — zodat de kop 198 px overhield.

   Nederlandse columnkoppen zijn lang. "Een seculier mens kan een gelovige niet
   begrijpen. Dat is geen verwijt." brak daardoor in zes regels; de kaarten
   werden torens van losse woorden.

   Drie wijzigingen:
     - het raster bepaalt het aantal kolommen op de beschikbare breedte, met
       340 px als ondergrens: op 1440 worden dat er drie van ruim 390;
     - de dubbele padding eruit, zodat de breedte bij de tekst terechtkomt;
     - de kop op maximaal drie regels, zodat de kaarten even hoog blijven en
       een uitschieter de rij niet uit elkaar trekt.
   =========================================================================== */

.column-raster{
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
}

.column-kaart{padding:0}
.column-kaart .col-tekst{padding:20px 22px 22px}

.column-kaart h3{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width:760px){
  .column-raster{grid-template-columns:1fr}
}

/* De kop van een column mocht niet breder dan de leeskolom, 680 px. Gemeten op
   1920 px: de band is dan 1905 breed, de inhoud 1036, en de kop bleef op 680
   staan. "Een seculier mens kan een gelovige niet begrijpen. Dat is geen
   verwijt. Het gereedschap ontbreekt." brak daardoor in vier regels terwijl er
   356 px naast leegstond.

   De maat van 680 px is er voor lópende tekst: daar telt het aantal tekens per
   regel. Een kop lees je niet regel voor regel maar in één blik, en die mag dus
   de volle band pakken. De linkerlijn blijft gelijk aan de rest — alleen de
   maat verschilt, en dat is hiërarchie, geen scheefstand. */
.opinie-kop .smal > h1,
.opinie-kop .smal > .opinie-intro{
  max-width:none;
}

/* ===========================================================================
   RAAKVLAKKEN OP EEN TELEFOON

   Gemeten op 375 px. De opmaak klopt overal — geen horizontale overloop, alle
   kaarten op de volle breedte — maar veel links waren te laag om betrouwbaar
   te raken:

       voetlinks            24 px
       kruimelpad           21 px
       "Alle artikelen →"   17 px
       columnistnamen       18 px

   De richtlijn van Apple en Google is 44 px; Lighthouse rekent met 48. Dat
   haal je hier niet overal zonder de voet twee keer zo lang te maken, dus is
   het 40 px geworden: ruim voldoende om te raken, en de voet blijft te
   overzien.

   Alleen padding, geen andere letterafmetingen: het beeld verandert niet, het
   raakvlak eromheen wel. En alleen onder 680 px — met een muis is 24 px prima.
   =========================================================================== */

@media (max-width:680px){

  .voet-lijst a{
    display:block;
    padding-block:9px;
  }

  .voet-onder a,
  .voet-juridisch a{
    display:inline-block;
    padding-block:8px;
  }

  .rail-meer{padding-block:11px}

  .artikel-kop .kruimels a,
  .opinie-kop .kruimels a,
  .kruimels a{
    display:inline-block;
    padding-block:9px;
  }

  .col-naam,
  .columnisten a{
    display:inline-block;
    padding-block:10px;
  }

  /* De regels in de podcastlijst zijn de knop om af te spelen; die mogen niet
     krapper dan een vingertop. */
  .sporen .spoor{min-height:44px}
}

/* ---------------------------------------------------------------------------
   Tweede ronde. Vier soorten links bleven onder de 40 px:

       "Alle artikelen →"   13    span.rechts in de bandkop
       Lees / Kijk / Luister 12    de kopjes boven de voetkolommen
       Spotify / Apple      27    a.platform
       de sociale iconen    38    a in .socials

   Hier kan de hoogte er niet zomaar bij: de bandkop en de voetkop staan op één
   lijn met een titel ernaast, en 28 px extra zou die uit elkaar trekken. Dus
   padding erbij en dezelfde maat er als marge weer af — het vak om de link
   groeit, de regel eromheen blijft waar hij stond.
   --------------------------------------------------------------------------- */

@media (max-width:680px){

  .rechts a,
  .voet-kop a{
    display:inline-block;
    padding-block:14px;
    margin-block:-14px;
  }

  .platforms a,
  a.platform{
    min-height:40px;
    display:inline-flex;
    align-items:center;
  }

  .socials a{
    width:42px;
    height:42px;
  }

  .kop a.logo,
  .voet-merk a.logo{
    padding-block:5px;
    margin-block:-5px;
  }
}

@media (max-width:680px){
  /* De laatste drie: 38 en 32 zijn te raken, maar 44 is de maat die Apple en
     Google aanhouden en het kost hier niets. Het logo blijft op 32 — dat
     groter maken duwt de hele kop omlaag, en een logo van 150 px breed mis je
     niet. */
  .col-naam,
  .columnisten a{padding-block:13px}

  .voet-onder a,
  .voet-juridisch a{padding-block:14px}
}

@media (max-width:680px){
  /* Laatste uit de keuring: de platformknoppen op /luister/ stonden op 34 px.
     Ze heten serie-platform, niet platform — daar greep de regel hierboven
     mis. */
  .serie-platform{
    min-height:40px;
    display:inline-flex;
    align-items:center;
  }
}

/* ---------------------------------------------------------------------------
   Het teken voor het ledental.

   ± hoort voor het getal — dat is overal zo, van wetenschappelijke notatie tot
   gewoon Nederlands: ±10.000 leest als "ongeveer tienduizend". Achter het
   getal bestaat niet.

   Maar op de volle grootte van een cijfer van 96 px wordt het een tweede getal
   in plaats van een voorteken. Hetzelfde probleem als een euroteken in een
   prijs, en dezelfde oplossing als daar: halve korpsgrootte, opgetild naar de
   bovenkant van de cijfers, en iets ingehouden in kleur. Het teken doet zijn
   werk en laat het getal het woord.
   --------------------------------------------------------------------------- */
.teller-circa{
  font-weight:inherit;
}

/* Bij de grote getallen staat het teken op bijna de volle hoogte van de
   cijfers: klein maakte het onleesbaar. Iets kleiner dan de cijfers zelf en
   optisch op hun midden uitgelijnd, zodat het een voorteken blijft en geen
   los karakter wordt. */
.teller-num .teller-circa,
.num .teller-circa{
  display:inline-block;
  font-size:.72em;
  vertical-align:.1em;
  margin-right:.07em;
  opacity:.9;
}

/* ---------------------------------------------------------------------------
   Een video die alleen op YouTube speelt.

   Twaalf van de 358 kunnen hier niet in een speler: insluiten uitgezet, of een
   leeftijdsbeperking waardoor YouTube om een inlog vraagt. Die pagina toonde
   daardoor alleen een kale blauwe link, alsof er iets kapot was.

   Nu staat de miniatuur er gewoon, gedempt, met de uitleg en een knop eroverheen.
   Het ziet eruit als een video die wacht, niet als een pagina die het niet doet.
   --------------------------------------------------------------------------- */

.video-elders{position:relative;overflow:hidden;background:var(--inkt,#0B0B14)}
.video-elders img{width:100%;height:100%;object-fit:cover;display:block;opacity:.42}
.video-elders-in{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  text-align:center;padding:24px;
  background:linear-gradient(180deg,rgba(4,6,15,.35),rgba(4,6,15,.72));
}
.video-elders-tekst{
  font-size:clamp(.95rem,1.6vw,1.15rem);
  color:#fff;letter-spacing:.01em;max-width:28ch;
}