/* De podcastpagina's (/podcasts/, een podcast, een aflevering) en de speler onderaan.
   Overgenomen uit luisteren-native (themes/classic/css/port-podcasts.css, de witte 'bnr'-opmaak):
   het raster van bnr.nl/podcasts (12 kolommen, 24 px tussenruimte) in eigen kleuren en vormen.
   Alleen geladen op de podcastpagina's (templates/pages/podcast*.php). Daaronder de donkere modus,
   die luisteren-native niet heeft. */

/* Het paginakader van radiostations: wit en over de volle breedte, zoals luisteren-native's main--white. */
/* rs-design-custom-css zet de blauwe verloop op :root:not([data-theme="dark"]) body met !important. */
:root body.rs-podcasts{background:var(--pc-bg)!important}
html:has(body.rs-podcasts){overflow-x:clip}
body.rs-podcasts .site-content,body.rs-podcasts .content-area,body.rs-podcasts .site-main{display:block;width:100%;max-width:none;margin:0;padding:0;background:none;float:none}
body.rs-podcasts .site.grid-container{max-width:none;background:none;overflow:visible}
:root{--pc-bg:#fff}
.pc{--y:#157a70;--yh:#0f4f49;--band:#e6f4f1;--line:#e3e6e6;position:relative;max-width:1240px;margin:0 auto;padding:0 20px;color:#000;font-size:16px;line-height:1.3}
.pc a{color:#000;text-decoration:none}
.pc h1,.pc h2,.pc h3{margin:0;color:#000;font-weight:700}
.pc picture{display:contents}
.pc source,.mpc source{display:none}                           /* picture is display:contents: its sources must not become flex items (and gaps) */
.pc-img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:8px;background:#f5f5f5}
.pc-img--none{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3m5.3-3a5.3 5.3 0 0 1-10.6 0H5a7 7 0 0 0 6 6.9V21h2v-3.1a7 7 0 0 0 6-6.9z'/%3E%3C/svg%3E") center/40% no-repeat,linear-gradient(135deg,#0f4f49,#1b9384)}
.pc-title{padding:32px 0 16px}
.pc-title h1{font-size:28px;line-height:1.3}
.pc .pc-button{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:8px;background:var(--y);color:#fff;font-weight:700;line-height:1.3;transition:background-color .2s}
.pc .pc-button:hover{background:var(--yh)}
.pc-button--wide{justify-content:center;width:100%;margin-top:16px}
.pc a:focus-visible,.pc button:focus-visible,.pc select:focus-visible,.pc input:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.pc-empty{padding:40px 0}
/* The band with the three most listened shows: from 768 px, on the pale-yellow slant that runs on behind the overview. */
.pc-band{display:none}
.pc-card{height:100%;border-bottom:1px solid var(--line)}
.pc-card__link{display:block;height:100%;padding:16px 0}
.pc-card__figure{display:flex;margin:0}
.pc-card .pc-img{flex:0 0 80px;width:80px;height:80px;align-self:flex-start}
.pc-card__caption{min-width:0;padding-left:16px}
.pc .pc-card__title{font-size:16px;line-height:1.3}
.pc-card__text{display:-webkit-box;margin-top:8px;line-height:1.6;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pc-card__link:hover .pc-card__title{text-decoration:underline}
/* "Overzicht": search, chips, sort, the grid. */
.pc-overview{position:relative;background:#fff;border-radius:20px}
.pc-overview__head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin:12px 0}
.pc .pc-overview__title{display:none;font-size:28px;line-height:48px}
.pc-search{display:flex;flex:1 1 320px;max-width:409px}
.pc .pc-search__input{flex:1;min-width:0;height:48px;margin:0;padding:15px;border:1px solid var(--line);border-right:0;border-radius:8px 0 0 8px;background:#fff;box-shadow:none;color:#000;font:inherit;font-size:16px;-webkit-appearance:none}
.pc .pc-search__input:focus{border-color:var(--y);outline:0}
.pc-search__button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0 12px;border:0;border-radius:0 8px 8px 0;background:var(--y);color:#fff;cursor:pointer}
.pc-search__button svg{fill:currentColor}
.pc-chips{display:flex;gap:12px;margin:16px 0;overflow-x:auto;scrollbar-width:none}
.pc-chips::-webkit-scrollbar{display:none}
.pc-chip{flex:none;padding:8px 16px;border:1px solid var(--line);border-radius:99px;background:#fff;color:#000;font:inherit;font-size:14px;font-weight:700;line-height:18.2px;cursor:pointer;white-space:nowrap}
.pc-chip:hover{border-color:var(--y)}
.pc-chip.is-selected{border-color:var(--y);background:var(--y);color:#fff}
.pc-hr{height:1px;margin:0 0 12px;border:0;background:var(--line)}
.pc-sort{width:200px;height:48px;padding:15px 32px 15px 12px;border:1px solid var(--line);border-radius:8px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") right 8px center/20px no-repeat;color:#000;font:inherit;font-size:14px;font-weight:700;line-height:18.2px;-webkit-appearance:none;appearance:none;cursor:pointer}
.pc-grid{display:grid;margin:12px 0;padding:0;list-style:none}
.pc-grid>li[hidden]{display:none}
.pc-none{padding:24px 0}
/* The show: the head on the band, then the episodes and "Meer podcasts". */
.pc-head{position:relative;display:grid;gap:24px;padding:32px 0}
.pc-head::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;background:var(--band);border-radius:0 0 50% 50%/0 0 48px 48px}
.pc--show{isolation:isolate}
.pc-head__art{display:flex;flex-direction:column;gap:16px;max-width:256px}
.pc-head__figure{margin:0}
.pc-head__next{display:flex;flex-direction:column;gap:6px;margin:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14px;line-height:1.3}
.pc-head__next b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pc-head__main{align-self:end;max-width:560px}
.pc-crumbs{margin:0 0 8px;font-size:14px}
.pc-crumbs a{text-decoration:underline!important}
.pc .pc-head__title{font-size:28px;line-height:1.3}
.pc-head__text{margin:8px 0 0;line-height:1.6}
.pc-head__author{margin:8px 0 0;font-size:14px;color:#3d3d3d}
.pc-head__main .pc-button{margin-top:24px}
.pc-via__label{margin:16px 0 8px;font-size:14px}
.pc-via{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pc-via__link{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:15px;font-weight:700}
.pc-via__link:hover{border-color:var(--y)}
.pc-body{position:relative;display:grid;gap:24px;padding-top:24px;background:#fff;border-radius:20px 20px 0 0}
.pc-episodes,.pc-aside{min-width:0}
.pc .pc-episodes__title{margin:0 0 24px;font-size:28px;line-height:1.3}
.pc-ep{position:relative;margin:0 0 16px;padding:22px 24px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:border-color .2s,box-shadow .2s}
.pc-ep:hover{border-color:#bfe3dd;box-shadow:0 6px 18px rgba(15,79,73,.1)}
.pc-ep__link::after{content:"";position:absolute;inset:0}                 /* the whole card links the episode's page */
.pc-ep__link:hover{text-decoration:underline}
.pc-ep.is-playing{border-color:var(--y);background:#f4fbf9}
.pc .pc-ep__title{font-size:20px;line-height:26px}
.pc-ep__intro{display:-webkit-box;margin:8px 0 0;line-height:1.6;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-ep__label{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:14px;line-height:18.2px;color:#3d3d3d}
.pc .pc-ep__play{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--y);color:#fff;transition:transform .15s}
.pc-ep__play:hover{transform:scale(1.1)}
.pc-ep__play svg{fill:currentColor}
.pc .pc-ep__play.is-playing{background:var(--yh)}
[data-pc-play] .pcp__i-pause,[data-pc-play].is-playing .pcp__i-play{display:none}
[data-pc-play].is-playing .pcp__i-pause{display:inline}
/* An episode's page (podcasts/episode.php). */
.pc--episode{padding-top:24px}
.pc-art{padding:32px 16px;border:1px solid var(--line);border-radius:14px}
.pc .pc-art__title{font-size:28px;line-height:1.3}
.pc-art__meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0;font-size:14px}
.pc .pc-art__meta a{text-decoration:underline}
.pc .pc-art__play{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:64px;margin:24px 0 16px;padding:12px 16px;border-radius:10px;background:var(--y);color:#fff!important;font-weight:700;transition:background-color .2s}
.pc .pc-art__play:hover{background:var(--yh)}
.pc-art__play svg{fill:currentColor}
.pc-art .pc-hr{margin:24px 0}
.pc .pc-art__h2{margin:0 0 8px;font-size:24px;line-height:1.3}
.pc .pc-art__h2--small{font-size:20px;margin-bottom:16px}
.pc-art__lead{margin:0;font-size:18px;line-height:1.5}
.pc-art__rule{height:2px;margin:24px 0;border:0;background:#3d3d3d}
.pc-art__text p{margin:0 0 16px;line-height:1.8;font-size:17px}
.pc-share__list{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.pc .pc-art a:not(.pc-art__play){color:#000!important}                     /* over base.css's teal "article p a:not(…)" */
.pc .pc-art .pc-share__button{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;color:#fff!important}
.pc-share__button svg{fill:currentColor}
.pc .pc-art .pc-share__button.is-whatsapp{background:#25d366}
.pc .pc-art .pc-share__button.is-mail{background:#fff;color:#000!important}
.pc .pc-art .pc-share__button.is-x{background:#000}
.pc .pc-art .pc-share__button.is-facebook{background:#4267b2}
.pc .pc-art .pc-share__button.is-linkedin{background:#0072b1}
.pc-moreeps{margin-top:48px}
.pc-moreeps__grid{display:grid}
.pc-card__date{display:block;margin-top:8px;font-size:14px;color:#3d3d3d}
.pc-moreeps__all{margin:24px 0 0}
.pc-pages{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:24px 0}
.pc-pages__arrow{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border:1px solid var(--line);border-radius:50%}
.pc-pages__arrow:hover{border-color:var(--y)}
.pc-pages__arrow.is-disabled{opacity:.3}
.pc-more{padding:16px;border:1px solid var(--line);border-radius:14px}
.pc .pc-more__title{padding-bottom:8px;font-size:24px;line-height:1.3}
.pc-more__list{margin:0;padding:0;list-style:none}
.pc-more__link{display:flex;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.pc-more__link:hover b{text-decoration:underline}
.pc-more__img{flex:none;width:64px;height:64px;border-radius:8px;object-fit:cover}
.pc-more__link span{display:flex;flex-direction:column;gap:4px;min-width:0}
.pc-more__link small{font-size:14px;color:#3d3d3d}
@media (min-width:768px){
  .pc-title{padding:48px 0 24px}
  .pc-title h1,.pc .pc-head__title{font-size:36px;line-height:46.8px}
  .pc-band{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:48px 0 40px}
  .pc-band::before{content:"";position:absolute;z-index:-1;top:-16px;left:calc(50% - 50vw);width:100vw;height:560px;background:radial-gradient(circle at 85% 0,#d3eee8,transparent 55%),var(--band);border-radius:0 0 50% 50%/0 0 64px 64px}
  .pc{isolation:isolate}
  .pc-band__head{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;grid-column:span 12}
  .pc .pc-band__title{margin:0 0 16px;font-size:28px;line-height:36.4px}
  .pc-band__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;grid-column:span 12}
  .pc-card{border:1px solid var(--line);border-radius:12px;background:#fff;transition:box-shadow .2s,transform .2s}
  .pc-card:hover{box-shadow:0 10px 24px rgba(15,79,73,.12);transform:translateY(-2px)}
  .pc-card__link{padding:16px}
  .pc-card__figure{flex-direction:column}
  .pc-card .pc-img{flex:none;width:100%;height:auto}
  .pc-card__caption{padding:16px 0 0}
  .pc-overview{padding:24px;margin:0 -24px}
  .pc .pc-overview__title{display:block}
  .pc-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .pc .pc-episodes__title{font-size:36px;line-height:46.8px}
  .pc-head{grid-template-columns:256px 1fr;gap:48px;padding:48px 0}
  .pc-moreeps__grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .pc-art{padding:32px}
  .pc .pc-art__title{font-size:36px;line-height:46.8px}
  .pc-head::before{bottom:-160px;background:radial-gradient(circle at 85% 0,#d3eee8,transparent 55%),var(--band)}
  .pc-body{padding:24px;margin:0 -24px}
}
@media (min-width:1200px){
  .pc-band__head{grid-column:span 3}
  .pc-band__cards{grid-column:span 9}
  .pc-overview,.pc-body{padding:48px;margin:0 -48px}
  .pc-grid{grid-template-columns:repeat(4,1fr)}
  .pc-body{grid-template-columns:repeat(12,1fr)}
  .pc-episodes{grid-column:span 8}
  .pc-aside{grid-column:span 4;padding-top:70px}
  .pc-aside--episode{padding-top:0}
  .pc-body--episode{padding:0;margin:0;background:none}
}
@media (max-width:1335px) and (min-width:1200px){.pc-overview,.pc-body{margin:0 -20px;padding:48px 20px}}

/* The player: a floating card in the site's teal, fixed at the bottom once an episode plays (ui.js). The seek bar's
   fill follows --p (0–1, set by ui.js); the bars beside the show's name move while it plays. */
.pcp{position:fixed;z-index:60;right:0;bottom:0;left:0;padding:0 12px calc(12px + env(safe-area-inset-bottom,0px));pointer-events:none}
.pcp[hidden]{display:none}
.pcp__inner{display:flex;gap:14px;align-items:center;max-width:980px;margin:0 auto;padding:10px 12px 10px 10px;border-radius:18px;background:linear-gradient(120deg,#0c3f3a,#135f57 55%,#177d71);color:#fff;box-shadow:0 14px 34px rgba(8,45,41,.38),inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:auto;animation:pcp-in .25s ease-out}
@keyframes pcp-in{from{opacity:0;transform:translateY(16px)}}
.pcp__img{flex:none;width:56px;height:56px;border-radius:12px;background:#0f4f49 center/cover;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.pcp__main{flex:1;min-width:0}
.pcp__show,.pcp__title{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pcp__show{display:flex;gap:8px;align-items:center;color:#9fe3d8;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pcp__eq{display:inline-flex;gap:2px;align-items:flex-end;height:10px}
.pcp__eq i{width:2px;height:30%;border-radius:1px;background:currentColor}
.pcp.is-playing .pcp__eq i{animation:pcp-eq .9s ease-in-out infinite alternate}
.pcp.is-playing .pcp__eq i:nth-child(2){animation-delay:-.3s}
.pcp.is-playing .pcp__eq i:nth-child(3){animation-delay:-.6s}
@keyframes pcp-eq{from{height:25%}to{height:100%}}
.pcp__title{margin-top:2px;font-size:15px;font-weight:700}
.pcp__bar{display:flex;gap:10px;align-items:center;margin-top:6px}
.pcp__time{flex:none;min-width:40px;color:rgba(255,255,255,.75);font-size:12px;font-variant-numeric:tabular-nums}
.pcp__time:last-child{text-align:right}
.pcp .pcp__seek{flex:1;min-width:0;height:4px;margin:0;padding:0;border:0;box-shadow:none;outline-offset:6px;border-radius:4px;background:linear-gradient(to right,#fff calc(var(--p,0) * 100%),rgba(255,255,255,.22) 0);cursor:pointer;-webkit-appearance:none;appearance:none}
.pcp__seek::-webkit-slider-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);-webkit-appearance:none;appearance:none}
.pcp__seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.pcp__seek::-moz-range-track{background:transparent}
.pcp__controls{display:flex;gap:2px;align-items:center}
.pcp__btn,.pcp__rate{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer;transition:background-color .15s,transform .15s}
.pcp__btn svg,.pcp__btn text{fill:currentColor}
.pcp__btn:hover,.pcp__rate:hover{background:rgba(255,255,255,.14)}
.pcp__btn:focus-visible,.pcp__rate:focus-visible,.pcp__seek:focus-visible{outline:2px solid #9fe3d8;outline-offset:2px}
.pcp__btn--play{width:50px;height:50px;margin:0 4px;background:#fff;color:#0f4f49;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.pcp__btn--play:hover{background:#fff;transform:scale(1.06)}
.pcp__i-pause,.pcp.is-playing .pcp__i-play{display:none}
.pcp.is-playing .pcp__i-pause{display:inline}
.pcp__rate{width:auto;min-width:44px;height:30px;padding:0 10px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);font:inherit;font-size:12px;font-weight:700}
.pcp__btn--close{width:32px;height:32px;margin-left:4px;color:rgba(255,255,255,.7)}
body.has-pcp{padding-bottom:100px}
@media (max-width:640px){
  .pcp{padding:0 8px calc(8px + env(safe-area-inset-bottom,0px))}
  .pcp__inner{position:relative;flex-wrap:wrap;gap:8px 12px;padding:10px}
  .pcp__img{width:48px;height:48px}
  .pcp__main{flex-basis:calc(100% - 60px)}
  .pcp__controls{width:100%;justify-content:space-between}
  .pcp__btn--close{position:absolute;top:6px;right:14px}
  .pcp__main{padding-right:24px}
  body.has-pcp{padding-bottom:150px}
}
@media (prefers-reduced-motion:reduce){.pcp__inner,.pcp.is-playing .pcp__eq i{animation:none}}


/* Radiostations: eigen lettertype, kruimelpad bovenaan, knoppen tegen de kritieke CSS in
   (die zet knoppen op 12px en maakt de achtergrond bij focus doorzichtig). */
.pc{font-family:inherit}
.pc .pc-title .pc-crumbs{margin-bottom:12px}
.pc-crumbs--top{padding:0 0 16px}
.pc .pc-crumbs,.pc .pc-crumbs a{color:var(--pc-zacht)}
.pc-head__page{font-size:.55em;font-weight:400;color:var(--pc-zacht)}
.pc .pc-chip,.pc .pc-chip:focus{font-size:14px!important;background:var(--pc-bg)}
.pc .pc-chip.is-selected,.pc .pc-chip.is-selected:focus{background:var(--y)}
.pc .pc-search__button,.pc .pc-search__button:focus{background:var(--y)}
.pcp .pcp__rate{font-size:12px!important}
.pcp .pcp__btn--play,.pcp .pcp__btn--play:focus{background:#fff}
.pcp .pcp__btn:not(.pcp__btn--play):focus{background:none}
.pc ul{margin-left:0}

/* Donkere modus: dezelfde opbouw, de vlakken en lijnen in de donkere tinten van de site. */
.pc{--pc-zacht:#3d3d3d}
:root[data-theme="dark"]{--pc-bg:#121212}
:root[data-theme="dark"] .pc{--band:#10302c;--line:#2e3436;--pc-zacht:#a9b1b1;color:#eee}
:root[data-theme="dark"] .pc a,:root[data-theme="dark"] .pc h1,:root[data-theme="dark"] .pc h2,:root[data-theme="dark"] .pc h3,:root[data-theme="dark"] .pc .pc-art a:not(.pc-art__play){color:#f2f2f2!important}
:root[data-theme="dark"] .pc .pc-button,:root[data-theme="dark"] .pc .pc-ep__play,:root[data-theme="dark"] .pc .pc-art__play{color:#fff!important}
:root[data-theme="dark"] .pc-overview,:root[data-theme="dark"] .pc-body,:root[data-theme="dark"] .pc-card,:root[data-theme="dark"] .pc-ep,:root[data-theme="dark"] .pc-head__next,:root[data-theme="dark"] .pc-via__link,:root[data-theme="dark"] .pc .pc-search__input,:root[data-theme="dark"] .pc-sort,:root[data-theme="dark"] .pc .pc-chip:not(.is-selected){background-color:var(--pc-bg);color:#eee}
:root[data-theme="dark"] .pc-body--episode{background:none}
:root[data-theme="dark"] .pc-ep.is-playing{background:#13302c}
:root[data-theme="dark"] .pc-head__author,:root[data-theme="dark"] .pc-ep__label,:root[data-theme="dark"] .pc-more__link small,:root[data-theme="dark"] .pc-card__date{color:var(--pc-zacht)}
:root[data-theme="dark"] .pc-sort{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eee'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .pc-art__rule{background:#555}
:root[data-theme="dark"] .pc .pc-art .pc-share__button.is-mail{background:#2a2a2a;color:#fff!important}
:root[data-theme="dark"] .pc-band::before,:root[data-theme="dark"] .pc-head::before{background:var(--band)}
:root[data-theme="dark"] .pc-card:hover{box-shadow:0 10px 24px rgba(0,0,0,.4)}
/* De site-CSS zet select op 100% en velden op 12px: hier de maten van luisteren-native. */
.pc .pc-sort{width:200px!important;max-width:100%;font-size:14px!important}
.pc .pc-search__input{font-size:16px!important}
.pc .pc-art__text p{margin:0 0 16px}
.pc-via__link svg{fill:currentColor}

/* ------------------------------------------------------------------ iTunes-variant
   ?stijl=itunes (templates/pages/*-itunes.php): de witte kaart van de overzichtspagina's
   (.ip/.pv in style.css: 900 px, Apple-letter, rode accenten) met covers en afleveringsrijen
   naar Apple Podcasts. Kleuren uit de --ip-variabelen, dus de donkere modus gaat vanzelf mee. */
.pi a{color:inherit;text-decoration:none}
.pi a:hover{text-decoration:none}
.pi .pi-icoon{background:linear-gradient(160deg,#d56dfb,#832bc1);color:#fff}
.pi .pi-kop{margin:0 0 12px;font-size:22px;font-weight:700;letter-spacing:-.01em;color:inherit}
.pi .pi-kop--klein{font-size:17px}
.pi .pi-boven{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ip-zacht)}
.pi .pi-meta{margin:6px 0 0;font-size:14px;color:var(--ip-zacht)}
.pi .pi-pagina{font-size:.55em;font-weight:500;color:var(--ip-zacht)}
.pi-cover{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--ip-veld);box-shadow:0 1px 3px rgba(0,0,0,.12),0 6px 16px rgba(0,0,0,.08);transition:transform .2s,box-shadow .2s}
.pi picture{display:contents}
.pi .pc-img--none{background:linear-gradient(160deg,#d56dfb,#832bc1)}

/* Uitgelicht: drie grote covers. */
.pi .pi-uitgelicht{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none}
.pi .pi-uitgelicht li{margin:0}
.pi-uitgelicht a{display:flex;flex-direction:column;gap:4px}
.pi-uitgelicht .pi-cover{margin-bottom:8px}
.pi-uitgelicht b{font-size:16px;font-weight:600}
.pi .pi-tekst{display:-webkit-box;font-size:14px;line-height:1.45;color:var(--ip-zacht);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pi a:hover .pi-cover{transform:translateY(-2px);box-shadow:0 2px 6px rgba(0,0,0,.14),0 12px 24px rgba(0,0,0,.12)}
.pi a:hover b{color:var(--ip-rood)}

/* Rijen: cover, kleine regel, titel, pijl. */
.pi .pi-rijen{margin:0 0 4px;padding:0;list-style:none}
.pi .pi-rijen li{margin:0}
.pi .pi-rij{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--ip-lijn)}
.pi-rij__cover{flex:none;width:56px;height:56px;border-radius:8px;object-fit:cover;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.pi-rij__tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pi-rij__tekst b{overflow:hidden;font-size:15px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.pi-rij__tekst small:last-child{font-size:13px;color:var(--ip-zacht)}
.pi-rij__pijl{flex:none;font-size:22px;color:var(--ip-zacht)}

/* Alle podcasts: zoeken, pillen, covers. */
.pi-kopregel{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-bottom:12px}
.pi-kopregel .pi-kop{margin:0}
.pi .pi-zoek{width:240px;max-width:100%;height:36px;margin:0;padding:0 14px;border:0;border-radius:10px;background:var(--ip-veld);box-shadow:none;color:inherit;font:inherit;font-size:15px!important}
.pi .pi-zoek:focus{outline:2px solid var(--ip-rood);outline-offset:0}
.pi-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px}
.pi .pi-chip,.pi .pi-chip:focus{padding:7px 14px;border:0;border-radius:999px;background:var(--ip-veld);color:inherit;font:inherit;font-size:14px!important;font-weight:500;line-height:1.2;cursor:pointer}
.pi .pi-chip:hover{background:var(--ip-veld-hover)}
.pi .pi-chip.is-selected,.pi .pi-chip.is-selected:focus{background:var(--ip-rood);color:#fff}
.pi .pi-sort{width:auto!important;height:32px;margin-left:auto;padding:0 10px;border:0;border-radius:8px;background:var(--ip-veld);color:inherit;font:inherit;font-size:14px!important}
.pi .pi-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 18px;margin:0;padding:0;list-style:none}
.pi .pi-raster li{margin:0}
.pi .pi-raster--rij{grid-template-columns:repeat(4,minmax(0,1fr))}
.pi-raster a{display:flex;flex-direction:column;gap:2px}
.pi-raster .pi-cover{margin-bottom:8px}
.pi-raster b{overflow:hidden;font-size:14px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.pi-raster small{font-size:13px;color:var(--ip-zacht)}

/* Kop van een podcast of aflevering: de cover in plaats van het icoon. */
.pi-held{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:end}
.pi-held--klein{grid-template-columns:150px minmax(0,1fr);align-items:center}
.pi-held__cover{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:12px;object-fit:cover;box-shadow:0 2px 6px rgba(0,0,0,.15),0 12px 28px rgba(0,0,0,.14)}
.pi .pi-titel--afl{font-size:26px}
.pi .pv-held__sub a{color:var(--ip-rood)}
.pi-knoppen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.pi .pi-knop{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;background:var(--ip-veld);color:var(--ip-rood);font-size:14px;font-weight:600;transition:background-color .15s}
.pi .pi-knop:hover{background:var(--ip-veld-hover)}
.pi .pi-knop--rood{background:var(--ip-rood);color:#fff}
.pi .pi-knop--rood:hover{background:#e0233c}
.pi-knop svg,.pi-duur svg{fill:currentColor}
.pi-knoppen .pi-meta{margin:0}

/* Afleveringen naar Apple Podcasts: datum, titel, intro, rode duurknop. */
.pi .pi-afl{margin:0;padding:0;list-style:none}
.pi .pi-afl li{position:relative;margin:0;padding:14px 0 16px;border-bottom:1px solid var(--ip-lijn)}
.pi .pi-afl li:first-child{border-top:1px solid var(--ip-lijn)}
.pi .pi-afl__titel{display:block;margin:3px 0 0;font-size:17px;font-weight:600;line-height:1.3}
.pi .pi-afl__titel:hover{color:var(--ip-rood)}
.pi .pi-afl__intro{display:-webkit-box;margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--ip-zacht);-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pi .pi-duur{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 12px;border-radius:999px;background:var(--ip-veld);color:var(--ip-rood);font-size:13px;font-weight:600}
.pi .pi-duur:hover{background:var(--ip-veld-hover)}
.pi .pi-duur.is-playing{background:var(--ip-rood);color:#fff}
.pi .pi-afl li.is-playing .pi-afl__titel{color:var(--ip-rood)}
.pi-pagina-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.pi-tekstblok p{white-space:pre-line}

@media (max-width:640px){
  .pi .pi-uitgelicht{grid-template-columns:1fr 1fr}
  .pi .pi-uitgelicht li:nth-child(3){display:none}
  .pi .pi-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pi .pi-raster--rij{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pi-held{grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
  .pi-held--klein{grid-template-columns:96px minmax(0,1fr)}
  .pi .pi-titel--afl{font-size:21px}
  .pi .pi-zoek{width:100%}
  .pi .pi-sort{margin-left:0}
}

/* De lichte speler van de iTunes-variant: wit en wazig, zoals de minispeler van Apple. */
.pcp--itunes .pcp__inner{background:rgba(250,250,252,.86);color:#1d1d1f;box-shadow:0 10px 30px rgba(0,0,0,.18),inset 0 0 0 1px rgba(0,0,0,.06);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif}
.pcp--itunes .pcp__show{color:#d41d35}
.pcp--itunes .pcp__time{color:#6e6e73}
.pcp--itunes .pcp__seek{background:linear-gradient(to right,#d41d35 calc(var(--p,0) * 100%),rgba(0,0,0,.12) 0)}
.pcp--itunes .pcp__seek::-webkit-slider-thumb{background:#d41d35;box-shadow:none}
.pcp--itunes .pcp__seek::-moz-range-thumb{background:#d41d35;box-shadow:none}
.pcp--itunes .pcp__btn,.pcp--itunes .pcp__rate{color:#1d1d1f}
.pcp--itunes .pcp__btn:hover,.pcp--itunes .pcp__rate:hover{background:rgba(0,0,0,.06)}
.pcp--itunes .pcp__rate{box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.pcp.pcp--itunes .pcp__btn--play,.pcp.pcp--itunes .pcp__btn--play:focus{background:#d41d35;color:#fff;box-shadow:0 4px 12px rgba(250,45,72,.35)}
.pcp--itunes .pcp__btn--close{color:#6e6e73}
.pcp--itunes .pcp__img{border-radius:8px;background-color:#e5e5ea}
:root[data-theme="dark"] .pcp--itunes .pcp__inner{background:rgba(28,28,30,.86);color:#f5f5f7;box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.08)}
:root[data-theme="dark"] .pcp--itunes .pcp__btn,:root[data-theme="dark"] .pcp--itunes .pcp__rate{color:#f5f5f7}
:root[data-theme="dark"] .pcp--itunes .pcp__seek{background:linear-gradient(to right,#d41d35 calc(var(--p,0) * 100%),rgba(255,255,255,.18) 0)}
.pi .pi-chips .pi-sort{flex:0 0 auto;width:110px!important;min-width:0;max-width:110px}
.pi source{display:none}                                   /* picture is display:contents: de source mag geen rastervak worden */

/* iTunes-variant, afleveringsrijen met meer interactie (3 okt 2026, op verzoek: "te veel grijs,
   weinig interactie"). De hele rij linkt naar de aflevering (de titel krijgt een ::after over de
   rij), de duurknop ligt erboven en speelt af. Hover: de rij komt los van de kaart met een schaduw,
   titel en knop worden rood. Minder grijs: de intro in donkere tekst, de knop met een rode rand. */
.pi .pi-afl li{margin:0 -14px;padding:16px 14px 18px;border-radius:14px;border-bottom-color:transparent;box-shadow:0 1px 0 var(--ip-lijn);transition:background-color .18s,box-shadow .18s,transform .18s}
.pi .pi-afl li:first-child{border-top:0}
.pi .pi-afl__titel::after{content:"";position:absolute;inset:0;border-radius:inherit}
.pi .pi-afl__intro{color:var(--ip-tekst);opacity:.78}
.pi .pi-afl .pi-boven{color:var(--ip-rood)}
.pi .pi-duur{position:relative;z-index:1;background:transparent;box-shadow:inset 0 0 0 1.5px var(--ip-rood);transition:background-color .15s,color .15s,transform .15s}
.pi .pi-afl li:hover,.pi .pi-afl li:focus-within{background:var(--ip-kaart);box-shadow:0 2px 6px rgba(0,0,0,.06),0 10px 28px rgba(0,0,0,.10);transform:translateY(-1px)}
.pi .pi-afl li:hover .pi-afl__titel,.pi .pi-afl li:focus-within .pi-afl__titel{color:var(--ip-rood)}
.pi .pi-afl li:hover .pi-duur,.pi .pi-duur:focus-visible{background:var(--ip-rood);color:#fff}
.pi .pi-duur:hover{transform:scale(1.05)}
.pi .pi-afl__titel:focus-visible{outline:none}
.pi .pi-afl li:has(.pi-afl__titel:focus-visible){outline:2px solid var(--ip-rood);outline-offset:2px}
.pi .pi-afl li.is-playing{background:rgba(250,45,72,.06);box-shadow:inset 3px 0 0 var(--ip-rood)}
.pi .pi-afl li.is-playing .pi-duur{background:var(--ip-rood);color:#fff}
:root[data-theme="dark"] .pi .pi-afl li:hover,:root[data-theme="dark"] .pi .pi-afl li:focus-within{background:#2c2c2e;box-shadow:0 10px 28px rgba(0,0,0,.45)}
:root[data-theme="dark"] .pi .pi-afl li.is-playing{background:rgba(250,45,72,.12)}
@media (hover:none){.pi .pi-afl li:hover{transform:none;box-shadow:0 1px 0 var(--ip-lijn);background:none}}
@media (prefers-reduced-motion:reduce){.pi .pi-afl li,.pi .pi-duur{transition:none}.pi .pi-afl li:hover{transform:none}}
/* De scheidingslijn recht onder de tekst, niet om de ronde hoeken heen; weg bij hover en afspelen. */
.pi .pi-afl li{box-shadow:none}
.pi .pi-afl li::after{content:"";position:absolute;right:14px;bottom:0;left:14px;height:1px;background:var(--ip-lijn);transition:opacity .18s}
.pi .pi-afl li:hover::after,.pi .pi-afl li:focus-within::after,.pi .pi-afl li.is-playing::after,.pi .pi-afl li:has(+ li:hover)::after{opacity:0}
@media (hover:none){.pi .pi-afl li:hover{box-shadow:none}}
/* Geen opacity op de intro: die maakt een eigen laag boven de klikbare ::after van de titel. */
.pi .pi-afl__intro{opacity:1;color:#48484a}
:root[data-theme="dark"] .pi .pi-afl__intro{color:#c7c7cc}

/* De speler in iTunes-opmaak (3 okt 2026), naar de speler van Apple Podcasts op het web:
   links 15 terug, afspelen, 30 vooruit; in het midden het "schermpje" (hoesje plus titel,
   podcast en een dunne voortgangslijn); rechts snelheid en sluiten. De knoppen staan in de HTML
   in .pcp__controls; display:contents maakt ze losse flexitems zodat order ze kan schikken. */
.pcp--itunes .pcp__inner{gap:6px;max-width:1040px;padding:8px 10px;border-radius:16px}
.pcp--itunes .pcp__controls{display:contents}
.pcp--itunes [data-pcp-skip="-15"]{order:1}
.pcp--itunes .pcp__btn--play{order:2}
.pcp--itunes [data-pcp-skip="30"]{order:3}
.pcp--itunes .pcp__img{order:4;width:56px;height:56px;margin-left:10px;border-radius:8px 0 0 8px;box-shadow:none}
.pcp--itunes .pcp__main{order:5;display:flex;flex-direction:column;justify-content:center;align-self:stretch;min-height:56px;padding:6px 16px 0;border-radius:0 8px 8px 0;background:rgba(0,0,0,.045);text-align:center}
.pcp--itunes .pcp__rate{order:6;margin-left:8px}
.pcp--itunes .pcp__btn--close{order:7}
.pcp--itunes .pcp__btn--play{width:42px;height:42px;margin:0 2px;box-shadow:none}
.pcp--itunes .pcp__title{order:-1;margin:0;font-size:13px;font-weight:600;letter-spacing:-.01em}
.pcp--itunes .pcp__show{justify-content:center;margin:1px 0 0;font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:#6e6e73}
.pcp--itunes .pcp__eq{color:#d41d35}
.pcp--itunes .pcp__bar{position:relative;gap:8px;margin:4px -16px 0;padding:0 8px 4px}
.pcp--itunes .pcp__time{min-width:34px;font-size:10px}
.pcp--itunes .pcp__seek{height:3px}
.pcp--itunes .pcp__seek::-webkit-slider-thumb{width:0;height:0;transition:width .12s,height .12s}
.pcp--itunes .pcp__main:hover .pcp__seek::-webkit-slider-thumb,.pcp--itunes .pcp__seek:focus-visible::-webkit-slider-thumb{width:11px;height:11px}
.pcp--itunes .pcp__seek::-moz-range-thumb{width:0;height:0;border:0}
.pcp--itunes .pcp__main:hover .pcp__seek::-moz-range-thumb{width:11px;height:11px}
:root[data-theme="dark"] .pcp--itunes .pcp__main{background:rgba(255,255,255,.07)}
:root[data-theme="dark"] .pcp--itunes .pcp__show,:root[data-theme="dark"] .pcp--itunes .pcp__time{color:#98989d}
/* Telefoon (4 okt 2026): één rij zoals de sticky player van bnr.nl. Een balk over de volle breedte,
   vast tegen de onderrand (geen zwevende kaart); het hoesje loopt aan de linkerkant van boven tot onder,
   daarnaast titel en podcast, rechts afspelen en sluiten. De voortgang is een dunne lijn langs de bovenrand.
   Terug, vooruit, snelheid en de tijden vallen weg. */
@media (max-width:640px){
  .pcp.pcp--itunes{padding:0}
  .pcp--itunes .pcp__inner{position:relative;display:flex;flex-wrap:nowrap;align-items:center;gap:12px;max-width:none;padding:0 6px env(safe-area-inset-bottom,0px) 0;border-radius:0;box-shadow:0 -1px 0 rgba(0,0,0,.08),0 -6px 20px rgba(0,0,0,.08)}
  .pcp--itunes .pcp__img{order:1;flex:none;width:60px;height:60px;margin:0;border-radius:0}
  .pcp--itunes .pcp__main{order:2;position:static;flex:1;min-width:0;align-self:center;min-height:0;padding:0;border-radius:0;background:none;text-align:left}
  :root[data-theme="dark"] .pcp--itunes .pcp__main{background:none}
  .pcp--itunes .pcp__title{font-size:14px;font-weight:700}
  .pcp--itunes .pcp__show{justify-content:flex-start;font-size:13px}
  .pcp--itunes .pcp__bar{position:absolute;top:0;right:0;left:0;z-index:1;margin:0;padding:0}
  .pcp--itunes .pcp__time{display:none}
  .pcp--itunes .pcp__seek{height:3px;border-radius:0}
  .pcp--itunes [data-pcp-skip],.pcp--itunes .pcp__rate{display:none}
  .pcp--itunes .pcp__btn--play{order:3;flex:none;width:44px;height:44px;margin:0}
  .pcp--itunes .pcp__btn--play svg{width:22px;height:22px}
  .pcp--itunes .pcp__btn--close{order:4;position:static;flex:none;width:32px;height:32px;margin:0}
  body.has-pcp{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
}
/* Even zichtbaar dat een andere podcastpagina geladen wordt terwijl de speler doorspeelt. */
html.pcp-laden #primary{opacity:.55;transition:opacity .15s .1s}

/* De aflevering die speelt: geen rode streep links meer (die brak met de ronde hoeken van de
   rij, 3 okt 2026). In plaats daarvan drie bewegende balkjes vóór de datum, zoals iTunes doet. */
.pi .pi-afl li.is-playing{box-shadow:none}
.pi .pi-afl li.is-playing .pi-boven::before{content:"";display:inline-block;width:11px;height:9px;margin-right:6px;vertical-align:-1px;background:linear-gradient(currentColor,currentColor) 0 100%/3px 100% no-repeat,linear-gradient(currentColor,currentColor) 4px 100%/3px 60% no-repeat,linear-gradient(currentColor,currentColor) 8px 100%/3px 80% no-repeat;animation:pi-eq .9s ease-in-out infinite alternate}
@keyframes pi-eq{
  0%{background-size:3px 30%,3px 100%,3px 55%}
  50%{background-size:3px 100%,3px 40%,3px 85%}
  100%{background-size:3px 60%,3px 75%,3px 25%}
}
@media (prefers-reduced-motion:reduce){.pi .pi-afl li.is-playing .pi-boven::before{animation:none}}

/* Beoordelingen (pages/podcast-itunes.php, podcasts.js): zoals "Beoordelingen en recensies" in Apple
   Podcasts, met duimpjes in plaats van sterren. Links het percentage groot, rechts de verdeling als
   dunne balken, daaronder "tik om te beoordelen" met twee rode duimen die vol worden als je kiest. */
.pi .pi-score{margin-top:2px}
.pi .pi-score a{display:inline-flex;align-items:center;gap:5px;color:var(--ip-zacht)}
.pi .pi-score a:hover{color:var(--ip-rood)}
.pi .pi-score b{color:var(--ip-tekst);font-weight:600}
.pi-score .pi-duim{fill:var(--ip-rood)}
.pi-duim .pi-duim__lijn{display:none}
.pi-duim--omlaag{transform:scaleY(-1)}
.pi .pi-stemmen{scroll-margin-top:90px}
.pi-stemmen__vak{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;padding:18px 20px;border-radius:14px;background:var(--ip-zebra)}
.pi-stemmen__score{display:flex;flex-direction:column;align-items:center;min-width:110px}
.pi .pi-stemmen__score b{font-size:52px;font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pi .pi-stemmen__score small{margin-top:6px;font-size:13px;font-weight:600;color:var(--ip-zacht)}
.pi-stemmen__balken{display:flex;flex-direction:column;gap:8px}
.pi-stemmen__balk{display:grid;grid-template-columns:16px minmax(0,1fr) 36px;gap:10px;align-items:center}
.pi-stemmen__balk .pi-duim{fill:var(--ip-zacht)}
.pi-stemmen__spoor{height:6px;border-radius:3px;background:var(--ip-veld-hover);overflow:hidden}
.pi-stemmen__spoor i{display:block;height:100%;border-radius:inherit;background:var(--ip-zacht);transition:width .4s ease}
.pi-stemmen__balk--up .pi-stemmen__spoor i{background:var(--ip-rood)}
.pi .pi-stemmen__getal{font-size:13px;font-weight:600;text-align:right;color:var(--ip-zacht);font-variant-numeric:tabular-nums}
.pi .pi-stemmen__totaal{margin-top:2px;font-size:13px;text-align:right;color:var(--ip-zacht)}
.pi-stemmen__geef{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-top:14px;padding:12px 0;border-top:1px solid var(--ip-lijn);border-bottom:1px solid var(--ip-lijn)}
.pi .pi-stemmen__vraag{font-size:15px;color:var(--ip-zacht)}
.pi-stemmen__knoppen{display:flex;gap:8px}
.pi .pi-stem,.pi .pi-stem:focus{display:inline-flex;align-items:center;gap:7px;margin:0;padding:8px 16px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--ip-rood);color:var(--ip-rood);font:inherit;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer;transition:background-color .15s,color .15s,transform .15s}
.pi .pi-stem:hover{background:var(--ip-veld)}
.pi .pi-stem:focus-visible{outline:2px solid var(--ip-rood);outline-offset:2px}
.pi-stem .pi-duim{fill:currentColor}
.pi-stem .pi-duim__vol{display:none}
.pi-stem .pi-duim__lijn{display:inline}
.pi .pi-stem[aria-pressed="true"]{background:var(--ip-rood);color:#fff}
.pi-stem[aria-pressed="true"] .pi-duim__vol{display:inline}
.pi-stem[aria-pressed="true"] .pi-duim__lijn{display:none}
.pi-stem.is-net .pi-duim{animation:pi-duim .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pi-duim{40%{transform:scale(1.35) rotate(-12deg)}}
.pi-stem.is-net .pi-duim--omlaag{animation-name:pi-duim-omlaag}
@keyframes pi-duim-omlaag{0%,100%{transform:scaleY(-1)}40%{transform:scaleY(-1) scale(1.35) rotate(12deg)}}
@media (prefers-reduced-motion:reduce){.pi-stem.is-net .pi-duim{animation:none}}
@media (max-width:640px){
  .pi-stemmen__vak{grid-template-columns:1fr;gap:16px}
  .pi-stemmen__score{flex-direction:row;align-items:baseline;gap:10px}
  .pi .pi-stemmen__score b{font-size:40px}
  .pi-stemmen__knoppen{width:100%}
  .pi .pi-stem{flex:1;justify-content:center}
}
.pi .pi-stemmen__leeg{display:none;margin:0;padding:16px 20px;border-radius:14px;background:var(--ip-zebra);font-size:15px;color:var(--ip-zacht)}
.pi-stemmen.is-leeg .pi-stemmen__leeg{display:block}
.pi-stemmen.is-leeg .pi-stemmen__vak{display:none}