/* ═══════════════════════════════════════════════════════════════
   ARENA — PREMIUM-TEMPLATE (ArtikelPremium, opt-in skin="arena"; PR 6b). Zelfde Arena-hub-taal als arena-hub.css
   (PageHero, serif-koppen, kaarten, vervolgstap). Alleen presentatie: inhoud, schema, links en feiten ongewijzigd.
   ═══════════════════════════════════════════════════════════════ */
html[data-skin="arena"] .apx { --apx-bg: var(--arena-paper); --apx-surface: #fff; --apx-border: var(--arena-sand); --apx-text: var(--arena-ink); --apx-text2: rgba(42, 49, 44, .92); --apx-muted: rgba(42, 49, 44, .78); --apx-accent: var(--arena-moss); --apx-accent-dim: rgba(24, 64, 47, .08);
  --font-head: 'Geist', ui-sans-serif, system-ui, sans-serif; --font-body: 'Geist', ui-sans-serif, system-ui, sans-serif; --font-mono: 'Geist', ui-sans-serif, system-ui, sans-serif; }

/* ── PageHero ── */
html[data-skin="arena"] .apx-hero { background: var(--arena-forest); color: #fff; }
html[data-skin="arena"] .apx-hero::before { content: ""; position: absolute; left: -8rem; top: -7rem; width: 30rem; height: 30rem; border-radius: 9999px; background: rgba(34, 197, 94, .12); filter: blur(64px); pointer-events: none; }
html[data-skin="arena"] .apx-hero::after { content: ""; position: absolute; right: -6rem; top: 4rem; width: 26rem; height: 26rem; border-radius: 9999px; background: rgba(255, 210, 138, .07); filter: blur(64px); pointer-events: none; }
html[data-skin="arena"] .apx-hero-inner { max-width: 1024px; padding: 8rem 24px 3.5rem; min-height: 0; }
html[data-skin="arena"] .apx-crumb { color: rgba(255, 255, 255, .7); font-family: var(--arena-font-sans); font-size: 11px; letter-spacing: 0; margin-bottom: 0; }
html[data-skin="arena"] .apx-crumb a { color: rgba(255, 255, 255, .8); }
html[data-skin="arena"] .apx-crumb a:hover { color: #fff; }
html[data-skin="arena"] .apx-crumb a:focus-visible { outline: 2px solid var(--arena-lime); outline-offset: 2px; }
html[data-skin="arena"] .apx-crumb-c { color: #fff; }
html[data-skin="arena"] .apx-hero-text { max-width: 56rem; margin-top: 28px; }
html[data-skin="arena"] .apx-cat-pill { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; border-radius: 0; font-family: var(--arena-font-sans); font-size: 11px; font-weight: 600; letter-spacing: .22em; color: var(--arena-lime); margin-bottom: 0; }
html[data-skin="arena"] .apx-cat-pill::before { content: ""; width: 2rem; height: 1px; background: var(--arena-brand); }
html[data-skin="arena"] .apx-h1 { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.02; font-size: clamp(2.6rem, 6vw, 4.8rem); margin: 20px 0 0; text-shadow: none; text-wrap: balance; }
html[data-skin="arena"] .apx-intro { max-width: 42rem; margin: 24px 0 0; font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.625; color: rgba(255, 255, 255, .8); text-shadow: none; }
html[data-skin="arena"] .apx-byline { margin-top: 28px; }
html[data-skin="arena"] .apx-av { background: var(--arena-moss); font-family: var(--arena-font-sans); }
html[data-skin="arena"] .apx-byline-l { color: rgba(255, 255, 255, .7); font-family: var(--arena-font-sans); letter-spacing: .1em; }
html[data-skin="arena"] .apx-byline-n { font-family: var(--arena-font-sans); font-weight: 600; color: #fff; }
html[data-skin="arena"] .apx-byline-role { color: rgba(255, 255, 255, .7); font-family: var(--arena-font-sans); }

/* ── body ── */
html[data-skin="arena"] .apx-body-bg { background: var(--arena-paper); }
html[data-skin="arena"] .apx-container { max-width: 1180px; padding: 0 24px 88px; }
html[data-skin="arena"] .apx-kort { background: #fff; border: 1px solid rgba(24, 64, 47, .2); border-radius: 1.5rem; box-shadow: 0 28px 70px -38px rgba(12, 34, 25, .45); margin: -2rem 0 40px; max-width: 56rem; position: relative; overflow: hidden; }
html[data-skin="arena"] .apx-kort::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(to right, var(--arena-brand), var(--arena-lime), var(--arena-brand)); opacity: .7; }
html[data-skin="arena"] .apx-kort-tag { font-family: var(--arena-font-sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--arena-moss); font-weight: 600; }
html[data-skin="arena"] .apx-kort p { color: var(--arena-ink); font-size: 1.0625rem; }
html[data-skin="arena"] .apx-grid { gap: 64px; }
html[data-skin="arena"] .apx-content h2 { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.08; font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin: 56px 0 18px; color: var(--arena-ink); }
html[data-skin="arena"] .apx-content h2::before { content: ""; display: block; width: 2rem; height: 1px; background: var(--arena-brand); margin-bottom: 14px; }
html[data-skin="arena"] .apx-content h2:first-child { margin-top: 0; }
html[data-skin="arena"] .apx-content h3 { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.01em; font-size: 1.5rem; line-height: 1.15; color: var(--arena-ink); }
html[data-skin="arena"] .apx-content a { color: var(--arena-moss); text-decoration-color: rgba(24, 64, 47, .4); }
html[data-skin="arena"] .apx-content a:hover { color: var(--arena-ink); }
html[data-skin="arena"] .apx-content a:focus-visible { outline: 2px solid var(--arena-moss); outline-offset: 2px; border-radius: 2px; }
html[data-skin="arena"] .apx-content .table-wrap { border-radius: 1rem; background: #fff; }
html[data-skin="arena"] .apx-content th { background: var(--arena-cream); font-family: var(--arena-font-sans); font-weight: 600; }
html[data-skin="arena"] .apx-content tr:nth-child(even) td { background: var(--arena-paper); }
html[data-skin="arena"] .apx-content img { border-radius: 1.5rem; }
html[data-skin="arena"] .apx-content blockquote { border-left-color: var(--arena-brand); background: #f1f8ec; border-radius: 0 1rem 1rem 0; }
html[data-skin="arena"] .apx-content .apx-calc,
html[data-skin="arena"] .apx-content .apx-stat-card,
html[data-skin="arena"] .apx-content .qf-item,
html[data-skin="arena"] .apx-content .leespauze { border-radius: 1.25rem; }
html[data-skin="arena"] .apx-content .apx-stat-price,
html[data-skin="arena"] .apx-content .qf-val { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; }
html[data-skin="arena"] .apx-content .qf-val { font-size: 1.9rem; }
html[data-skin="arena"] .apx-content .apx-callout--note { background: #f3f1ea; border-color: var(--arena-sand); }
html[data-skin="arena"] .apx-content .apx-callout--warn { background: #fff7ed; border-color: #fdba74; }
html[data-skin="arena"] .apx-content .apx-callout--tip { background: #f1f8ec; border-color: #b9dba4; }
html[data-skin="arena"] .apx-content .apx-callout { border-radius: 1.25rem; }
html[data-skin="arena"] .apx-content .tool-cta { border: 1px solid #b9dba4; border-radius: 1.5rem; background: linear-gradient(135deg, #f1f8ec, var(--arena-cream)); }
html[data-skin="arena"] .apx-content .tool-cta-btns a.secondary { color: var(--arena-moss); border-color: var(--arena-moss); border-radius: 9999px; }

/* ── zijbalk ── */
html[data-skin="arena"] .apx-sb-card { background: #fff; border: 1px solid var(--arena-sand); border-radius: 1.25rem; box-shadow: 0 18px 44px -34px rgba(12, 34, 25, .3); }
html[data-skin="arena"] .apx-sb-h { font-family: var(--arena-font-sans); letter-spacing: .16em; color: rgba(42, 49, 44, .78); border-bottom-color: var(--arena-sand); }
html[data-skin="arena"] .apx-toc a { font-family: var(--arena-font-sans); color: rgba(42, 49, 44, .9); }
html[data-skin="arena"] .apx-toc a:hover { color: var(--arena-ink); }
html[data-skin="arena"] .apx-toc a.apx-toc-active { color: var(--arena-ink); border-left-color: var(--arena-moss); }
html[data-skin="arena"] .apx-toc a:focus-visible { outline: 2px solid var(--arena-moss); outline-offset: 2px; }
html[data-skin="arena"] .apx-sb-cta { background: var(--arena-forest); border: 0; border-radius: 1.5rem; }
html[data-skin="arena"] .apx-sb-cta-t { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; font-size: 1.5rem; line-height: 1.1; }
html[data-skin="arena"] .apx-sb-cta-d { color: rgba(255, 255, 255, .8); }
html[data-skin="arena"] .apx-sb-cta-btn { background: var(--arena-brand); color: var(--arena-ink); font-family: var(--arena-font-sans); font-weight: 600; }
html[data-skin="arena"] .apx-sb-cta:hover .apx-sb-cta-btn { background: var(--arena-lime); }
html[data-skin="arena"] .apx-sb-cta:focus-visible { outline: 2px solid var(--arena-lime); outline-offset: 3px; }
html[data-skin="arena"] .apx-sb-related-t { font-family: var(--arena-font-sans); color: rgba(42, 49, 44, .92); }
html[data-skin="arena"] .apx-sb-related a:hover .apx-sb-related-t,
html[data-skin="arena"] .apx-sb-related a:hover .apx-sb-related-arrow { color: var(--arena-moss); }
html[data-skin="arena"] .apx-sb-related a:focus-visible,
html[data-skin="arena"] .apx-sb-sources a:focus-visible { outline: 2px solid var(--arena-moss); outline-offset: 2px; }
html[data-skin="arena"] .apx-sb-sources-intro { color: rgba(42, 49, 44, .8); }
html[data-skin="arena"] .apx-sb-sources a { color: var(--arena-moss); font-weight: 500; }
@media (max-width: 640px) {
  html[data-skin="arena"] .apx-hero-inner { padding: 6.5rem 20px 2.5rem; }
  html[data-skin="arena"] .apx-h1 { font-size: clamp(2.3rem, 10vw, 3rem); }
  html[data-skin="arena"] .apx-container { padding: 0 20px 56px; }
  html[data-skin="arena"] .apx-kort { margin-top: 0; }
}

/* Sticky zijbalk (PR 7): de hele zijbalk blijft staan en scrolt intern als hij hoger is dan het scherm — de losse sticky
   inhoudsopgave schoof anders onder/langs de CTA (bekend overlap-issue, Warmtefonds en andere Premium-artikelen). */
@media (min-width: 1025px) {
  html[data-skin="arena"] .apx-sidebar { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 116px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(24, 64, 47, .3) transparent; padding: 2px; margin: -2px; }
  html[data-skin="arena"] .apx-sb-toc-card { position: static; }
}